Feb 05, 2014, 8:04 AM
[CLOSED] Chart - Change axis label dynamically
Hi all,
please consider the following modified example (Chart.Column.BrowserStats)
I would change X axis label according to the YEAR COMBO selected value
What should it be necessary to do to refresh the labels (new value of MM-YYYY) ?
Thanks in advance
please consider the following modified example (Chart.Column.BrowserStats)
I would change X axis label according to the YEAR COMBO selected value
What should it be necessary to do to refresh the labels (new value of MM-YYYY) ?
Thanks in advance
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void ReloadData(object sender, DirectEventArgs e)
{
Store store = this.Chart1.GetStore();
store.DataSource = GenerateData(Convert.ToInt32(cmbYear.SelectedItem.Value.ToString()), 5, 0);
store.DataBind();
// ??????
this.Chart1.Render();
// this.Chart1.Redraw();
// ??????
}
public static List<ChartData> GenerateData(int year, int n, int floor)
{
List<ChartData> data = new List<ChartData>(n);
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;
for (int i = 0; i < n; i++)
{
data.Add(new ChartData
{
// ========================== new value according to year combo selection =====================
Name = (i+1).ToString().PadLeft(2,'0')+"-"+year.ToString(),
// ============================================================================================
Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data7 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data8 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data9 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
});
}
return data;
}
public class ChartData
{
public string Name
{
get;
set;
}
public double Data1
{
get;
set;
}
public double Data2
{
get;
set;
}
public double Data3
{
get;
set;
}
public double Data4
{
get;
set;
}
public double Data5
{
get;
set;
}
public double Data6
{
get;
set;
}
public double Data7
{
get;
set;
}
public double Data8
{
get;
set;
}
public double Data9
{
get;
set;
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Column Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var saveChart = function (btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
Column Chart Sample</h1>
<p>
Display a sets of random data in a column series. Reload data will randomly generate
a new set of data in the store.</p>
<ext:ChartTheme ID="FancyTheme" runat="server" ThemeName="Fancy" Colors="url(#v-1),url(#v-2),url(#v-3),url(#v-4),url(#v-5)">
<Axis Stroke="#eee" />
<AxisLabelLeft Fill="#eee" />
<AxisLabelBottom Fill="#eee" />
<AxisTitleLeft Fill="#eee" />
<AxisTitleBottom Fill="#eee" />
</ext:ChartTheme>
<ext:Panel ID="Panel1" runat="server" Title="Column Chart" Width="800" Height="600"
Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />
<ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
<ext:ComboBox ID="cmbYear" runat="server" Width="200" EmptyText="Select Year" AllowBlank="false"
FieldLabel="Year">
<Items>
<ext:ListItem Text="2014" />
<ext:ListItem Text="2013" />
<ext:ListItem Text="2012" />
<ext:ListItem Text="2011" />
</Items>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="Chart1" runat="server" Theme="Fancy" Shadow="true">
<AnimateConfig Easing="BounceOut" Duration="750" />
<Store>
<ext:Store ID="Store1" runat="server" Data="<%# GenerateData(2014, 5, 0) %>" AutoDataBind="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Background Fill="rgb(17, 17, 17)" />
<Gradients>
<ext:Gradient GradientID="v-1" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
<ext:GradientStop Offset="100" Color="rgb(117, 14, 14)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-2" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
<ext:GradientStop Offset="100" Color="rgb(94, 114, 13)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-3" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
<ext:GradientStop Offset="100" Color="rgb(14, 117, 56)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-4" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
<ext:GradientStop Offset="100" Color="rgb(14, 56, 117)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-5" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
<ext:GradientStop Offset="100" Color="rgb(85, 10, 103)" />
</Stops>
</ext:Gradient>
</Gradients>
<Axes>
<ext:NumericAxis Fields="Data1" Title="Number of Hits" Minimum="0" Maximum="100">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
<GridConfig>
<Odd Stroke="#555" />
<Even Stroke="#555" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year" />
</Axes>
<Series>
<ext:ColumnSeries Axis="Left" Highlight="true" XField="Name" YField="Data1">
<Label Display="InsideEnd" Field="Data1" Orientation="Horizontal" Fill="#fff" Font="17px Arial"
TextAnchor="middle">
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Style Opacity="0.95" />
<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Feb 05, 2014 at 11:00 AM.
Reason: [CLOSED]
