Create a Dynamic Line Chart

Building on the Quick Start example, you can change the wijlinechart into a dynamic chart to which your users can add data points.

Note: If you used this functionality in the past, please note that data("wijlinechart") no longer works.
Instead, you must now use data("wijmoWijlinechart").

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Sets up a data array.
Sets up the chart with a seriesList that consumes the data array.
Creates a click function that allows users to create a new data point and causes the chart to redraw with each click.

Drop down and copy code

ViewModel 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, 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"} } ] }); $("#wijlinechart").click(function (e) { var offset = $(this).offset(), left = e.pageX - offset.left, top = e.pageY - offset.top, lineChart = $(this).data("wijmoWijlinechart"), bounds = lineChart.canvasBounds, xMin = lineChart.axisInfo.x.min, xMax = lineChart.axisInfo.x.max, yMin = lineChart.axisInfo.y[0].min, yMax = lineChart.axisInfo.y[0].max, xVal, yVal; if (left <= bounds.startX \|\| left >= bounds.endX \|\| top <= bounds.startY \|\| top >= bounds.endY) { return; } xVal = xMin + (left - bounds.startX) / (bounds.endX - bounds.startX) * (xMax - xMin); yVal = yMax - (top - bounds.startY) / (bounds.endY - bounds.startY) * (yMax - yMin); alert("The New Data Point is " + "x:" + Math.round(xVal, 10) + ", y:" + Math.round(yVal, 10)); xArray.push(Math.round(xVal, 10)); yArray.push(Math.round(yVal, 10)); $("#wijlinechart").wijlinechart({ seriesList: [ { label: "My Stocks", legendEntry: true, data: {x: xArray, y: yArray}, markers: {visible: true, type: "circle"} }] }); $("#wijlinechart").wijlinechart("redraw", "true"); }); }); </script

ViewModel 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,
                 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"}
                    }
                ]
             });
            $("#wijlinechart").click(function (e) {
                var offset = $(this).offset(),
                    left = e.pageX - offset.left,
                    top = e.pageY - offset.top,
                    lineChart = $(this).data("wijmoWijlinechart"),
                    bounds = lineChart.canvasBounds,
                    xMin = lineChart.axisInfo.x.min,
                    xMax = lineChart.axisInfo.x.max,
                    yMin = lineChart.axisInfo.y[0].min,
                    yMax = lineChart.axisInfo.y[0].max,
                    xVal, yVal;
 
                if (left <= bounds.startX || left >= bounds.endX
                        || top <= bounds.startY || top >= bounds.endY) {
                    return;
                }
                xVal = xMin + (left - bounds.startX) / (bounds.endX - bounds.startX)
                    * (xMax - xMin);
                yVal = yMax - (top - bounds.startY) / (bounds.endY - bounds.startY)
                    * (yMax - yMin);
                alert("The New Data Point is " + "x:" + Math.round(xVal, 10) + ", y:" + Math.round(yVal, 10));
 
                xArray.push(Math.round(xVal, 10));
                yArray.push(Math.round(yVal, 10));
 
                $("#wijlinechart").wijlinechart({
                    seriesList: [
                    {
                        label: "My Stocks",
                        legendEntry: true,
                        data: {x: xArray, y: yArray},
                        markers: {visible: true, type: "circle"}
                    }]
                });
 
                $("#wijlinechart").wijlinechart("redraw", "true");
            });
        });
 </script

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the live widget below. Click within the chart area to add data points dynamically.

See Also

Widgets

Reference