PDA

View Full Version : [CLOSED] Chart data manipulation



jchau
Apr 22, 2014, 9:27 PM
I want to transpose the data for a chart. For example, in your stacked bar chart example,
http://examples2.ext.net/#/Chart/Bar/Stacked/

I want the years to be constant. I always want to look at 2005 - 2008. But the number of movie genres can be different. How can I construct my chart and data to make the genres dynamic? There will be a filter on the page that will change the genres shown in the chart.

Daniil
Apr 22, 2014, 10:03 PM
Hi @jchau,

You can bind a new data to Store. The example below demonstrates it. Though, as you can see it doesn't update the NumericAxis's Fields and BarSeries's YField. So, I guess the only stable solution is to re-render the Chart with new settings.

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.Data = new object[]
{
new { Year = 2005, Comedy = 34000000, Action = 23890000, Drama = 18450000, Thriller = 20060000 },
new { Year = 2006, Comedy = 56703000, Action = 38900000, Drama = 12650000, Thriller = 21000000 },
new { Year = 2007, Comedy = 42100000, Action = 50410000, Drama = 25780000, Thriller = 23040000 },
new { Year = 2008, Comedy = 38910000, Action = 56070000, Drama = 24810000, Thriller = 26940000 }
};
}
}

protected void Button_DirectClick(object sender, DirectEventArgs e)
{
this.Store1.DataSource = new List<object>
{
new { Year = 2005, Comedy = 34000000, Drama = 18450000 },
new { Year = 2006, Comedy = 56703000, Drama = 12650000 },
new { Year = 2007, Comedy = 42100000, Drama = 25780000 },
new { Year = 2008, Comedy = 38910000, Drama = 24810000 }
};

this.Store1.DataBind();
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="2 genres" OnDirectClick="Button_DirectClick" />

<ext:Panel
runat="server"
Width="800"
Height="400"
Title="Stacked Bar Chart - Movies by Genre"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
Animate="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Year" />
<ext:ModelField Name="Comedy" />
<ext:ModelField Name="Action" />
<ext:ModelField Name="Drama" />
<ext:ModelField Name="Thriller" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<LegendConfig Position="Right" />

<Axes>
<ext:NumericAxis Fields="Comedy,Action,Drama,Thriller" Position="Bottom" Grid="true">
<Label>
<Renderer Handler="return String(value).replace(/000000$/, 'M');" />
</Label>
</ext:NumericAxis>

<ext:CategoryAxis Fields="Year" Position="Left" />
</Axes>

<Series>
<ext:BarSeries
Axis="Bottom"
Gutter="80"
XField="Year"
YField="Comedy,Action,Drama,Thriller"
Stacked="true">
<Tips runat="server" TrackMouse="true" Width="65" Height="28">
<Renderer Handler="this.setTitle(String(item.value[1] / 1000000) + 'M');" />
</Tips>
</ext:BarSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

jchau
Apr 22, 2014, 10:25 PM
Yea, that also requires me to know the max number of genres too which I may not. Is it possible to use XRender with Charts? If in my aspx view, I have a chart already, how do I completely re-render it?

Daniil
Apr 22, 2014, 10:31 PM
This should work:

Chart1.Render();