Hi
Im trying to create a graph as below (excel example)
When trying to recreate this with ultrachart i am able to get everything to display correctly, however i would need to change the line color.
I have already searched the forums and found that it should be possible to recreate this with the composite charts, however after recreating the graph with the compositechart i again have the same linecolor as my columns (after changing ColorModel.ModelStyle = CustomLinear and adding a custompallet to the colormodel)
Any pointers to where the color should be changed on the compositechart so the line has a different color would be welcome.
Regards
Bert
Hello Bert,
Thank you for posting in the community.
What I can suggest is applying a PaintElement to the series that represent the data for your Line Chart. This could be achieved from the Chart Designer following these steps:
1) Click Chart`s smart tag
2) Select Quick Design
3) Select Series. After expanding Series a list with all series will appear. Select the series that correspond to the Line Chart
4) On the right side you will see PEs property. This is a collection of PaintElemnts to be used as a Palette for the series. Click the ellipsis (..) button. Paint Collection Editor will appear.
5) Click Add button. This will add a new PE element. On the right side you will see a list with options available for the new paint element. In order to change the color for the line Fill property should be set to you desired color.
In your aspx the change will look as following:
<igchartprop:NumericSeries Key="series4" Label="Ssss"> <points> <igchartprop:NumericDataPoint Label="aaa" Value="1"> <pe elementtype="None" /> </igchartprop:NumericDataPoint> <igchartprop:NumericDataPoint Label="bbb" Value="10"> <pe elementtype="None" /> </igchartprop:NumericDataPoint> <igchartprop:NumericDataPoint Label="ccc" Value="20"> <pe elementtype="None" /> </igchartprop:NumericDataPoint> <igchartprop:NumericDataPoint Label="ddd" Value="2"> <pe elementtype="None" /> </igchartprop:NumericDataPoint> <igchartprop:NumericDataPoint Label="ee" Value="8"> <pe elementtype="None" /> </igchartprop:NumericDataPoint> <igchartprop:NumericDataPoint Label="hh" Value="15"> <pe elementtype="None" /> </igchartprop:NumericDataPoint> </points> <pes> <igchartprop:PaintElement Fill="Red"/> </pes> </igchartprop:NumericSeries>
<igchartprop:NumericSeries Key="series4" Label="Ssss">
<points>
<igchartprop:NumericDataPoint Label="aaa" Value="1">
<pe elementtype="None" />
</igchartprop:NumericDataPoint>
<igchartprop:NumericDataPoint Label="bbb" Value="10">
<igchartprop:NumericDataPoint Label="ccc" Value="20">
<igchartprop:NumericDataPoint Label="ddd" Value="2">
<igchartprop:NumericDataPoint Label="ee" Value="8">
<igchartprop:NumericDataPoint Label="hh" Value="15">
</points>
<pes>
<igchartprop:PaintElement Fill="Red"/>
</pes>
</igchartprop:NumericSeries>
Some further reference about WebChart could be found at:
http://help.infragistics.com/doc/ASPNET/2014.1/CLR4.0/?page=Web_WebChart.html
Additionally, I made a small sample project illustrating my suggestion and I am attaching it for your reference.
I hope you find this helpful.
Please let me know if you have any additional questions regarding this matter.
While this is a working solution is it not possible to just change the color in a ultrachart with charttype columnline instead of manually creating the chart via composite type?
Trying to recreate the same chart with the composite charttype seems cumbersome since i already use the columnlinechart and just link the data via the datasource. So changing everything just to change a color to 1 line would be my last resort.
Thank you for getting back to me.
What I can suggest for achieving your requirement is handling FillSceneGraph server side event. In this event a the Fill property of the polyline`s PE could be changed to any color of your choice. For example:
protected void UltraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e) { foreach (Primitive pr in e.SceneGraph) { Polyline pl = pr as Polyline; if (pl != null) { pl.PE.Fill = Color.Red; } } }
protected void UltraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
{
foreach (Primitive pr in e.SceneGraph)
Polyline pl = pr as Polyline;
if (pl != null)
pl.PE.Fill = Color.Red;
}
I am also attaching a sample project illustrating my suggestion.
Please feel free to contact me if you have any additional questions regarding this matter.
Hi Vasya
This solved my problem, i just needed to add an extra check to see if the primitive was a polyline so i wouldnt get any exceptions.
Private Sub ucColumnLineChart_FillSceneGraph(sender As Object, e As Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs) Handles ucColumnLineChart.FillSceneGraph For Each pr As Primitive In e.SceneGraph If pr.GetType.Equals(GetType(Polyline)) Then Dim pl As Polyline = CType(pr, Polyline) If Not pl Is Nothing Then pl.PE.Fill = Drawing.Color.Red End If End If Next End Sub
Thanks!
I am glad that you have been able to achieve your requirement according to my suggestion.
Please let me know if you need any further assistance with this matter.