map serial and data points using json Array - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

map serial and data points using json Array

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">
$(function () {/*from   ww w.  j  a v  a 2s  .c  o m*/
  var clearData=   [{
    "key": "port_A",
    "value": [
        [1447596900000, 0],
        [1447596960000, 0],
        [1447597020000, 1]
    ]
}, {
    "key": "port_B",
    "value": [
        [1447596900000, 0],
        [1447596960000, 4]
    ]
}, {
    "key": "port_C",
    "value": [
        [1447596900000, 0],
        [1447596960000, 0],
        [1447597020000, 1]
  ]
    }];
   var seriesData = [];
  $.each(clearData, function(i,item){
seriesData.push({name:clearData[i].key,data:clearData[i].value});
      console.log("seriesData"+JSON.stringify(seriesData));
});
   Highcharts.setOptions({
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            zoomType: 'y'
        },
        title: {
            text: 'Users by region',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            //categories: ['APAC', 'test2', 'test3', 'test4'],
            labels: {
                rotation: -45,
                style: {
                    'fontSize': '10px',
                        'fontFamily': 'Verdana, sans-serif',
                        'color': '#333',
                        'text-transform': 'uppercase',
                        'font-weight': '600'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of users '
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '#users: <b>{point.y:.1f}</b>'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series:seriesData
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials