Coloured scatter-plots with javascript

Question

I need a scatterplot like this: http://www.highcharts.com/demo/scatter but, instead of having one color for each serie (male and female, in the example), I need to select the color for each element. Following the example, each person would be coloured with a different level of gray, depending on their age.

As far as I know, Highcharts allow you to select the color of the elements, but it only affects the element pop-up information when you're using scatterplot.

Any other library to do scatterplots? Any way to do it with Highcharts?

Thanks!

Possible duplicate: http://stackoverflow.com/questions/7414287/how-do-you-change-the-colour-of-each-category-within-a-highcharts-column-chart — Ricardo Alvaro Lohmann, Sep 18 '12 at 17:35

jbalsas · Accepted Answer · 2012-09-18T09:06:35.017

5

You should be able to do this inside Hightcharts using the color property inside the data array.

You can see the documentation here, and there is also an example for this.

You could try preprocessing your data and transform it appending the color information to the array.

edited Sep 18 '12 at 09:06

answered Sep 18 '12 at 08:57

jbalsas

3,484
22
25

+1 pointing the OP to documentation in his chosen chart tool and finding an example – tonycoupland Sep 18 '12 at 09:19
Right, but the data.color property does not work as I need with scatterplots. See http://jsfiddle.net/yrAzx/ , where I've just changed 'column' by 'scatter' in the Javascript. As you can see, the circle is still blue, it's the pop-up info what changes the color. – lfuente Sep 18 '12 at 09:36
1

That's because in the scatter case, what you are seeing is actually the marker!! Check this [updated fiddle](http://jsfiddle.net/jbalsas/yrAzx/2/). You can see it working there :) – jbalsas Sep 18 '12 at 09:43
Happy to help! Please, accept the answer if that was all you needed – jbalsas Sep 18 '12 at 10:05

tonycoupland · Answer 2 · 2012-09-18T09:18:11.063

0

I've used AMCharts in a few javascript projects, they include a scatter chart and are quick and very easy to implement.

They have a free version if you are happy with their name in the corner of your chart canvas.

To set the colour of a specific point you can set the color property of a GraphDataItem - as in this documentation http://www.amcharts.com/docs/v.2/javascript_reference/graphdataitem

edited Sep 18 '12 at 09:18

answered Sep 18 '12 at 08:59

tonycoupland

4,127
1
28
27

Coloured scatter-plots with javascript

2 Answers2