Dynamically Changing the Chart

[Mark]

So this time, we are trying to change the chart in a dashboard panel.  Basically, we are doing a drill-down but not in the normal sense.  We have a circularGauge and when they click on it, we are expanding the panel and changing out the chart with a new chart and in the adjoining panel, completely changing the data in a line chart.  Everything works as we want except for the line chart just shows blank with a grid visible with gridlines every .5.

Here is an example of new data:

var Drilldown200Data = [{x:'Oct',y: 111586,y1: 0,y2: 0},{x:'Nov',y: 433378,y1: 0,y2: 0},{x:'Dec',y: 389062,y1: 0,y2: 0},{x:'Jan',y: 379556,y1: 0,y2: 0},{x:'Feb',y: 168512,y1: 0,y2: 0},{x:'Mar',y: 14306,y1: 0,y2: 0},{x:'Apr',y: 0,y1: 0,y2: 0},{x:'May',y: 0,y1: 0,y2: 0},{x:'Jun',y: 0,y1: 0,y2: 0},{x:'Jul',y: 0,y1: 0,y2: 0},{x:'Aug',y: 0,y1: 0,y2: 0},{x:'Sep',y: 0,y1: 259718,y2: 0}];

var the200Chart = {

            primaryXAxis: primaryXAxis,

            primaryYAxis: primaryYAxis(533378,50000),

            chartArea: chartArea,

            tooltip: toolTip,

            series: [

                {

                    type: 'Line', dataSource: Drilldown200Data, marker: { visible: true },

                    dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: '2020'

                },

                {

                    type: 'Line', dataSource: Drilldown200Data, marker: { visible: true },

                    dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: '2019'

                },

                {

                    type: 'Line', dataSource: Drilldown200Data, marker: { visible: true },

                    dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: '2018'

                }

            ]

        };

Here is the code that we are executing to change the chart:

var chart = new ej.charts.Chart(orig200Chart);

    chart.appendTo('#stacked-container');

function drillDown(){

chart.destroy();

chart.removeSvg();

chart = null;

chart = new ej.charts.Chart('the200Chart');

chart.appendTo('#stacked-container');

}

Any thoughts as to what we are doing wrong? Thank you!

[Mark]

Also, how do you format code in this forum??  Is there a markdown list anywhere?

[Mark]

Ok, after hours of debugging, we figured out the issue.  We needed to eval the dynamic name of the chart as it was being interpreted as a string.  The question still stands on how to do code markdown in this forum though, lol!

[Baby Palanidurai]

Hi Mark, 

 

Thanks for your update. 

 

Please follow below steps to formatting content and codes.            

1. Open MS word document or Outlook, then edit code in which format you want to paste.
2. Copy the code from Visual studio and paste in word file or outlook.
3. Then copy the content and code from MS word and paste it into our text editor. 
4. Then it will be formatted as you pasted in the text editor.

Note: If you directly copy and paste from Visual studio it will not format. We will include this code snippets feature in our forum pages in the upcoming website release 

 

Regards, 

Baby.