Highcharts: How to Change type of Graph

Question

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?

Answer 1

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();