draw graph using Scatter Plot chart? - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

draw graph using Scatter Plot chart?

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">
    $(window).load(function(){/*from   www .  java2s.  c o m*/
$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy',
      events: {
        load: function() {
          var point = this.series[0].points[0],
            {
              plotX: x,
              plotY: y
            } = point;
          point.path = this.renderer.path()
            .add(point.series.group)
            .attr({
              stroke: point.color,
              'stroke-width': 1,
              d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
            });
        },
        redraw: function() {
          var point = this.series[0].points[0],
            {
              plotX: x,
              plotY: y
            } = point,
            path = point.path;
          if (path) {
            path.attr({
              d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
            })
          }
        }
      }
    },
    title: {
      text: 'Height Versus Weight of 507 Individuals by Gender'
    },
    subtitle: {
      text: 'Source: Heinz  2003'
    },
    xAxis: {
      title: {
        enabled: true,
        text: 'Strategic Alignment'
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true,
    },
    yAxis: {
      title: {
        text: 'Process & Technology Integration'
      },
      lineWidth: 1
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      x: 100,
      y: 70,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
      borderWidth: 1
    },
    plotOptions: {
      scatter: {
        lineWidth: 2
      }
    },
    series: [{
      name: ' ',
      color: 'Red',
      data: [
        [3.1, 3]
      ]
    }]
  });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"> 
      </div>  
   </body>
</html>

Related Tutorials