Error on create multiple charts in same page

[Maico Schmitz]

Hi,

I'm trying to create two similar graphics on the same page. However when I enter the data with javascript an error occurs.

MVC:

<div id="subCategoriaAnualChartDiv" class="col" style="display:none">
	@Html.EJS().Chart("subCategoriaAnualChart").Height("600px").Width("100%").LegendSettings(leg => { leg.Position(Syncfusion.EJ2.Charts.LegendPosition.Right); leg.ShapeWidth(15); leg.ShapeHeight(15); leg.TextStyle(Legendas); }).PrimaryXAxis(px => { px.Title("Mês"); px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category); px.LabelRotation(270); px.LabelPosition(Syncfusion.EJ2.Charts.AxisPosition.Outside); px.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift); }).PrimaryYAxis(py => { py.Title("Procedentes Sub Causa / Peças Faturadas (‰)"); py.LabelFormat("n2"); py.CrosshairTooltip(ct => ct.Enable(true)); }).ZoomSettings(z => z.EnableMouseWheelZooming(true).EnablePinchZooming(true).EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.XY)).Tooltip(tp => { tp.Enable(true); tp.Shared(true); }).Crosshair(cr => { cr.Enable(true); cr.LineType(Syncfusion.EJ2.Charts.LineType.Horizontal); }).SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).EnableAnimation(true).Load("LoadChart").Render()
</div>

<div id="categoriaAnualChartDiv" class="col" style="display:none">
	@Html.EJS().Chart("categoriaAnualChart").Height("600px").Width("100%").LegendSettings(leg => { leg.Position(Syncfusion.EJ2.Charts.LegendPosition.Right); leg.ShapeWidth(15); leg.ShapeHeight(15); leg.TextStyle(Legendas);}).PrimaryXAxis(px => { px.Title("Mês"); px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category); px.LabelRotation(270); px.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift); }).PrimaryYAxis(py => { py.Title("Procedentes Causa / Peças Faturadas (‰)"); py.LabelFormat("n2"); py.CrosshairTooltip(ct => ct.Enable(true)); }).ZoomSettings(z => z.EnableMouseWheelZooming(true).EnablePinchZooming(true).EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.XY)).Tooltip(tp => { tp.Enable(true); tp.Shared(true); }).Crosshair(cr => { cr.Enable(true); cr.LineType(Syncfusion.EJ2.Charts.LineType.Horizontal); }).SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).EnableAnimation(true).Load("LoadChart").Render()
 </div>

JAVASCRIPT:

                    var subCategoriaChart = document.getElementById("subCategoriaAnualChart").ej2_instances[0];
 
                    if (Array(data.NceCategoriasAnual) != 0) {
                        document.getElementById("subCategoriaAnualChartDiv").style.display = "block";
 
                        var subCausas = data.CausasSubCausas;
 
                        subCausas.forEach(function (subCausa) {
                            subCategoriaChart.addSeries([{
                                type: 'Line',
                                dataSource: data.NceCategoriasAnual.filter(f => f.CausaSubCausa === subCausa),
                                name: subCausa,
                                xName: 'AnoMes',
                                yName: 'PercentualSubCausa',
                                width: 1.5,
                                emptyPointSettings: { mode: 'Drop' },
                                marker: { visible: true, width: 4, height: 4, shape: 'Circle' }
                            }]);
 
                        });
 
                        for (var i = 0; i < subCategoriaChart.series.length; i++) {
                            subCategoriaChart.series[i].visible = false;
                        }
 
                        subCategoriaChart.refresh();
 
                    }
                    else {
                        document.getElementById("subCategoriaAnualChartDiv").style.display = "none";
                    }
  
                    var categoriaChart = document.getElementById("categoriaAnualChart").ej2_instances[0];
 
                    if (Array(data.NceCategoriasAnual) != 0) {
                        document.getElementById("categoriaAnualChartDiv").style.display = "block";
 
                        var causas = data.Causas;
 
                        causas.forEach(function (causa) {
                            categoriaChart.addSeries([{
                                type: 'Line',
                                dataSource: data.CausasAnual.filter(f => f.Causa === causa),
                                name: causa,
                                xName: 'AnoMes',
                                yName: 'PercentualCausa',
                                width: 1.5,
                                emptyPointSettings: { mode: 'Drop' },
                                marker: { visible: true, width: 4, height: 4 }
                            }]);
 
                        });
 
                        categoriaChart.refresh();
 
                    }
                    else {
                        document.getElementById("categoriaAnualChartDiv").style.display = "none";
                    }

[Durga Gopalakrishnan]

Hi Maico, 

Greetings from Syncfusion. 

We have validated your query. In the provided code snippet, chart instance is created before chart is rendered, so console error is thrown. We suggest you to add series after chart is rendered using button click. We have modified code snippet and prepared a sample based on your requirement. Please check with the below sample and screenshots. 

Code Snippet 

 

Index.cshtml 

 

<button id="add">Add Series</button> 

<div id="subCategoriaAnualChartDiv" class="col-md-6" style="display:none"> 

    @Html.EJS().Chart("subCategoriaAnualChart").Render() 

</div> 

<script> 

  document.getElementById("add").onclick = function () { 

    var subCategoriaChart = document.getElementById("subCategoriaAnualChart").ej2_instances[0];     

    document.getElementById("subCategoriaAnualChartDiv").style.display = "block"; 

    subCategoriaChart.addSeries([{ 

        dataSource: chartData, 

        xName: 'AnoMes', 

        yName: 'PercentualSubCausa', 

    }]); 

    subCategoriaChart.primaryXAxis.labelRotation = 270; 

    subCategoriaChart.refresh(); 

}; 

</script> 

Screenshots 

Initial Rendering 

 

After Button Click 

 

Sample 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultipleCharts-2010988293.zip 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G