HTML5 & JS Scatter Charts

Comments 12

1. window.onload = function () {
   var chart = new CanvasJS.Chart(“chartContainer”,
   {
   title:{
   text: “Health Status of KIS Students Who Eat Flour”
   },

   data: [
   {
   type: “scatter”,
   dataPoints: [

   { x: 4, y: 4 },
   { x: 4, y: 2 },
   { x: 2, y: 2 },
   { x: 5, y: 3 },
   { x: 4, y: 3 },

   { x: 4, y: 4 },
   { x: 4, y: 2 },
   { x: 2, y: 3 },
   { x: 3, y: 2 },
   { x: 4, y: 3 },

   { x: 4, y: 4 },
   { x: 5, y: 4 },
   { x: 4, y: 3 },
   { x: 2, y: 4 },
   { x: 2, y: 4 },

   { x: 3, y: 3 },
   { x: 4, y: 2 },
   { x: 4, y: 5 },
   { x: 4, y: 5 },
   { x: 3, y: 3 },

   { x: 3, y: 4 },
   { x: 5, y: 2 },
   { x: 4, y: 3 },
   { x: 5, y: 4 },
   { x: 3, y: 5 },

   { x: 4, y: 4 },
   { x: 3, y: 3 },
   { x: 4, y: 3 },
   { x: 5, y: 5 },
   { x: 4, y: 5 },

   { x: 4, y: 3 },
   { x: 2, y: 1 },
   { x: 2, y: 3 },
   { x: 2, y: 4 },
   { x: 2, y: 4 },

   ]
   }
   ]
   });

   chart.render();
   }

2. I wanted to do a scatter representation of a set of data with string values for the X-axis i.e. they are not really numbers but still need to be grouped. For example:

   data = [{ x: ‘Bangalore’, y: 23 }, { x: ‘Bangalore’, y: 34 }, { x: ‘Mysore’, y: 100 }, { x: ‘Bangalore’, y: 42 }, { x: ‘Mysore’, y: 400 }]

   What is the best way to do a scatter plot for this?

   • pavan,

     Please use label property instead of x for showing string values on axis. And you can group them by x value as shown in this example.

     • That’s perfect. Thanks! Having a link to chart options from each graph’s documentation might be a quick way to get to all the options.

3. Hi,
   Is there a way in which I can do a scatter plot for both postive and negative values ?

   • harsh,

     Yes. Negative y values are supported by default.

4. Hello,

   I would like to make a scatter chart using these data . Each group is represented by a markerType and a unique color. On X, I put date and Y = moy.

   date moy nom
   2013-12-17 13:45 87.975 Groupe1
   2013-12-17 14:17 124.901 Groupe1
   2013-12-17 14:43 247.245 Groupe1
   2013-12-17 13:45 42958.4 Groupe2
   2013-12-17 14:17 0 Groupe2
   2013-12-17 14:43 109146 Groupe2
   2013-12-17 15:07 0 Groupe2
   2013-12-18 14:43 17715.8 Groupe3
   2013-12-18 15:00 183.443 Groupe3
   2013-12-18 15:00 2994.61 Groupe3
   2013-12-18 15:19 185.327 Groupe3

   Thanks a lot

   • You can do the same using multiseries scatter chart. Here is a example.

     • Thank you for your help!

       I still have many questions:

       – Is it possible to get logScale on Y axis?
       – Is it possible to set a drop down menu on Y axis that contains several Y axis.
       – Is possible to display data and time on X axis?

       Thank you very much!!!

5. Hi,

   I would like to clarify whether it is possible to have transparent markers (i.e. only borders should be visible). I’ve tried MarkerBorderColor: ‘red’ and color: ‘transparent’, but MarkerBorderColor worked only on Hover event.

   Please find the example below:
   http://jsfiddle.net/rq6aukty/1/

   Thank you

   • Anna,

     You can use markerBorderThickness to show border for markers. Here is the updated fiddle.

     • Thank you