Use Object Arrays

Building on the Quick Start example, you can use a more complex array of data objects, and specify the data field using the seriesList option's bind attribute.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which uses an array of data objects, each containing a name and a score value. The array is specified in the data option, and the score field is bound in the seriesList option.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { var data = [{ name: "Januray", score: 73 }, { name: "February", score: 95 }, { name: "March", score: 89 }, { name: "April", score: 66 }, { name: "May", score: 50 }, { name: "June", score: 65 }, { name: "July", score: 70 }, { name: "August", score: 43 }, { name: "September", score: 65 }, { name: "October", score: 27 }, { name: "November", score: 77 }, { name: "December", score: 58 }]; $("#wijsparkline").wijsparkline({ data: data, seriesList: [{ bind: "score" }] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
    $(document).ready(function () {
        var data = [{ name: "Januray", score: 73 }, { name: "February", score: 95 }, { name: "March", score: 89 },
            { name: "April", score: 66 }, { name: "May", score: 50 }, { name: "June", score: 65 },
            { name: "July", score: 70 }, { name: "August", score: 43 }, { name: "September", score: 65 },
            { name: "October", score: 27 }, { name: "November", score: 77 }, { name: "December", score: 58 }];
        $("#wijsparkline").wijsparkline({
            data: data,
            seriesList: [{
                bind: "score"
            }]
        });
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the bound values showing in a simple spark line.

Reference

wijsparkline API

data Option

seriesList Option

Widgets

SparkLine