|
 different symbol sizes according to values |
| Posted by Massimo on Apr-16-2015 22:18 |
|
Hi,
I have a requirement to display a line chart with 4 values with the latest values to be of a
different symbol size.
I am doing it in this way as per my snippet below which is in a foreach loop
if (DblValue != DblLastValue)
{
layer.addDataSet(new[] { DblValue }, Lchart.LineColor,
Title).setDataSymbol(Chart.CircleSymbol, LineChart.ResultSymbolSize);
}
else
{
layer.addDataSet(new[] { DblValue }, Lchart.LineColor,
Title).setDataSymbol(Chart.CircleSymbol, LineChart.ResultSymbolSizeLast);
}
not sure if the addDataSet method can accept one double value per time or if it need the
whole array of double in which case the above method would not work |
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-17-2015 01:36 |
|
Hi Massimo,
The addDataSet method can accept one value. However, the addDataSet adds the single
value to a new dataset, not to an existing data set. So the value will be plotted as the first
value of the data set (which is the left most position if you are plotting a chart with the x-
axis running from left to right). This is probably not what you want. To achieve what you
want, instead of using a loop, please use:
//Create a data series that contains just the last point
double[] lastPoint = new double[myData.Length];
for (int i = 0; i < lastPoint.Length; ++i) lastPoint[i] = Chart.NoValue;
lastPoint[lastPoint.Length - 1] = myData[myData.Length - 1];
//Draw original data series
layer.addDataSet(myData, Lchart.LineColor, Title).setDataSymbol(Chart.CircleSymbol,
LineChart.ResultSymbolSize);
//Draw last data point
layer.addDataSet(lastPoint, Lchart.LineColor).setDataSymbol(Chart.CircleSymbol,
LineChart.ResultSymbolSizeLast);
Hope this can help.
Regards
Peter Kwan |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-17-2015 06:28 |
|
Hi Peter,
I do not know where you find the time to answer all our questions. Many thanks, I will test
it first thing next Monday but I am sure it will work just fine.
Thanks again for your great forum
Massimo |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-24-2015 00:28 |
|
Hi Peter,
by trying to follow your solution i get an added point to the chart but not joined on the
line (see the attached screenshot)
below the code snippet I am using; please note that there always be a max of 4 values.
if (!string.IsNullOrEmpty(DtFiltered.Rows[DtFiltered.Rows.Count - 1]
["DataItemValue"].ToString()))
{
double LastValue
=Convert.ToDouble(DtFiltered.Rows[DtFiltered.Rows.Count - 1]
["DataItemValue"].ToString());
double[] lastPoint = new double[_aChartData.Length];
//Create a data series that contains no values
for (int i = 0; i < lastPoint.Length-1; ++i)
{
lastPoint[i] = Chart.NoValue;
}
//Replace last empty value with the latest value
lastPoint[lastPoint.Length - 1] = LastValue;
//remove the last value from teh original array
int LastIndex = Array.IndexOf(_aChartData, LastValue);
_aChartData = RemoveArrayValue(_aChartData, LastIndex);
//Draw original data series
layer.addDataSet(_aChartData, _iChartLineColor,
"").setDataSymbol(Chart.CircleSymbol, GraphSymbolSize);
//Draw last data point
layer.addDataSet(lastPoint,
_iChartLineColor,"").setDataSymbol(Chart.CircleSymbol, GraphSymbolSizelatestValue);
}
ImgChart = ChartObj.makeWebImage(Chart.PNG);
|
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-24-2015 01:31 |
|
Hi Massimo,
In my original sample code, a new data series is created which contains only the last data
value, but the original data series is not modified (that is, do not remove the last data value
from the original data series). If you remove the last data value from the original data
series, the line will not join properly. In other words, you may try to remove the line
"_aChartData = RemoveArrayValue(_aChartData, LastIndex);".
Hope this can help.
Regards
Peter Kwan |
| Re: different symbol sizes according to values |
| Posted by massimo brillante on Apr-24-2015 02:56 |
|
Hi peter,
yes you are right; but in this case I get 4 points joined by a line plus another point at the
bottom right corner of the chart with the symbol of the latest value; so I get 5 points |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-24-2015 19:30 |
|
Hi peter,
I now have the 4 points on the graph by "properly" replicating your code.
The problem that I am facing now is that I am trying to add a mark line on the graph
but is not showing.
The other problem is that for each of the 4 value on the graph I need to change teh
symbol color, the value font size and color.
below that code I am using at the moment; i hope you can help me as always as I am
stuck.
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target,-1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
if (!string.IsNullOrEmpty(DtFiltered.Rows[DtFiltered.Rows.Count - 1]
["DataItemValue"].ToString()))
{
// Add a line layer to the chart
LineLayer layer = c.addLineLayer();
double LastValue =
Convert.ToDouble(DtFiltered.Rows[DtFiltered.Rows.Count - 1]
["DataItemValue"].ToString());
double[] lastPoint = new double[ChartValues.Length];
//Create a data series that contains no values
for (int i = 0; i < lastPoint.Length - 1; ++i)
{
lastPoint[i] = Chart.NoValue;
}
//Replace last empty value with the latest value
lastPoint[lastPoint.Length - 1] = LastValue;
//Draw original data series
if (layer != null)
{
layer.addDataSet(ChartValues, 0x000000,
"").setDataSymbol(Chart.CircleSymbol, GraphSymbolSize);
//Draw last data point
layer.addDataSet(lastPoint, 0x000000,
"").setDataSymbol(Chart.CircleSymbol, GraphSymbolSizelatestValue);
layer.setDataLabelFormat("{value}");
}
}
|
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-25-2015 00:48 |
|
Hi Massimo,
May be you can consider to have a code structure that is similar to the "Multi-Symbol Line
Chart" sample code. In that sample code, each point can have a different symbol (which
means you can use symbols of different size and colors too).
http://www.advsofteng.com/doc/cdnet.htm#multisymbolline.htm
Basically, the sample code draws the line with a line layer that has no symbols. Then it
draws the symbols using scatter layers.
For labelling, for your case, I see there are two overlapping labels in your last point so that
label looked blurred. You also mentioned you want every label to have different style (font
size and colors). In this case, instead of using layer.setDataLabelFormat, I suggest to use
Layer.addCustomDataLabel. This allows you to add a label to a certain point using a
particular font name, font size and color. If you are using the sample code above, I suggest
to add the labels to the scatter layers instead of the line layer. It is because the symbols
for the scatter layer will be put above the scatter symbols. If the labels are added to the
line, they will be put above the data points. If there happens to have a large symbol there,
the label may overlap with the symbol.
Hope this can help.
Regards
Peter Kwan |
| Re: different symbol sizes according to values |
| Posted by massimo on Apr-25-2015 02:07 |
|
Hi Peter
thanks,
but I do not understand this part of the code
new ArrayMath(dataY).selectEQZ(pointType,Chart.NoValue).result()
or
new ArrayMath(dataY).selectEQZ(new ArrayMath(pointType).sub(1).result()
in my case should I repace those with one of the 4 values I get? |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 02:55 |
|
Hi Peter,
my first attempt to produce a multi symbol line chart produced the poor results as per
the attached screenshot 
I have modified my code as follow; if you could point me into the right direction to solve
my mess I would be very grateful!!
private WebImage BuildChart(DataSet DsFiltered, List<GraphItem> Lchart, string
Result, string PatGender)
{
Mark MarkTarget;
WebImage ImgChart = null;
if (DsFiltered != null && Lchart != null && Lchart.Count > 0
&& DsFiltered.Tables.Count > 0 && DsFiltered.Tables[0].Rows.Count > 0)
{
double[] YAxixValues = new double[Lchart.Count];
string[] XaxixLabels = new string[Lchart.Count];
DateTime[] XaxixDatesLbels = new DateTime[Lchart.Count];
int ShapeColor = 0;
int ShapeSize = GraphSymbolSize;
string CalculatedRisk = "";
//prepare array of data
for (int i = 0; i <= Lchart.Count - 1; i++)
{
GraphItem ItemGraph = Lchart[i];
YAxixValues[i] = ItemGraph.Data;
XaxixLabels[i] = ItemGraph.Xlabel;
if (!string.IsNullOrEmpty(ItemGraph.Xlabel))
{
XaxixDatesLbels[i] = Convert.ToDateTime(ItemGraph.Xlabel);
}
}
// Create a XYChart object
XYChart c = new XYChart(300, 85);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8,
0xaaccff), 0x88aaee);
// c.setRoundedFrame();
// c.setDropShadow();
// set the plotarea
c.setPlotArea(26, 8, 240, 60, 0xe8f0f8, -1, Chart.Transparent,
c.dashLineColor(Chart.Transparent, Chart.Transparent), -1);
// Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("", 0, Chart.Transparent);
// Set the labels on the x axis and style them
c.xAxis().setLabels(XaxixLabels);
c.xAxis().setLabelStyle("Verdana Bold", 5);
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target, -1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
foreach (GraphItem ItemGraph in Lchart)
{
CalculatedRisk = CalculateRisk(Result, ItemGraph.Data.ToString(),
PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
if (ItemGraph.IsLatestValue)
{
ShapeSize = GraphSymbolSizelatestValue;
}
c.addScatterLayer(Chart.CTime(XaxixDatesLbels), YAxixValues, "Point
Type 0", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer = c.addLineLayer(YAxixValues, 0x0000ff);
layer.setXData(Chart.CTime(XaxixDatesLbels));
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", 6, ShapeColor);
}
ImgChart = c.makeWebImage(Chart.PNG);
}
return ImgChart;
}
|
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 03:30 |
|
I modified the code as follow but no joy!!!
private WebImage BuildChart(DataSet DsFiltered, List<GraphItem> Lchart, string
Result, string PatGender)
{
Mark MarkTarget;
WebImage ImgChart = null;
LineLayer layer;
if (DsFiltered != null && Lchart != null && Lchart.Count > 0
&& DsFiltered.Tables.Count > 0 && DsFiltered.Tables[0].Rows.Count > 0)
{
double[] YAxixValues = new double[Lchart.Count];
string[] XaxixLabels = new string[Lchart.Count];
double[] pointType = { 0, 1, 2 };
DateTime[] XaxixDatesLbels = new DateTime[Lchart.Count];
int ShapeColor = 0;
int ShapeSize = GraphSymbolSize;
string CalculatedRisk = "";
//prepare array of data
for (int i = 0; i <= Lchart.Count - 1; i++)
{
GraphItem ItemGraph = Lchart[i];
YAxixValues[i] = ItemGraph.Data;
XaxixLabels[i] = ItemGraph.Xlabel;
if (!string.IsNullOrEmpty(ItemGraph.Xlabel))
{
XaxixDatesLbels[i] = Convert.ToDateTime(ItemGraph.Xlabel);
}
}
// Create a XYChart object
XYChart c = new XYChart(300, 85);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8,
0xaaccff), 0x88aaee);
// c.setRoundedFrame();
// c.setDropShadow();
// set the plotarea
c.setPlotArea(26, 8, 240, 60, 0xe8f0f8, -1, Chart.Transparent,
c.dashLineColor(Chart.Transparent, Chart.Transparent), -1);
// Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("", 0, Chart.Transparent);
// Set the labels on the x axis and style them
c.xAxis().setLabels(XaxixLabels);
c.xAxis().setLabelStyle("Verdana Bold", 5);
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target, -1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
foreach (GraphItem ItemGraph in Lchart)
{
CalculatedRisk = CalculateRisk(Result, ItemGraph.Data.ToString(),
PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
if (ItemGraph.IsLatestValue)
{
ShapeSize = GraphSymbolSizelatestValue;
}
switch (CalculatedRisk)
{
case (RiskLevel.Low):
c.addScatterLayer(Chart.CTime(XaxixDatesLbels),
new
ArrayMath(YAxixValues).selectEQZ(pointType,Chart.NoValue).result(),
"Risk Type Low", Chart.CircleSymbol, ShapeSize, ShapeColor);
layer = c.addLineLayer(YAxixValues, 0x0000ff);
layer.setXData(Chart.CTime(XaxixDatesLbels));
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", 6, ShapeColor);
break;
case (RiskLevel.Moderate):
c.addScatterLayer(Chart.CTime(XaxixDatesLbels),
new ArrayMath(YAxixValues).selectEQZ(new
ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(),
"Risk type Moderate", Chart.CircleSymbol, ShapeSize,
ShapeColor);
layer = c.addLineLayer(YAxixValues, 0x0000ff);
layer.setXData(Chart.CTime(XaxixDatesLbels));
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", 6, ShapeColor);
break;
case (RiskLevel.High):
c.addScatterLayer(Chart.CTime(XaxixDatesLbels),
new ArrayMath(YAxixValues).selectEQZ(new
ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(),
"Risk type High", Chart.CircleSymbol, ShapeSize, ShapeColor);
layer = c.addLineLayer(YAxixValues, 0x0000ff);
layer.setXData(Chart.CTime(XaxixDatesLbels));
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", 6, ShapeColor);
break;
}
}
ImgChart = c.makeWebImage(Chart.PNG);
}
return ImgChart;
}
|
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-25-2015 15:52 |
|
Hi Massimo,
If you original code does not uses "x-axis labels" (Axis.setLabels) instead of x-coordinates
(Layer.setXData), simply remove the lines that uses x-coordinates, or pass null as the
argument if the line cannot be removed. For your case, please remove all Layer.setXData
lines, like:
layer.setXData(Chart.CTime(XaxixDatesLbels));
and also change:
c.addScatterLayer(Chart.CTime(XaxixDatesLbels), ......);
to
c.addScatterLayer(null, .....);
Hope this can help.
Regards
Peter Kwan |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 15:55 |
|
Hi Peter,
I am actually at work as I need to complete this by Monday.
I am going to try your suggestions right now and get back to you. |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 16:03 |
|
much better!!!
The only issues are that
1)the third value does not have a point
2)there is no mark line
3) the latest value does not change in size but this more than likely is due to my code logic
below latest code
private WebImage BuildChart(DataSet DsFiltered, List<GraphItem> Lchart, string Result, string PatGender)
{
Mark MarkTarget;
WebImage ImgChart = null;
if (DsFiltered != null && Lchart != null && Lchart.Count > 0
&& DsFiltered.Tables.Count > 0 && DsFiltered.Tables[0].Rows.Count > 0)
{
double[] YAxixValues = new double[Lchart.Count];
string[] XaxixLabels = new string[Lchart.Count];
double[] pointType = { 0, 1, 2 };
DateTime[] XaxixDatesLbels = new DateTime[Lchart.Count];
int ShapeColor = 0;
int ShapeSize = GraphSymbolSize;
string CalculatedRisk = "";
//prepare array of data
for (int i = 0; i <= Lchart.Count - 1; i++)
{
GraphItem ItemGraph = Lchart[i];
YAxixValues[i] = ItemGraph.Data;
XaxixLabels[i] = ItemGraph.Xlabel;
if (!string.IsNullOrEmpty(ItemGraph.Xlabel))
{
XaxixDatesLbels[i] = Convert.ToDateTime(ItemGraph.Xlabel);
}
}
// Create a XYChart object
XYChart c = new XYChart(300, 85);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8, 0xaaccff), 0x88aaee);
// c.setRoundedFrame();
// c.setDropShadow();
// set the plotarea
c.setPlotArea(26, 8, 240, 60, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(Chart.Transparent, Chart.Transparent), -1);
// Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("", 0, Chart.Transparent);
// Set the labels on the x axis and style them
c.xAxis().setLabels(XaxixLabels);
c.xAxis().setLabelStyle("Verdana Bold", 5);
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target, -1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
foreach (GraphItem ItemGraph in Lchart)
{
CalculatedRisk = CalculateRisk(Result, ItemGraph.Data.ToString(), PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
if (ItemGraph.IsLatestValue)
{
ShapeSize = GraphSymbolSizelatestValue;
}
switch (CalculatedRisk)
{
case (RiskLevel.Low):
c.addScatterLayer(null,new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(0).result(),
Chart.NoValue).result(),
"Risk type Moderate", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer1 = c.addLineLayer(YAxixValues, 0x0000ff);
layer1.setLineWidth(2);
layer1.setDataLabelFormat("{value}");
layer1.setDataLabelStyle("Verdana", 6, ShapeColor);
break;
case (RiskLevel.Moderate):
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(),
"Risk type Moderate", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer2 = c.addLineLayer(YAxixValues, 0x0000ff);
layer2.setLineWidth(2);
layer2.setDataLabelFormat("{value}");
layer2.setDataLabelStyle("Verdana", 6, ShapeColor);
break;
case (RiskLevel.High):
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(),
"Risk type High", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer3 = c.addLineLayer(YAxixValues, 0x0000ff);
layer3.setLineWidth(2);
layer3.setDataLabelFormat("{value}");
layer3.setDataLabelStyle("Verdana", 6, ShapeColor);
break;
}
}
// c.packPlotArea(0,0,0,0);
ImgChart = c.makeWebImage(Chart.PNG);
}
return ImgChart;
}
|
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 16:26 |
|
I changed a bit my code and I now have the 4 values on the chart
still few problems
1) no mark line
2) the first value is on the Yaxis not inside it
3) the latest value font size does not change; again this may be a bug in my logic
if you could help me with point 1 and 2 please; I am pasting only the relevant code below
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target, -1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
foreach (GraphItem ItemGraph in Lchart)
{
CalculatedRisk = CalculateRisk(Result, ItemGraph.Data.ToString(), PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
if (ItemGraph.IsLatestValue)
{
ShapeSize = GraphSymbolSizelatestValue;
}
c.addScatterLayer(null, new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(0).result(),
Chart.NoValue).result(),"Risk type Low", Chart.CircleSymbol, ShapeSize, ShapeColor);
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(),"Risk type Moderate", Chart.CircleSymbol, ShapeSize, ShapeColor);
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(2).result(),
Chart.NoValue).result(),"Risk type High", Chart.CircleSymbol, ShapeSize, ShapeColor);
// c.packPlotArea(0,0,0,0);
}
LineLayer layer1 = c.addLineLayer(YAxixValues, 0x0000ff);
layer1.setLineWidth(2);
layer1.setDataLabelFormat("{value}");
layer1.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
ImgChart = c.makeWebImage(Chart.PNG);
|
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 16:46 |
|
Peter but do i need to add for every iteration this code
layer = c.addLineLayer(YAxixValues, 0x000000);
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
as I do not understand what i am doing I amgoing on a trial error basis!!! |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 16:48 |
|
this is my latest code and I am not changing it until you reply
foreach (GraphItem ItemGraph in Lchart)
{
CalculatedRisk = CalculateRisk(Result, ItemGraph.Data.ToString(), PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
ShapeSize = GraphSymbolSize;
if (ItemGraph.IsLatestValue)
{
ShapeSize = GraphSymbolSizelatestValue;
}
c.addScatterLayer(null, new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(0).result(),
Chart.NoValue).result(), "Risk type Low", Chart.CircleSymbol, ShapeSize, ShapeColor);
layer = c.addLineLayer(YAxixValues, 0x000000);
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(), "Risk type Moderate", Chart.CircleSymbol, ShapeSize, ShapeColor);
layer = c.addLineLayer(YAxixValues, 0x000000);
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(2).result(),
Chart.NoValue).result(), "Risk type High", Chart.CircleSymbol, ShapeSize, ShapeColor);
layer = c.addLineLayer(YAxixValues, 0x000000);
layer.setLineWidth(2);
layer.setDataLabelFormat("{value}");
layer.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
// c.packPlotArea(0,0,0,0);
}
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target, -1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
ImgChart = c.makeWebImage(Chart.PNG); |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-25-2015 18:28 |
|
I'll give up until you reply;please help
issues:
1) overlapping of values
2) no mark dashed line
3) latest value size does not change
the fact that the points are all the same colour is actually right due to the values.
my latest code:
private WebImage BuildChart(DataSet DsFiltered, List<GraphItem> Lchart, string Result, string PatGender)
{
Mark MarkTarget;
WebImage ImgChart = null;
if (DsFiltered != null && Lchart != null && Lchart.Count > 0
&& DsFiltered.Tables.Count > 0 && DsFiltered.Tables[0].Rows.Count > 0)
{
double[] YAxixValues = new double[Lchart.Count];
string[] XaxixLabels = new string[Lchart.Count];
DateTime[] XaxixDatesLbels = new DateTime[Lchart.Count];
double[] pointType = { 0, 1, 2 };
int ShapeSize;
int ShapeColor;
string CalculatedRisk;
//prepare array of data
for (int i = 0; i <= Lchart.Count - 1; i++)
{
GraphItem ItemGraph = Lchart[i];
YAxixValues[i] = ItemGraph.Data;
XaxixLabels[i] = ItemGraph.Xlabel;
if (!string.IsNullOrEmpty(ItemGraph.Xlabel))
{
XaxixDatesLbels[i] = Convert.ToDateTime(ItemGraph.Xlabel);
}
}
// Create a XYChart object
XYChart c = new XYChart(300, 85);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8, 0xaaccff), 0x88aaee);
// c.setRoundedFrame();
// c.setDropShadow();
// set the plotarea
c.setPlotArea(26, 8, 240, 60, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(Chart.Transparent, Chart.Transparent), -1);
// Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("", 0, Chart.Transparent);
// Set the labels on the x axis and style them
c.xAxis().setLabels(XaxixLabels);
c.xAxis().setLabelStyle("Verdana Bold", 5);
foreach (GraphItem ItemGraph in Lchart)
{
CalculatedRisk = CalculateRisk(Result, ItemGraph.Data.ToString(), PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
ShapeSize = AssignShapeSize(ItemGraph.IsLatestValue);
switch (CalculatedRisk)
{
case (RiskLevel.Low):
c.addScatterLayer(null, new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(0).result(),
Chart.NoValue).result(),
"Risk type Moderate", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer1 = c.addLineLayer(YAxixValues, 0x0000ff);
layer1.setLineWidth(2);
layer1.setDataLabelFormat("{value}");
layer1.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
break;
case (RiskLevel.Moderate):
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(1).result(),
Chart.NoValue).result(),
"Risk type Moderate", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer2 = c.addLineLayer(YAxixValues, 0x0000ff);
layer2.setLineWidth(2);
layer2.setDataLabelFormat("{value}");
layer2.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
break;
case (RiskLevel.High):
c.addScatterLayer(null,
new ArrayMath(YAxixValues).selectEQZ(new ArrayMath(pointType).sub(2).result(),
Chart.NoValue).result(),
"Risk type High", Chart.CircleSymbol, ShapeSize, ShapeColor);
LineLayer layer3 = c.addLineLayer(YAxixValues, 0x0000ff);
layer3.setLineWidth(2);
layer3.setDataLabelFormat("{value}");
layer3.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
break;
}
}
// layer.setDataLabelStyle("Verdana", ShapeSize, ShapeColor);
// c.packPlotArea(0,0,0,0);
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.xAxis().addMark(Target, 0x000000, "", "Verdana", 1);
MarkTarget.setLineWidth(2);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
ImgChart = c.makeWebImage(Chart.PNG);
}
return ImgChart;
}
|
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-26-2015 18:22 |
|
Hi Peter,
when you can can you please help; no matter what I do I do not get the solution. I am
stuck.
Thanks |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-26-2015 18:24 |
|
by the way... when will be available the dot net version of chart director 6 and how much
will cost to upgrade? |
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-28-2015 02:28 |
|
Hi Massimo,
Below please find the simplest cost that should be able to achieve what you need. I have
attached the chart produced by the code below for your reference.
double[] data = {42, 49, 33, 38};
string[] labels = {"Jan", "Feb", "Mar", "Apr"};
int[] symbolSize = {9, 17, 11, 22 };
int[] symbolColor = {0xff0000, 0x00ff00, 0x0000ff, 0x880088};
XYChart c = new XYChart(400, 250);
c.setPlotArea(50, 20, 330, 200);
c.xAxis().setLabels(labels);
for (int i = 0; i < data.Length; ++i) {
ScatterLayer layer = c.addScatterLayer(new double[] { i }, new double[] { data[i] }, "",
Chart.CircleSymbol, symbolSize[i], symbolColor[i]);
layer.setDataLabelStyle("Verdana", symbolSize[i], symbolColor[i]);
}
c.addLineLayer(data, 0x224488).setLineWidth(3);
Hope this can help.
Regards
Peter Kwan
|
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-28-2015 15:17 |
|
Thanks Peter,
of course that worked perfectly but is completely different from the code previoulsy used except that we are still using a scattered layer.
I am having issues with Marks now where they display sometimes and otehrs not.
for Hba1c the mark value is 53 but is not displayed
below my latest code; can you spot any issues?
//prepare symbol sizes and colours
for (int i = 0; i <= Lchart.Count - 1; i++)
{
CalculatedRisk = CalculateRisk(Result, Lchart[i].Data.ToString(), null, PatGender);
ShapeColor = AssignSymbolColor(CalculatedRisk);
ShapeSize = AssignShapeSize(Lchart[i].IsLatestValue);
SymbolSizes[i] = ShapeSize;
SymbolColours[i] = ShapeColor;
ScatterLayer layer = c.addScatterLayer(new double[] { i }, new[]{ YAxixValues[i] }, "", Chart.CircleSymbol, SymbolSizes[i], SymbolColours[i]);
layer.setDataLabelStyle("Verdana", SymbolSizes[i], SymbolColours[i]);
}
//add mark on x axis
double Target = GetResultTarget(Result);
MarkTarget = c.yAxis().addMark(Target, 0x000000);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
MarkTarget.setLineWidth(2);
c.addLineLayer(YAxixValues, 0x224488).setLineWidth(2);
|
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-28-2015 18:10 |
|
Hi Massimo,
The mark is not displayed if it is outside the axis range. If you would like the axis range to
include the mark value, please add a data point at the mark value. To do this, you can add
a transparent layer with just one data point.
c.addLineLayer(new double[] { Target }, Chart.Transparent);
MarkTarget = c.yAxis().addMark(Target, 0x000000);
MarkTarget.setMarkColor(c.dashLineColor(0x000000));
MarkTarget.setLineWidth(2);
Hope this can help.
Regards
Peter Kwan |
| Re: different symbol sizes according to values |
| Posted by Massimo on Apr-29-2015 00:49 |
|
Hi Peter,
Thanks again; no need to say that your suggested code worked
last thig... promise
The mark start on the left outside boundary of the plot area and due to the dates lenght I am unable to make the plot area wider otherwise the dates are overflowing outside the plot area and hiding part of the text.
As I am printing this as a PDF booklet I am forced to use a chart with these sizes:
XYChart c = new XYChart(300, 85);
and I am rendering the plot area with these sizes
// set the plotarea
c.setPlotArea(26, 8, 240, 60, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(Chart.Transparent, Chart.Transparent), -1);
do you think there is anything I can do to
1) get the mark line within the plot area
2) enlarge the plot area without having the dates text to be partially hidden?
As I said above the chart size cannot change.
Thanks again
Massimo
|
| Re: different symbol sizes according to values |
| Posted by Peter Kwan on Apr-30-2015 00:22 |
|
Hi Massimo,
1) get the mark line within the plot area
For your case, the mark is already within the plot area. Are you referring to the small line
segment that lies outside the left side of the plot area? It is probably the tick part of the
mark. The mark consists of 3 parts - the mark line, the tick and the label. For your case,
the label is empty, but the other two parts should still be visible. You can use
Mark.setMarkColor to configure the colors of these 3 parts. To disable the tick, you may
configure tick color to transparent.
MarkTarget.setMarkColor(c.dashLineColor(0x000000), Chart.Transparent,
Chart.Transparent);
2) enlarge the plot area without having the dates text to be partially hidden?
You can shift the first label rightwards, and last label leftwards, to make them stay inside
the plot area width. The simplest method to do this is to include empty space in the
label.
For example, instead of using "10/24/2014", you can use " 10/24/2014".
This works if your label length is always the same, so you can determine the number of
space characters by experiment. Another method is to duplicate the label text, but
making half of the text transparent. It is like:
"<*block,color=FF000000*>10/24/2014<*/*>10/24/2014"
The transparent part is just acting as the space characters, but it has the advantage
that it is always of the same length as the visible text. The code actual is probably
something like:
myLabelArray[0] = "<*block,color=FF000000*>" + myLabelArray[0] + "<*/*>" +
myLabelArray[0];
The above is for the first label. You may do something adjustments to the last label.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Massimo)