[CLOSED] Chart Line

  1. #1

    [CLOSED] Chart Line

    Hi,

    I'm with a problem in my chart, I'm not getting put the records the way like, not sure if it is possible, follows the records.

    Records:
    Date Description Percentage
    30/06/2012 With maturity 30 days 16.42
    30/06/2012 With maturity 60 days 28.28
    30/06/2012 With maturity 90 days 21.8
    30/06/2012 With maturity 180 days 33.5
    31/07/2012 With maturity 30 days 27.11
    31/07/2012 With maturity 60 days 20.95
    31/07/2012 With maturity 90 days 18.62
    31/07/2012 With maturity 180 days 33.32

    Chart Code:
    <ext:Chart ID="chtGrafico" runat="server" Animate="true" Width="800" 
        Height="500" Frame="true" Hidden="true" InsetPadding="30">
        <LegendConfig Position="Right" />
        <Store>
            <ext:Store ID="StoreGrafico" runat="server">
                <Model>
                    <ext:Model ID="Model5" runat="server">
                        <Fields>
                            <ext:ModelField Name="Date" />
                            <ext:ModelField Name="Description" />
                            <ext:ModelField Name="Percentage"/>
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <Axes>
            <ext:NumericAxis Fields="Percentage" Title="Porcentagem" Minimum="0" Maximum="100" MajorTickSteps="9">
                <GridConfig>
                    <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
                </GridConfig>
            </ext:NumericAxis>
            <ext:CategoryAxis Fields="Date" Position="Bottom" Title="Meses" />
        </Axes>
        <Series>
            <ext:LineSeries Axis="Left" XField="Percentage" YField="Description">
                <HighlightConfig Size="7" Radius="7" />
                <MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
                <Tips runat="server" TrackMouse="true" Width="140" Height="35">
                    <Renderer Handler="this.setTitle(storeItem.get('Description') + '<br />' + storeItem.get('Percentage'));"></Renderer>
                </Tips>
            </ext:LineSeries>
        </Series>
    </ext:Chart>
    Result:
    Click image for larger version. 

Name:	Grafico2.png 
Views:	169 
Size:	18.4 KB 
ID:	4624

    I would like have two columns in CategoryAxis(30/06/2012, 31/07/2012) and in my right legend, I would like(With maturity 30 days, With maturity 60 days, With maturity 90 days, With maturity 180 days) refers to column Description(for each item would be a different line on the chart).

    Thanks.
    Last edited by Daniil; Aug 16, 2012 at 5:19 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Could you provide a mockup to understand the requirement better?
  3. #3
    The following chart that I rode with the ideal result, see if you can understand, based on records provided in the table.

    Click image for larger version. 

Name:	GraficoResult.png 
Views:	166 
Size:	18.8 KB 
ID:	4628

    Thanks.
  4. #4
    Hi,

    My idea is similar to that found below:

    http://jsfiddle.net/existdissolve/dkJb9/

    Post:
    http://www.sencha.com/forum/showthre...408#post870408

    I would like to gather the information they retrieve, create one row for each.

    Thanks.
  5. #5
    Thanks for the mockup.

    Well, four lines means that you should define four LineSeries.

    You will get an item in the Legend for each LineSeries.
  6. #6
    I agree, but the data are dynamic legend, in the example that I have put four items can return items to be X.

    Thanks.
  7. #7
    I would implement it something like this.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        class Item
        {
            public string Date { get; set; }
            public string Description { get; set; }
            public double Percentage { get; set; }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Chart1.GetStore();
                store.DataSource = new object[]
                {
                    new 
                    {
                        Date = "30/06/2012",
                        Descriptions = new string[] { "With maturity 30 days", "With maturity 60 days" },
                        Percentages = new double[] { 16.42, 28.28 }
                       
                    },
                    new 
                    {
                        Date = "31/07/2012",
                        Descriptions = new string[] { "With maturity 30 days", "With maturity 60 days" },
                        Percentages = new double[] { 27.11, 20.95 }
                       
                    }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var descriptionConvert = function (value, record) {
                Ext.each(value, function (d, index) {
                    record.data["Description" + index] = d;
                });
    
                return value;
            };
    
            var percentageConvert = function (value, record) {
                Ext.each(value, function (p, index) {
                    record.data["Percentage" + index] = p;
                });
    
                return value;
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Chart 
            ID="Chart1" 
            runat="server" 
            Width="600" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Date" />
                                <ext:ModelField Name="Descriptions" IsComplex="true">
                                    <Convert Fn="descriptionConvert" />
                                </ext:ModelField>
                                <ext:ModelField Name="Percentages" IsComplex="true">
                                    <Convert Fn="percentageConvert" />
                                </ext:ModelField>
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis 
                    Fields="Percentage" 
                    Title="Percentage" 
                    Minimum="0" 
                    Maximum="100" 
                    MajorTickSteps="9" />
                <ext:CategoryAxis Fields="Date" Title="Dates" Position="Bottom"  />
            </Axes>
            <Series>
                <ext:LineSeries Title="With maturity 30 days" XField="Date" YField="Percentage0" />
                <ext:LineSeries Title="With maturity 60 days" XField="Date" YField="Percentage1" />
            </Series>
            <LegendConfig Position="Right" />
        </ext:Chart>
    </body>
    </html>
    Hope this helps.
  8. #8
    Hi,

    This example is correct, I need exactly this, but my data is dynamic, I can't put the fixed LineSeries, I think I'll build it in code-behind.

    It's possible to building this dynamic?

    Thanks.
  9. #9
    Yes, you should create LineSeries and, probably, convert the initial data in code behind. It all is possible.
  10. #10
    Okay, I'll try to implement it in code behind.

    Thanks.

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  2. [CLOSED] column chart label line wrapping
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jul 05, 2012, 12:12 PM
  3. Line chart grouping of dates on x-asis
    By nomz in forum 2.x Help
    Replies: 1
    Last Post: Jun 08, 2012, 3:01 PM
  4. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  5. How to change a line style on the chart?
    By Natalie in forum 2.x Help
    Replies: 3
    Last Post: May 16, 2012, 11:15 AM

Posting Permissions