[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:

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:
Attachment 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.

Hi,

Could you provide a mockup to understand the requirement better?

The following chart that I rode with the ideal result, see if you can understand, based on records provided in the table.

Attachment 4628

Thanks.

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.

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.

I agree, but the data are dynamic legend, in the example that I have put four items can return items to be X.

Thanks.

I would implement it something like this.

Example

Code:

---

<%@ 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.

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.

Yes, you should create LineSeries and, probably, convert the initial data in code behind. It all is possible.

Okay, I'll try to implement it in code behind.

Thanks.