Issue when Trying to create Chart Series by looping though dynamic data

[Ajanth R]

I was trying to create a dynamic Syncfusion line chart. The number of series (graphs) is determined by the data supplied. For example, if the data has 10 items, it should draw 10 line graphs inside the chart. Below is the code I used

     <ej-chart if.bind="dataLength" id="chart-container" e-primary-y-axis.bind="primaryYAxis" e-primary-x-axis.bind="primaryXAxis" e-size.bind="chartSize" e-legend.bind="legend">

       <template repeat.for="chartLevel of chartData">

          <ej-series if.bind="chartLevel.length>0" e-name="${i18n.tr('Stats.Level')} ${chartLevel[0].level}" e-data-source.bind="chartLevel" e-x-name="statDate" e-y-name="stat" e-type="line" e-fill.bind="graphColor[chartLevel.level]" e-marker.bind="marker">

          </ej-series>

       </template>

    </ej-chart>

This works perfectly first time. But when the data (chartData) changes, new lines will get added to the existing graph, instead of drawing a new chart. That means, suppose, if there was 2 series or lines in the chart and we click update chart. If the new data source contains three items, it should draw the new three line graphs. Instead, it adds the three to the existing two which results in 5 line graphs in the chart.

When changed the data and clicked on the update chart button

When I inspected, it seems like there are just three <ej-series> items, which is correct. But it still showing 5 lines. Seems like an issue with the svg generated. 



I even tried 

    let chartObj = $("#chart-container").data("ejChart");

    chartObj.redraw();

But no use. 

I am stuck with it. SO please help me find a solution for this.

[Dharanidharan Dharmasivam]

Hi Ajanth, 

Greetings from Syncfusion. 

On analyzing your query with the provided code snippet, we found you are trying the update the series. If you are trying to update the series, then you can use the below solution. 

Based on your requirement, we have prepared a sample to change the series using dropdown. In that dropdown, we have the number of series count and while changing series count, we have assigned an empty array to chart series collection as highlighted below and created the new series collection based on the count. You can change this with respect to your exact requirement. 

Please find the below code snippet to achieve this requirement, 

// initial data source for six series 

this.EfficiencyList = [ 

      { 

        'level': [ 

           {'Year': '2005', 'yName': 28}, 

           //… 

        ]  

      }, 

      { 

        'level': [ 

           {'Year': '2005', 'yName': 31}, 

           //… 

       ]  

       }, 

       { 

          'level': [ 

            {'Year': '2005', 'yName': 36}, 

            //… 

      }, 

      { 

        'level': [ 

          {'Year': '2005', 'yName': 48}, 

          //… 

      }, 

      { 

        'level': [ 

           {'Year': '2005',  'yName': 61}, 

           //… 

      ]  

      }, 

       { 

        'level': [ 

           {'Year': '2005',  'yName': 71}, 

           //… 

      ]  

      }, 

     ]; 

// initially create the series dynamically 

<ej-chart id="chart-container"> 

       <template repeat.for="level of EfficiencyList"> 

        <ej-series e-data-source.bind="level.level" e-x-name="Year" e-y-name="yName" e-type="line" e-marker.bind="marker"> 

        </ej-series> 

     </template> 

    </ej-chart> 

// change series count in the drop down 

<select value.bind="changedValue" change.trigger="onChange(changedValue)"> 

        <option value="6">6</option> 

        <option value="4">4</option> 

        <option value="2">2</option> 

    </select> 

//Updated the series properties 

onChange(value) { 

     //Get instance of chart 

     var chartObj = $("#chart-container").data("ejChart"); 

   //make the series empty before adding the new series  

     chartObj.model.series =[]; 

    for (let i = 0; i < value; i++) { 

      chartObj.model.series.push({ 

        dataSource: this.EfficiencyList[i].level, xName: 'Year', yName: 'yName', type:'line' 

      }) 

    } 

    chartObj.redraw(); 

  } 

Screenshot: 

Initial rendering: 

 

After change the series count: 

 

Sample for your reference, can be find from below link, 

https://gist.run/?id=1a611a7558de9163c16f732ac6b8989a 

Thanks, 

Dharani.