Get json data into scatter chart plot - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

Get json data into scatter chart plot

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 () {/*  w  w  w.j a va  2 s  . co m*/
   var chart;
    $(document).ready(function() {
        var json = [[[65,44],[66,37],[67,42],[68,55],[65,50],[65,41],[65,41],[68,41],[69,42],[70,47],[69,55],[67,45],[67,49],[67,53],[67,49],[68,51],[68,55],[68,57],[70,53],[69,66],[68,54],[69,52],[68,48]],[[75,36],[72,42],[75,44],[69,56],[72,40],[73,37],[77,34],[77,40],[74,50],[77,45],[77,43],[75,47],[73,52],[73,50],[75,44],[72,54],[71,57],[72,57],[74,55],[74,54],[75,47],[78,45],[75,43]]];
console.log(json);
         chart = new Highcharts.Chart({
            chart: {
               renderTo: 'container4',
               type: 'scatter',
               marginRight: 175,
               marginBottom: 50
            },
            title: {
               text: 'Comfort Level',
               x: -20 //center
            },
            subtitle: {
               text: '',
               x: -20
            },
            xAxis: {
               title: {
                  enabled: true,
                  text: 'Temp (F)'
               },
               min: 60,
               max: 85,
               startOnTick: true,
               endOnTick: true,
               showLastLabel: true
            },
            yAxis:  {
               title: {
                  text: 'Humidity (%RH)'
               },
               min: 30,
               max: 100
            },
            plotOptions: {
               scatter: {
                  marker: {
                     radius: 5,
                     states: {
                        hover: {
                           enabled: true,
                           lineColor: 'rgb(100,100,100)'
                        }
                     }
                  },
                  states: {
                     hover: {
                        marker: {
                           enabled: false
                        }
                     }
                  },
                  tooltip: {
                     headerFormat: '<b>{series.name}</b><br>',
                     pointFormat: '{point.x} F, {point.y} %RH'
                  }
               },
            },
            series: [{
               name: 'Night',
               data: json[0]
            }, {
               name: 'Day',
               data: json[1]
            }]
         });
//      });
   });
});

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

Related Tutorials