plotting json string containing x,y pairs (string, float) - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

plotting json string containing x,y pairs (string, float)

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" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from w  w w  .  j av a2s. c o m*/
var json = [
    [
        ["20050043", 12.800000190735],
        ["20050044", 17.39999961853],
        ["20050045", 10.10000038147],
        ["20050046", 5.9000000953674],
        ["20050048", 4.6999998092651],
        ["20050049", 9.8999996185303],
        ["20050050", 9.1999998092651],
        ["20050051", 8.3999996185303],
        ["20050052", 2.0999999046326],
        ["20060001", 2.7000000476837],
        ["20060002", -1.1000000238419],
        ["20060004", 2],
        ["20060005", 4.9000000953674],
        ["20060006", 6.8000001907349],
        ["20060007", 6.0999999046326],
        ["20060009", 4.3000001907349],
        ["20060010", 3.4000000953674],
        ["20060011", 8.1999998092651],
        ["20060012", 7],
        ["20060017", 11.60000038147],
        ["20060018", 21.60000038147],
        ["20060019", 24.799999237061],
        ["20060020", 16.700000762939],
        ["20060021", 0],
        ["20060022", 0],
        ["20060024", 0],
        ["20060025", 18.10000038147],
        ["20060026", 20.200000762939],
        ["20060052", 2.9000000953674]
    ]
];
var data = json[0];
var chart;
//hier geht es los
var chart = $("#chart1").highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Wetterdatenprojekt'
    },
    xAxis: {
        //categories: []
    },
    yAxis: {
        title: {
            text: 'aktuelle Wetterwerte'
        },
        plotLines: [{
            value: 0,
            width: 1
        }]
    },
    series: [{
        data: data
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <div id="chart1"></div>  
   </body>
</html>

Related Tutorials