title: Scatter chart using HTML and Java Script (makeing y axis starting from zero (upside down) )
body: <p>Hi I am using the following scatter chart code </p>
  
  <p><a href="https://www.tutorialspoint.com/highcharts/highcharts_scatter_basic.htm" rel="nofollow">https://www.tutorialspoint.com/highcharts/highcharts_scatter_basic.htm</a></p>
  
  <p>In this I need no negative values. when I pass only positive values data it is solved.</p>
  
  <p>I need to make my y axis value reversed. That is Y axis should start with zero.
  x axis same.</p>
  
  <p>Kindly help me to do it.  My code is as below</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;User Interaction &lt;/title&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="ourgraph.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="container" style="width: 550px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;script language="JavaScript"&gt;
  var edata;
  var i;
  
  //a = new Array();
  $(document).ready(function() {  
     var chart = {
        type: 'scatter',
        zoomType: 'xy'
     };
     var title = {
        text: 'User Interaction Touch points'   
     };
     var subtitle = {
        text: 'Source: charmboard database'  
     };
     var xAxis = {
        //range = [0,320]
        title: {
        enabled: true,
           text: 'Height (px)'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
     };
     var yAxis = {
        //range = [0,180]
        title: {
           text: 'Width (px)'
        }
     };
     var legend = {   
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 0.1
     }  
     var plotOptions = {
        scatter: {
           marker: {
              radius: 0.5,
              states: {
                 hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                 }
              }
           },
           states: {
              hover: {
                 marker: {
                    enabled: false
                 }
              }
           },
           tooltip: {
              headerFormat: '&lt;b&gt;{series.name}&lt;/b&gt;&lt;br&gt;',
              pointFormat: '{point.x} x-px, {point.y} y-px'
           }
        }
     };
  
  // http call for data
  
              $.ajax({
      url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      type: 'GET',
      context: document.body,
      success: function(data){
  
       //console.log(data[0]);
       //console.log(data[1]);
       //console.log(data);
  
       // http call for end
  
       //writeing  a data to file starts  with  removed time slot colum, negatvie values , x axis 0-320  ,y axis 0-180 alone
  
       // data.forEach(function(i)
       //{
        //  if (i[0]&gt; 0 &amp;&amp; i[0] &lt; 320 &amp;&amp; i[1] &gt;0 &amp;&amp; i[1] &lt;180)
        //  {
  
          //     
           //   edata = data.slice(2);
  
  
          //}
  
        //});   
  
       //writeing  a data to file ends  with  removed time slot colum, negatvie values , x axis 0-320  ,y axis 0-180 alone
       var series= [{
              name: 'Touches',
              color: 'rgba(223, 83, 83, .5)',
  
  
  
              data: data
  
  
               }
     ];     
  
     var json = {};   
     json.chart = chart; 
     json.title = title;   
     json.subtitle = subtitle; 
     json.legend = legend;
     json.xAxis = xAxis;
     json.yAxis = yAxis;  
     json.series = series;
     json.plotOptions = plotOptions;
     $('#container').highcharts(json);
  
  
      }
  });
  
  
  
  
  
  
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>