PDA

View Full Version : [CLOSED] Particular needs on chart



feanor91
Jan 03, 2013, 4:08 PM
5351

In this chart, you see I draw a line (in grey) that means this is a limit to not pass over. But if it's pass over I will need to have a render like this:

5352

Do you see a way to render this?

Daniil
Jan 03, 2013, 5:35 PM
Hi @feanor91,

I doubt, but, maybe, it is possible to achieve setting Background Gradient...

Example

<ext:Chart>
<Background>
<Gradient ...></Gradient>
</Background>
</ext:Chart>

feanor91
Jan 03, 2013, 5:45 PM
Hum, not sure, with a gradient, but, if I set a red background, ans set a filler for the line, that in fact is a curve, do you think I will achieve the goal?

Daniil
Jan 04, 2013, 8:20 AM
I am not even sure how you painted the line:)

But, if you painted it already, then you, probably, should be able to achieve the goal you are talking about. I.e. setting up the background and paint a rectangular instead of the line. Yes, I think it might work.

feanor91
Jan 04, 2013, 8:35 AM
My solution works, exept that background filled all backgroud charts:

5359

So solution will be to set a "Max" curve line to add to AreaSeries collection. But question : how can I get max value for chart?

Daniil
Jan 04, 2013, 8:48 AM
Well, if you already painted that green rectangular, why can't you paint a red one above that green one?

I meant that the green rectangular ends at the edge of the X axis. Can't you apply the same thing to end the green rectangular at the edge of the Y axis?

feanor91
Jan 04, 2013, 8:55 AM
yes, it is what I'm working on just now.

I use this example to start :

http://examples2.ext.net/#/Chart/Area/Basic/

In fact, I will compute a max value for my data and applied it to a new curve that will be part of the area series, and It mus do the job.

feanor91
Jan 04, 2013, 9:20 AM
So it works, but not as I really want.

Here the result of my Max line on chart:

5361

The definition of line is like that:



<ext:LineSeries Axis="Left" XField="STR_Day" YField="DEC_Max" ShowInLegend="false">
</ext:LineSeries>
<ext:AreaSeries Axis="Left" XField="STR_Day" YField="DEC_Goal" ShowInLegend="false">
<Style Fill="#ABC8E2" Stroke="#ABC8E2" StrokeWidth="2" Opacity="0.50"/>
</ext:AreaSeries>


and if I change the way I draw max line:

5360

The definition of line is now like that:



<ext:AreaSeries Axis="Left" XField="STR_Day" YField="DEC_Goal,DEC_Max" ShowInLegend="false">
<Style Fill="#ABC8E2" Stroke="#ABC8E2" StrokeWidth="2" Opacity="0.50"/>
</ext:AreaSeries>


Obviously it seem there is a problem in chart Y axis max computation, but why? I didn't understand.

So could I fix it by myself by using
AdjustMaximumByMajorUnit tag, but I want to use my DEX_max data from store, so could I apply this value to this tag and how?

EDIT it works if I force Maximum value for chart, but question still pendending how to get those Value from store? This kind of thing did not work:


Maximum="#{stoChartETTR}.datas.DEC_Max"

it says it couldn't creat a nullable value from a string at runtime.

Daniil
Jan 04, 2013, 9:22 AM
Could you post an example which we can use to test?

feanor91
Jan 04, 2013, 9:54 AM
<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public string[] COLORS = new string[]{"rgb(47, 162, 223)", "rgb(60, 133, 46)", "rgb(234, 102, 17)", "rgb(154, 176, 213)", "rgb(186, 10, 25)", "rgb(40, 40, 40)", "rgb(60, 60, 60)"};

protected void Page_Load(object sender, EventArgs e)
{
List<object> data = new List<object>
{
new { Date = new DateTime(2009, 1, 1), IE = 44.8, Firefox = 45.5, Chrome = 3.9, Safari = 3, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2009, 2, 1), IE = 43.6, Firefox = 46.4, Chrome = 4, Safari = 3, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2009, 3, 1), IE = 43.3, Firefox = 46.5, Chrome = 4.2, Safari = 3.1, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2009, 4, 1), IE = 42.1, Firefox = 47.1, Chrome = 4.9, Safari = 3, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2009, 5, 1), IE = 41, Firefox = 47.7, Chrome = 5.5, Safari = 3, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2009, 6, 1), IE = 40.7, Firefox = 47.3, Chrome = 6, Safari = 3.1, Opera = 2.1, Other = 25, Max=50 },
new { Date = new DateTime(2009, 7, 1), IE = 39.4, Firefox = 47.9, Chrome = 6.5, Safari = 3.3, Opera = 2.1, Other = 25, Max=50 },
new { Date = new DateTime(2009, 8, 1), IE = 39.3, Firefox = 47.4, Chrome = 7, Safari = 3.3, Opera = 2.1, Other = 25, Max=50 },
new { Date = new DateTime(2009, 9, 1), IE = 39.6, Firefox = 46.6, Chrome = 7.1, Safari = 3.6, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2009, 10, 1), IE = 37.5, Firefox = 47.5, Chrome = 8, Safari = 3.8, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2009, 11, 1), IE = 37.7, Firefox = 47, Chrome = 8.5, Safari = 3.8, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2009, 12, 1), IE = 37.2, Firefox = 46.4, Chrome = 9.8, Safari = 3.6, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2010, 1, 1), IE = 36.2, Firefox = 46.3, Chrome = 10.8, Safari = 3.7, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2010, 2, 1), IE = 35.3, Firefox = 46.5, Chrome = 11.6, Safari = 3.8, Opera = 2.1, Other = 25, Max=50 },
new { Date = new DateTime(2010, 3, 1), IE = 34.9, Firefox = 46.2, Chrome = 12.3, Safari = 3.7, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2010, 4, 1), IE = 33.4, Firefox = 46.4, Chrome = 13.6, Safari = 3.7, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2010, 5, 1), IE = 32.2, Firefox = 46.9, Chrome = 14.5, Safari = 3.5, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2010, 6, 1), IE = 31, Firefox = 46.6, Chrome = 15.9, Safari = 3.6, Opera = 2.1, Other = 25, Max=50 },
new { Date = new DateTime(2010, 7, 1), IE = 30.4, Firefox = 46.4, Chrome = 16.7, Safari = 3.4, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2010, 8, 1), IE = 30.7, Firefox = 45.8, Chrome = 17, Safari = 3.5, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2010, 9, 1), IE = 31.1, Firefox = 45.1, Chrome = 17.3, Safari = 3.7, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2010, 10, 1), IE = 29.7, Firefox = 44.1, Chrome = 19.2, Safari = 3.9, Opera = 2.2, Other = 25, Max=50 },
new { Date = new DateTime(2010, 11, 1), IE = 28.6, Firefox = 44, Chrome = 20.5, Safari = 4.0, Opera = 2.3, Other = 25, Max=50 },
new { Date = new DateTime(2010, 12, 1), IE = 27.5, Firefox = 43.5, Chrome = 22.4, Safari = 3.8, Opera = 2.2, Other = 25, Max=50 }
};

Store store = this.Chart1.GetStore();

store.DataSource = data;
store.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Area BrowserStats - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Area - BrowserStats</h1>

<p>Display browser usage trends in an area series.</p>

<p>This chart uses custom gradients for the colors and the legend is interactive.</p>

<p>Click or hover on the legend items to highlight and remove them from the chart</p>

<ext:ChartTheme ID="ChartTheme1"
runat="server"
ThemeName="Browser"
Colors="<%# COLORS %>"
AutoDataBind="true"
/>

<ext:Panel ID="Panel1"
runat="server"
Title="What is the trend in Browser Usage?"
Width="800"
Height="600"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
StyleSpec="background:#fff;"
Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="IE" />
<ext:ModelField Name="Chrome" />
<ext:ModelField Name="Firefox" />
<ext:ModelField Name="Safari" />
<ext:ModelField Name="Opera" />
<ext:ModelField Name="Other" />
<ext:ModelField Name="Max" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Fields="IE,Chrome,Firefox,Safari,Opera,Other, Max"
Title="Usage %"
Grid="true"
Decimals="0"
/>
<ext:CategoryAxis
Position="Bottom"
Fields="Date"
Title="Month of the Year"
Grid="true">
<Label>
<Renderer Handler="return Ext.Date.format(value, 'M d');" />
</Label>
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Date" YField="IE" Title="IE">
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Date" YField="Chrome" Title="Chrome">
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Date" YField="Firefox" Title="Firefox">
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Date" YField="Safari" Title="Safari">
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Date" YField="Opera" Title="Opera">
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Date" YField="Max" Title="Max">
</ext:LineSeries>
<ext:AreaSeries
Axis="Left"
Highlight="true"
YField="Other, Max">
<Style Opacity="0.86" StrokeWidth="1" Stroke="#666" />
</ext:AreaSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

I start from your own example "Area browser".

I add the Max value to the store fixe to 50. Remove value from area and put it to line in place, exept for Other.

Here result with only a line for max value:

5365

And only in AreaSeries:

5363

and finaly Max in line and area series:

5366

Daniil
Jan 04, 2013, 10:38 AM
Thank you. Please clarify what exactly do you expect to see on the final screenshot?

feanor91
Jan 04, 2013, 10:45 AM
All the part I framed in picture below must be removed because it is far avay the max value. As I said before, it is something wrong in vertical axis maximum computation when applied to an AreaSeries (I think...)

5367

feanor91
Jan 04, 2013, 11:09 AM
Hello

I found what the promble is.

In fact on AreaSeries, all the value you put in area are summed to achieve the chart, it is most visible in my first chart, I have a goal (first line) to value 5 and I fix the Max value to 6 and we can see that the top of area is on value 11 (5+6) so I change my way to compute max value to only have a summed area that achieve the way I want, in fact MaxVlue become MaxValue(from database)-goal value and here the result:

5369

Daniil
Jan 04, 2013, 12:33 PM
Also you could use two separate LineSeries.

<ext:AreaSeries
YField="Max"
XField="Date">
<Renderer Handler="attributes.fill = 'red'; return attributes;" /> <%-- A workaround to fill the area with the specified color --%>
<%--<Style Fill="red" />--%> <%--It doesn't work, but it should. I am going to report to Sencha.--%>
</ext:AreaSeries>
<ext:AreaSeries
YField="Other"
XField="Date" />

feanor91
Jan 04, 2013, 12:46 PM
OK, it is another way to play with, main thing is we finally found a way to make it works

Daniil
Jan 04, 2013, 12:52 PM
Yes, that is good.

I reported the issue with Style Fill.
[4.2.0 beta] Chart Area series style fill option is ignored (http://www.sencha.com/forum/showthread.php?252969-4.2.0-beta-Chart-Area-series-style-fill-option-is-ignored&p=926104#post926104)

feanor91
Jan 04, 2013, 1:14 PM
Yes, and it is also a problem with bar fill, I reported it with gradient color (here http://forums.ext.net/showthread.php?21139-OPEN-37-Column-gradient-problem&p=95993#post95993) but it is the same thing if you use a single color to fill, legend appera in the color you choose, but bar is still colored with default color, we have to use the same workaround to do the trick.

Daniil
Jan 04, 2013, 1:52 PM
Thank you. I tried to find this bug report with no success.

So, I am closing the current thread.