CODEWITHSUNDEEP
jqueryhighcharts
Lugarini
Lugarini

Reputation: 802

Highcharts: How to Change type of Graph

I am usign Highcharts plugin for Graphs... this is my code: 

$(function () {
            $('#graph1').highcharts({
                chart: {
                    type: 'bar'
                },
                xAxis: {
                    categories: mesesGraph1
                },
                yAxis: {
                    title: {
                        text: 'WO / month'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: arrayFocal
            });
        });

Now I want a button that onclick() changes the type of my graph... is there a way to do this?

Upvotes: 2

Views: 1901

Answers (1)

ZekeDroid
ZekeDroid

Reputation: 7209

You can change the type by updating the type. Here is an example that works on normal buttons:

// Set type
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter'], function(i, type) {
  $('#' + type).click(function() {
    $.each(chart.series, function(j, series) {
      series.update({
        type: type
      });
    });
  });
});

As you can see, the buttons are anchored on the type and onClick each series in the chart is updated to whichever button you pressed. It's just as easy to do it directly on the graph, you just set the click event to update the series.

Also, my "chart" instance would be the following in your case:

var chart = $('#graph1').highcharts();

Upvotes: 6

Related Questions