PDA

View Full Version : [CLOSED] CartesianChart Bars Colors



aliabdulla
Aug 17, 2020, 8:34 PM
Hello,

I want to change the colors of chart Bars, I have 3 columns:

- Red.
- Green.
- Yellow.

I tried this:



<ext:Panel
runat="server"
Header="false"
ColumnWidth="0.30">
<Items>
<ext:CartesianChart
ID="EvalutionTypeChart"
ClientIDMode="Static"
Colors="#00ff00,#ff5d38,#fff881"
PaddingSpec="20 0 0 0"
MarginSpec="20 0 0 0"
Height="260"
Width="350"
runat="server">
<Store>
<ext:Store
ID="EvalutionTypeChartStore"
ClientIDMode="Static"
runat="server"
AutoDataBind="true">
<Model>
<ext:Model runat="server" ClientIDMode="Static" ID="EvalutionTypeChartStoreModel">
<Fields>
<ext:ModelField Name="EvalutionTypeTitle" />
<ext:ModelField Name="DoCount" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Position="Left"
Fields="DoCount"
Grid="true"
Title="المجموع"
Minimum="0">
<Renderer Handler="return Ext.util.Format.number(label, '0,0');" />
</ext:NumericAxis>

<ext:CategoryAxis Position="Bottom" Fields="EvalutionTypeTitle" Title="أنواع التقييم">
<Label RotationDegrees="0" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:BarSeries
Highlight="true"
XField="EvalutionTypeTitle"
Colors="#00ff00, #ff5d38, #fff881"
YField="DoCount">
<Tooltip runat="server" TrackMouse="true">
<Renderer Handler="toolTip.setTitle(record.get('EvalutionTypeTitle') + ': ' + record.get('DoCount'));" />
</Tooltip>
<Label
Display="InsideEnd"
Color="#00ff00"
Field="DoCount"
Orientation="Horizontal"
TextAlign="Center"
RotationDegrees="45">
<Renderer Handler="return Ext.util.Format.number(text, '0');" />
</Label>
</ext:BarSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>


I used
Colors="#00ff00,#ff5d38,#fff881" every where, with no luck to have correct color.

Kindly, advice.25411

fabricio.murta
Aug 17, 2020, 10:44 PM
Hello @aliabdulla!

I see what you want. But I don't think I'd be able to run that example, so I'm just testing this in our simple column chart example (https://examples5.ext.net/#/Chart/Column/Basic/).

The Colors property sets color for each of the bar series that is, different data it shows. For sequential data of the same series, you'd need to fill the color through the series' renderer.

Considering you would only have one series on your charts, ever, you can keep the "colors" property just by convenience and have those colors be cycled over data entries in the chart (notice if you have more than 3 data entries in the series it will repeat the colors over).

In other words, add this code to your chart's ext:BarSeries block:



<Renderer Handler="var colors = this.getColors(); return {fill : colors[index % colors.length]};" />


The above code will pull the Colors= property off your ext:BarSeries[b] tag. If you want to get the one you set in the [b]ext:CartesianChart, then you want this.getChart().colors instead:



<Renderer Handler="var colors = this.getChart().colors; return {fill : colors[index % colors.length]};" />


This is the easier solution for your case.

But the "correct" one (to use Colors the way they are intended to) is to specify your data as three series, say DoCount1, DoCount2, DoCount3, and then just specify them in your series' YField argument as YField="DoCount1, DoCount2, DoCount3". So it would require a little furhter logic work on your code to get the data right.

You would also need to adjust the label to be applied to the three "series", and also adjust the tooltip to show the correct information probably having a static map of the field names to their "friendly" names! All on all, your series code block would look more or less like this:



<ext:BarSeries
Highlight="true"
XField="EvalutionTypeTitle"
YField="DoCount1, DoCount2, DoCount3">
<Tooltip runat="server" TrackMouse="true">
<%-- You may want to map the field name to its friendly string somewhere like a js variable --%>
<Renderer Handler="var fieldName = context.sprite.getField(); toolTip.setTitle(fieldName + ': ' + record.get(fieldName));" />
</Tooltip>
<Label
Display="InsideEnd"
Color="#00ff00"
Field="DoCount1, DoCount2, DoCount3"
Orientation="Horizontal"
TextAlign="Center"
RotationDegrees="45">
<Renderer Handler="return Ext.util.Format.number(text, '0');" />
</Label>
</ext:BarSeries>


And of course you should keep the Colors= defined in your sample block's line 9, as it will be used to determine the colors of the bars.

Hope this helps!

fabricio.murta
Aug 17, 2020, 10:51 PM
Oh! And here's the example I linked above with the changes applied. Notice there will be several times the same color pattern because every data series has 12 values corresponding to the months of a year in that hypothetical data.

25412

If this is still unclear what should be done, we'd need you to provide a proper, runnable test case, so we can tell you exactly what to change and where. We simply cannot reproduce the chart you shared a screenshot simply because you didn't provide a sample with mock data, etc.

As a new user in Ext.NET forums, you should really consider taking some time to review our forum threads posting guidelines, as they really help us provide you the best support! Here they are:

- Tips for creating simplified code samples (http://forums.ext.net/showthread.php?61176-Tips-for-creating-simplified-code-samples)
- More Information Required (http://forums.ext.net/showthread.php?10205-More-Information-Required)
- Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

As another piece of advice, using an example off the Examples Explorer might be the best choice for a quick test case (and if the mock data used is the same off the example, you can just tell the data is the same and we'll use it).

Hope this helps!

aliabdulla
Aug 19, 2020, 7:55 AM
Dear @fabricio.murta,

Thanks for your valuable efforts.

The solution worked for me.

I will consider guideline in the coming tickets.

Best regards,

fabricio.murta
Sep 08, 2020, 10:30 PM
Thanks for the feedback, and glad it worked!