CODEWITHSUNDEEP
javascriptjqueryhighcharts
Fizor
Fizor

Reputation: 1530

Highcharts change chart type on drop down Jquery

Scenario: I Have a highchart on my intranet page which displays some business stats, I would like to give the user the option of changing the type of graph that is generated. But after reading multiple SO posts, I have had no luck.

I tried following this post, which granted wasnt marked as answered, but his FIDDLE seems to do what I want

I grabbed this code from that solution:

$("#chartType").change(function() {
    var type = this.value;
    if(type !== '0') {
        $(chart.series).each(function(){
            this.update({
                type: type 
            }, false);
        });
        chart.redraw();
    }
});

The problem I seem to be having is that I build my graph differently to how he has done it and I cant seem to understand what he is doing (I am not that great at Jquery, and even worse off with Highcharts stuff)

Here is a FIDDLE of my attempt and the furthest I have been able to get. I am not sure why it doesnt redraw my graph. Any help would be greatly appreciated.

Thanks,

Mike

Upvotes: 0

Views: 3118

Answers (2)

Ahsan
Ahsan

Reputation: 1084

Simply call a function drawChart() (on onchange event) which actually re-Initiates the chart:

function drawChart() {

  var options = {

          chart: {

              type: $("#filter").find("select[name=chartType]").val()

          }

    // ... Rest of the options

  };

  $('#chart').highcharts(options);

}

It works for me.

Upvotes: 1

Abdul Jabbar
Abdul Jabbar

Reputation: 2573

It has a very small problem, actually the cdhleads (chart reference) you are using inside your change function doesn't get the chart reference because it's out of its scope. so you need to get the chart reference first as:

var cdhleads = $('#CDHLeads').highcharts();

See your working Fiddle here

Upvotes: 2

Related Questions