ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Scatter chart
Posted by Claude Kane on Dec-05-2013 22:55
| Reply | Monitor
I have a XYChart that I wish to change the color of the symbol based on a third data set.   I have an array with the Hex code for the color desired for each symbol.  I am thinking of addextrafield, but not sure how to implement that and get the symbol to change color.

Therefore I have 3 arrays, xData, Ydata, ColorData

Suggestions?

  Re: Scatter chart
Posted by Peter Kwan on Dec-06-2013 00:43
| Reply | Monitor
Hi Claude,

If you have only a few symbols (eg. 500 symbols), you may consider to simply use one symbol per layer. In this way, each symbol can have a different color, shape, etc.. For example:

for (int i = 0; i < xData.Length; ++i)
   c.addScatterLayer(new double[] { xData[i] }, new double[] { yData[i] }, "", Chart.CircleSymbol, 9, ColorData[i], ColorData[i]);

If you have a large number of symbols (eg. 50000 symbols), it is better to divide the symbols into groups based on colors, and then use one scatter layer per group. In C#, it is like:

//separate the points into groups based on color
Dictionary< int, List<int> > groups = new Dictionary< int, List<int> >();
for (int i = 0; i < ColorData.Length; ++i) {
   if (!groups.ContainsKey(ColorData[i]))
       groups.Add(ColorData[i], new List<int>());   // add a new group
   groups[ColorData[i]].Add(i);
}

//plot each group as a scatter layer
foreach (var pair in groups) {
   double[] groupXData= new double[pair.Value.Count];
   double[] groupYData= new double[groupXData.Length];
   foreach(int j = 0; j < groupXData.Length; ++i) {
       groupXData[i] = xData[pair.Value[i]];
       groupYData[i] = yData[pair.Value[i]];
   }
   c.addScatterLayer(groupXData, groupYData, "", Chart.CircleSymbol, 9, pair.Key, pair.Key);
}

Hope this can help.

Regards
Peter Kwan

  Re: Scatter chart
Posted by claude Kane on Dec-06-2013 10:39
| Reply | Monitor
Thanks for the answer - works great!  One additional question.  How do I get the third dimension to show a value in the tooltip when I hover over the circle.

xdata, ydata no problem.  I have colorData array which is the color hex code,  I also have an array with the actual values that the colors are representing and that is what I want to show in the tooltip.

  Re: Scatter chart
Posted by Peter Kwan on Dec-07-2013 00:46
| Reply | Monitor
Hi Claude,

You may add your third dimension as an extra field to the layer. It is like:

layer.addExtraField(myThirdDataArray);

You can then use {field0} to represent it in the tooltips, like:

"title='x={x},y={value},z={field0}'"

Hope this can help.

Regards
Peter Kwan