Change chart series type in javascript

[Sara Silva Costa]

Hello,

I'm currently using syncfusion webforms, and in the code behind i'm reading the data from bd and creating my series from that data... but afterwards i want to enable the user to change the chart view (between pie, bar and doughtnut) but i can't manage the javascript change so far. 

my html has an  "ej : Chart ID="Chart1"

                           

my code behind:

          Series newSerie = new Series() {

                //Type = SeriesType.Doughnut,

                DoughnutCoefficient = 0.5f,

                DoughnutSize = 0.8f,

                ExplodeIndex = 4

            };

            

            newSerie.Border.Width = 2;

            newSerie.Border.Color = "white";

            

            Points newPoint;

            foreach ( data in lstData)

            {

                newPoint = new Points() {

                    Y= Convert.ToDouble(data.Value),

                    X= data.Date,

                    Text = data.Name

                };

                newSerie.Points.Add(newPoint);

            }

            this.Chart1.Series.Add(newSerie);

and i wanted something like this in javascript (not sure if possible)

chartOptions.on("click", function () {//Not working

             var chart = $('[id*="Chart1"]');

             chart.model.series.type = $(this).attr('id');

chart.redraw();

    });

Sorry for the trouble, and thanks for any help in advance.

[Baby Palanidurai]

Hi Sara Silva Costa, 

We have analyzed your query and checked your code. Unfortunately, you are taken the chart instance wrongly that’s the problem. 

Please find the below code snippet to getting the instance of the chart, 

$('#seriestype').change(function () { 

            var chart = $('[id*="Chart1"]').ejChart('instance'); // Used to getting instance of the chart 

            var type = $('#seriestype')[0].value; 

            chart.model.series[0].type = type; 

            chart.model.series[1].type = type; 

            chart.redraw(); 

        }); 

Screenshot: 

Before series type change: 

 

After change series type: 

 

Sample for your reference can be found from below link, 

http://www.syncfusion.com/downloads/support/forum/136494/ze/Sample191161718 

  

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Sara Silva Costa]

Hi!

Thanks that solved my problem and thanks for the fast reply.

[Baby Palanidurai]

Hi Sara Silva Costa, 

Thanks for your update, 

Please let us know if you need any further assistance on this. 

Regards, 

baby