[CLOSED] Particular needs on chart

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Particular needs on chart

    Click image for larger version. 

Name:	img5.png 
Views:	33 
Size:	15.0 KB 
ID:	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:

    Click image for larger version. 

Name:	img6.png 
Views:	33 
Size:	14.0 KB 
ID:	5352

    Do you see a way to render this?
    Last edited by Daniil; Jan 04, 2013 at 12:56 PM. Reason: [CLOSED]
  2. #2
    Hi @feanor91,

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

    Example
    <ext:Chart>
        <Background>
            <Gradient ...></Gradient>
        </Background>
    </ext:Chart>
  3. #3
    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?
  4. #4
    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.
  5. #5
    My solution works, exept that background filled all backgroud charts:

    Click image for larger version. 

Name:	imgChart.png 
Views:	29 
Size:	28.9 KB 
ID:	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?
  6. #6
    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?
  7. #7
    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.
  8. #8
    So it works, but not as I really want.

    Here the result of my Max line on chart:

    Click image for larger version. 

Name:	imgChart2.png 
Views:	20 
Size:	44.3 KB 
ID:	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:

    Click image for larger version. 

Name:	imgChart3.png 
Views:	26 
Size:	29.7 KB 
ID:	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.
    Last edited by feanor91; Jan 04, 2013 at 8:34 AM.
  9. #9
    Could you post an example which we can use to test?
  10. #10
    <%@ 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:

    Click image for larger version. 

Name:	imgChart6.png 
Views:	32 
Size:	55.2 KB 
ID:	5365

    And only in AreaSeries:

    Click image for larger version. 

Name:	imgChart5.png 
Views:	35 
Size:	47.3 KB 
ID:	5363

    and finaly Max in line and area series:

    Click image for larger version. 

Name:	imgChart7.png 
Views:	38 
Size:	51.3 KB 
ID:	5366
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Chart Tip
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 05, 2012, 12:49 AM
  2. Pie chart example
    By Gamerome in forum 2.x Help
    Replies: 2
    Last Post: Sep 09, 2012, 7:17 PM
  3. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  4. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  5. Chart
    By zanotto in forum 2.x Help
    Replies: 7
    Last Post: Mar 09, 2012, 11:47 AM

Posting Permissions