CODEWITHSUNDEEP
javascripthtmlchartshighchartsscatter-plot
sudan kanakavel
sudan kanakavel

Reputation: 275

Scatter chart using HTML and Java Script (makeing y axis starting from zero (upside down) )

Hi I am using the following scatter chart code

https://www.tutorialspoint.com/highcharts/highcharts_scatter_basic.htm

In this I need no negative values. when I pass only positive values data it is solved.

I need to make my y axis value reversed. That is Y axis should start with zero. x axis same.

Kindly help me to do it. My code is as below

<html>

<head>
<title>User Interaction </title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="ourgraph.js"></script>  
</head>
<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
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 && 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: '<b>{series.name}</b><br>',
            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]> 0 && i[0] < 320 && i[1] >0 && i[1] <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);


    }
});






});
</script>
</body>
</html>

Upvotes: 1

Views: 241

Answers (1)

Riddell
Riddell

Reputation: 1489

Since the tutorial is using HighCharts it would be good idea to open there docs.

As for answer you need to change this: 

var yAxis = {
      title: {
         text: 'Weight (kg)'
      }
   };

To this:

var yAxis = {
      title: {
         text: 'Weight (kg)'
      },
      min: 0 // Make sure you add this.
   };

Hope that helps!

Upvotes: 2

Related Questions