plot graphical data using scatter Charts where one x-axis value have multiple y-axis value - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

plot graphical data using scatter Charts where one x-axis value have multiple y-axis 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.src.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var data = [{//from   w w w . j a v  a2  s  . c o  m
  date: Date.UTC(2017, 0, 1),
  values: [4, 5, 6, -2]
}, {
  date: Date.UTC(2017, 0, 2),
  values: [3, -7]
}, {
  date: Date.UTC(2017, 0, 3),
  values: [0, 11]
}];
var chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  xAxis: {
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 // one day
  },
  series: [(function() {
    var series = {
      data: []
    };
    data.forEach(function(day) {
       day.values.forEach(function (value){
         series.data.push([day.date, value]);
      });
    });
    return series;
  })()]
});

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

Related Tutorials