PDA

View Full Version : [CLOSED] Chart Line



pdcase
Aug 13, 2012, 3:08 PM
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:
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.

Daniil
Aug 13, 2012, 3:27 PM
Hi,

Could you provide a mockup to understand the requirement better?

pdcase
Aug 13, 2012, 5:07 PM
The following chart that I rode with the ideal result, see if you can understand, based on records provided in the table.

4628

Thanks.

pdcase
Aug 13, 2012, 7:05 PM
Hi,

My idea is similar to that found below:

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

Post:
http://www.sencha.com/forum/showthread.php?236815-Grouped-Bar-Column-Chart-from-Grouped-Store&p=870408#post870408

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

Thanks.

Daniil
Aug 13, 2012, 8:33 PM
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.

pdcase
Aug 13, 2012, 8:45 PM
I agree, but the data are dynamic legend, in the example that I have put four items can return items to be X.

Thanks.

Daniil
Aug 14, 2012, 12:33 PM
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.

pdcase
Aug 14, 2012, 1:27 PM
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.

Daniil
Aug 14, 2012, 1:37 PM
Yes, you should create LineSeries and, probably, convert the initial data in code behind. It all is possible.

pdcase
Aug 14, 2012, 4:25 PM
Okay, I'll try to implement it in code behind.

Thanks.