update column graph with setData() for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

update column graph with setData() for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  www  .  j a  v  a 2 s .  com
var chartBench
$(document).ready(function () {
    chartBench = new Highcharts.Chart({
        chart: {
            renderTo: 'containerYo',
            type: 'column'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        legend: {},
        plotOptions: {
            series: {
                shadow: false,
                borderWidth: 0
            }
        },
        xAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickLength: 3,
            categories: ['2011', '2012', '2013', '2014'],
            title: {
                text: 'Years'
            }
        },
        yAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickWidth: 1,
            tickLength: 3,
            gridLineColor: '#ddd',
            labels: {
                format: '$ {value}'
            },
            title: {
                text: ''
            }
        },
        series: [{
            "name": "Yours",
                "data": [110, 100, 120, 130]
        }, {
            "name": "Another",
                "data": [100, 90, 110, 120]
        }, {
            "name": "Another B",
                "data": [90, 80, 100, 110]
        }, {
            "name": "Another C",
                "data": [80, 70, 90, 100]
        }]
    });
});
$("#list").on('change', function () {
    //alert('f')
    var selVal = $("#list").val();
    if (selVal == "a") {
        chartBench.series[0].setData(
            [110, 100, 120, 130]);
    } else if (selVal == "b") {
        chartBench.series[0].setData(
                [210, 200, 220, 230]);
        } else {
        }
    });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div> 
         <div style="display:inline-block; padding-right:20px; padding-left:20px;"> 
            <select id="list"> 
               <option id="year0" value="a" selected="yes">Option A</option> 
               <option id="year1" value="b">Option B</option> 
            </select> 
         </div> 
      </div> 
      <div id="containerYo" style="width: 528px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials