HowTo : Add Dataseries and Markers at runtime in WijLineChart

Its always easy to add dataseries, markers etc. at design time and you can refer this demo implementing the same. But, there are many scenario's wherein you need to add a dataseries based on a condition or add a new marker in the existing dataseries. This blog demonstrates how you can add new dataseries and markers dynamically in WijLineChart. Adding DataSeries WijLineChart has a property called 'seriesList' which is an array of series objects that contain data values and labels to display in the chart. You simply need to access this collection, push the new dataseries and then, update this property with the new collection. Here is the sample code :

$("#btnDataSeries").click(function () {  

  var seriesColl = [];  
  var seriesColl = $("#wijlinechart").wijlinechart("option", "seriesList");  

  var addSeries = {  
    //Label shown in legend  
    label: "Dynamic Series",  
    markers: { // setup series markers  
      visible: true, // show markers  
      type: 'circle'  
     },//  
    data: {  
      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  
      y: [144.44, 169, 102.51, 131.90, 192.91, 208.35, 133.30, 218.27, 234.32, 282.89, 152.05, 200.87]  
    }  
  };  
  //add new dataseries in the serieslist collection  
  seriesColl.push(addSeries);  
  //update the serieslist  
  $("#wijlinechart").wijlinechart("option", "seriesList", seriesColl);  
});

Add Marker Each dataseries has a 'markers' property which is used to set the symbol style for datapoints. This 'markers' property has a 'symbol' collection wherein you can define additional symbols for specific datapoints. For each custom symbol, you need to mention the index of datapoint, url of the symbol, width and height. The markers can be added at runtime using the below code:

$("#btnSymbol").click(function () {  
  var symbolArray = $($("#wijlinechart").wijlinechart("option", "seriesList")[0].markers).attr("symbol");  

  symbolArray.push({  
    index: 9,  
    url: "http://cdn.wijmo.com/images/hatemo.png",  
    width: 30,  
    height: 30  
  });  

  //append new symbol in the dataseries  
  $($("#wijlinechart").wijlinechart("option", "seriesList")[0].markers).attr("symbol", symbolArray);  

 //add new datapoint  
  $("#wijlinechart").wijlinechart("addSeriesPoint", 0, { x: 11, y: 180 }, true);  
  //redraw the chart to display the changes  
  $("#wijlinechart").wijlinechart("redraw");  
});

At the end, we are able to add the new dataseries and custom symbols in WijLineChart with few lines of code. You can also check out this sample implementing the same. Here is a small video showing the output: