redraw series with json data value? - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Json Data

Description

redraw series with json data value?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <button id="color">Toggle color</button> 
      <button id="column" style="margin-left: 2em">Column</button> 
      <button id="line">Line</button> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
    xAxis: {//from w w  w .jav  a  2s.  c om
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        showEmpty: false
    },
    yAxis: {
        showEmpty: false
    },
    series: [{
        allowPointSelect: true,
        data: [ // use names for display in pie data labels
            ['January',    29.9],
            ['February',   71.5],
            ['March',     106.4],
            ['April',     129.2],
            ['May',       144.0],
            ['June',      176.0],
            ['July',      135.6],
            ['August',    148.5],
            {
                name: 'September',
                y: 216.4,
                selected: true,
                sliced: true
            },
            ['October',   194.1],
            ['November',   95.6],
            ['December',   54.4]
        ],
        marker: {
            enabled: false
        },
        showInLegend: true
    }]
});
chart.name = false;
var enableDataLabels = true,
    enableMarkers = true,
    color = false;
$('#color').click(function () {
    chart.series[0].update({
        color: color ? null : Highcharts.getOptions().colors[1],
        data : [ // use names for display in pie data labels
            ['dsds',    0],
            ['February',   0.5],
            ['March',     0.4],
            ['April',     0.2],
            ['May',       10.0],
            ['June',      10.0],
            ['July',      10.6],
            ['August',    10.5],
            {
                name: 'September',
                y: 10.4,
                selected: true,
                sliced: true
            },
            ['October',   10.1],
            ['November',   10.6],
            ['December',   10.4]
        ],
    });
    color = !color;
});
// Set type
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function (i, type) {
    $('#' + type).click(function () {
        chart.series[0].update({
            type: type
        });
    });
});

      </script>  
   </body>
</html>

Related Tutorials