The HTML markup for a wijlinechart widget looks like this.
Markup |
Copy Code |
---|---|
<div id="wijlinechart" style="width: 500px; height: 400px"> </div> |
You can initialize the widget with the following jQuery script.
Script |
Copy Code |
---|---|
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { var xArray = [100, 200, 400, 800, 1000]; var yArray = [-20, 0, 30, -50, 100]; $("#wijlinechart").wijlinechart({ axis: { y: { origin: 0 } }, showChartLabels: false, header: { text: "My Stocks" }, hint: { content: function () { return this.data.lineSeries.label + '\n' + this.x + '\n' + this.y + ''; }, contentStyle: {"font-size": 10}, offsetY: -10 }, legend: {visible: false}, seriesList: [ { label: "My Stocks", legendEntry: true, data: { x: xArray, y: yArray }, markers: { visible: true, type: "circle" } } ] }); }); </script> |
The markup and script featured here results in the following live widget. Mouse over the LineChart to see the hints.