|
 Area chart:Gradient color for multiple series. |
| Posted by Ankit Jain on Nov-07-2017 19:26 |
|
Hi,
Can someone helps me how to implement gradient color for multiple data series.
In case of single data series we can give coordinates of plot but in case of multiple i need to have coordinates of each series.
Any help is highly appreciated.
Thanks
Ankit |
| Re: Area chart:Gradient color for multiple series. |
| Posted by Peter Kwan on Nov-08-2017 11:09 |
|
Hi Ankit,
I am not too sure the type of gradient you are referring to. To define a linear gradient, you need two points, and specify how the color varies between the two points. For example, the two points can be at the left side and right side of the chart, and you can specify the two colors at the two points. In this case, the linear gradient will be a color that varies smoothly from the left side to the right side.
Is it possible to provide an image to help me understand what you need?
Regards
Peter Kwan |
| Re: Area chart:Gradient color for multiple series. |
| Posted by Ankit Jain on Nov-08-2017 12:06 |
|
Thanks for your Reply.
Please refer to below code
AreaLayer TAreaLayer = c.addAreaLayer(pLayer.getDataPointData(), c.linearGradientColor(startx,starty, endx,endy , 0x60ff0000, 0x60ffffff));
This will change color of one area of series,here i have specified the position but these are fixed and related to complete area of chart.
Please refer to attached image i Have 2series and i want different gradient colors the above code will shade the color from red to white(from bottom).
i want to specify different color for 2nd series let say from green to white.
Blue is border for both the series.
Thanks
Ankit
|
| Re: Area chart:Gradient color for multiple series. |
| Posted by Peter Kwan on Nov-08-2017 22:53 |
|
Hi Ankit,
In your code, I can only see one series "pLayer.getDataPointData()". I am still not sure how the second series enters into the chart. Is the second series another area layer? Or are you trying to draw a "stacked area" chart?
If there are two series in two area layers, you can always use two gradients for the two layers.
//From red to white
AreaLayer TAreaLayer = c.addAreaLayer(pLayer.getDataPointData(), c.linearGradientColor(startx,starty, endx,endy , 0x60ff0000, 0x60ffffff));
//From green to white
AreaLayer TAreaLayer2 = c.addAreaLayer(anotherLayer.getDataPointData(), c.linearGradientColor(startx,starty, endx,endy , 0x6000ff00, 0x60ffffff));
If it is a stacked area layer with two data sets, you can also apply two different gradients to the two data sets:
// Add an stack area layer with three data sets
AreaLayer layer = c.addAreaLayer2(Chart.Stack);
layer.addDataSet(data0, c.linearGradientColor(startx,starty, endx,endy , 0x60ff0000, 0x60ffffff));
layer.addDataSet(data1, c.linearGradientColor(startx,starty, endx,endy , 0x6000ff00, 0x60ffffff));
If the above is not what you want, would you mind to clarify how the second layer enters into the chart? Is it a separate area overlapping with the first area layer, or it is stacked on top of the first area layer, or some other arrangement?
Regards
Peter Kwan |
| Re: Area chart:Gradient color for multiple series. |
| Posted by Ankit Jain on Nov-08-2017 23:43 |
|
Hi Peter,
Thanks for your reply.
i am executing below line in loop as per the count of series
AreaLayer TAreaLayer = c.addAreaLayer(pLayer.getDataPointData(), c.linearGradientColor(startx,starty, endx,endy , 0x60ff0000, 0x60ffffff));
pLayer.getDataPointData() is collection of data points for respective series.
my main problem is coordinates we are passing to function linearGradientColor.
startx,starty, endx,endy Is there is any way these can be calculated for current data series?.
If these are fixed then gradient color will be the same for both series.This is my main concern.I need mechanism to find coordinates for each area i am plotting.
Let me know if you need more information.
Thanks for your inputs.
Thanks
Ankit |
| Re: Area chart:Gradient color for multiple series. |
| Posted by Peter Kwan on Nov-09-2017 00:27 |
|
Hi Ankit,
Suppose "pLayer.getDataPointData()" returns an array of 50 points, so it is a data series consisting of 50 values. The coordinates of the area is a polygon containing 52 points, which are the pixel coordinates of the 50 values, plus two points at the baseline (normally the y = 0 line). Note that the area is one single object formed by 52 points, not 50 different objects. The area for each series can only have one color, which can be a gradient color. The area for different series can have different colors.
If you want to find the pixel coordinates of the area polygon, you can layout the chart (use BaseChart.layout), then use XYChart.getYCoor and XYChart.getXCoor to find out the pixel coordinates of all the data points and the base line. You can the set the color of the data set. It is like:
AreaLayer layer1 = c.addAreaLayer(myDataSeries);
.... add all the layers ....
// layout the chart - ChartDirector will auto-scale the axis based on the data in all layers
c.layout();
// get the coordinates of all the points
for (int i = 0; i < myDataSeries.Length; ++i)
{
// the y-coordinate of one point. you can get the x-coordinates too using getXCoor
int yCoor = c.getYCoor(myDataSeries[i]);
... perform any processing you need for that coordinate ...
}
// you can set the y-coordinate of the base line at y=0 using getYCoor(0).
....
// You can then set the color of the area. In this example, the layer1 only have 1
// series, which is getDataSet(0)
layer1.getDataSet(0).setDataColor(c.linearGradientColor(......));
Hope this can help.
Regards
Peter Kwan |
| Re: Area chart:Gradient color for multiple series. |
| Posted by Ankit Jain on Nov-13-2017 14:11 |
|
Hi Peter,
I was trying to implement as per your suggestion.But i am not getting the desired color i think i am not able to play with the coordinates well.
Here is snapshot of code i am using for gradient color
int color1 = 0x60ff0000;
int color2 = 0x60ffffff;
for (int i = 0; i < m_LayerInfoList.length; i++)
{
LayerInfo pLayer = m_LayerInfoList[i];
int yCoor = 0;
int xCoor = 0;
for (int j = 0; j < pLayer.getDataPointData().length; ++j)
{
// the y-coordinate of one point. you can get the x-coordinates too using getXCoor
yCoor = c.getYCoor(pLayer.getDataPointData()[j]);
xCoor = c.getXCoor(pLayer.getDataPointData()[j]);
m_pAreaLayerList.get(i).getDataSet(0).setDataColor(Chart.Transparent);
m_pAreaLayerList.get(i).getDataSet(0).setDataColor(c.linearGradientColor(0,yCoor, 0, 0, color1, color2));
}
color1 = 0x6000ff00;
}
here for first layer i am using red color and for second i am using green color but i think green is getting mixed with red.
Please refer to image i am getting after using above code.
Kindly provide your feedback so that i can get correct color for each layer.
Thanks
Ankit
|
| Re: Area chart:Gradient color for multiple series. |
| Posted by Peter Kwan on Nov-13-2017 20:01 |
|
Hi Ankit,
In your case, the area layers overlap. (They are not "stacked" but simply overlap.) Also, you are using semi-transparent gradient colors. The red layer is on top of the green layer. However, since the red layer is semi-transparent, you can see through the green color under it. This is why the red and green get mixed together.
To solve the problem, please do not use semi-transparent colors.
For your case, I think it is not necessary to compute the coordinates. If I were you, I will just
m_pAreaLayerList.get(0).getDataSet(0).setDataColor(c.linearGradientColor(0, c.getPlotArea().getBottomY(), 0, 0, 0xff5555, 0xffffff));
m_pAreaLayerList.get(1).getDataSet(0).setDataColor(c.linearGradientColor(0, c.getPlotArea().getBottomY(), 0, 0, 0x55ff55, 0xffffff));
Note that since your area layers overlap, you must make sure the data values for first layer (the red layer) is less than that of the second layer (the green layer), otherwise the red layer will hide the green layer.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Ankit Jain)