Markup and Scripting

The HTML markup for a wijsparkline widget looks like this.

Markup	Copy Code
<h3>Line</h3> <div id="wijsparklineDefault" style="height:50px;width:200px"> </div> <h3>Area</h3> <div id="wijsparklineArea" style="height:50px;width:200px"> </div>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { var data = [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8]; $("#wijsparklineDefault").wijsparkline({ data: data }); $("#wijsparklineArea").wijsparkline({ data: data, type: "area" }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
            $(document).ready(function () {
                var data = [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8];
                $("#wijsparklineDefault").wijsparkline({
                    data: data
                });
                $("#wijsparklineArea").wijsparkline({
                    data: data,
                    type: "area"
                });
            });
});
</script>

The markup and script featured here results in the following live widget. Mouse over the SparkLine to see tooltips showing the data value at each point.

Reference

wijsparkline API

data Option

type Option