Nov 15, 2012, 11:58 AM
[CLOSED] Legend in Column Chart
Hi guys,
i have a column chart with legend.
Actually, i have 1 data in legend : 'test 245, novembre'.
i wan't legend same pie Chart (one line per column)
I want :
(with the good color per column)
Regards
Yoann
i have a column chart with legend.
Actually, i have 1 data in legend : 'test 245, novembre'.
i wan't legend same pie Chart (one line per column)
<%@ 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 = Ext.Net.Examples.ChartData.GenerateData();
store.DataBind();
}
</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>
function saveChart(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'
});
}
});
}
function barRenderer(sprite, record, attr, index, store)
{
var fieldValue = Math.random() * 20 + 10,
value = index%15,
color = ['rgb(213, 70, 121)',
'rgb(255, 0, 0)',
'rgb(153, 255, 255)',
'rgb(102, 51, 102)',
'rgb(204, 204, 204)',
'rgb(255, 102, 102)',
'rgb(102, 102, 0)',
'rgb(255, 255, 153)',
'rgb(51, 255, 255)',
'rgb(0, 0, 153)',
'rgb(153, 255, 153)',
'rgb(255, 153, 0)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}
</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: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" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="Chart1" runat="server" Shadow="true" StyleSpec="background:#fff" Animate="true"
Legend="true">
<LegendConfig Position="Left" Update="true" AutoDataBind="true" />
<Store>
<ext:Store ID="Store1" runat="server" Data="<%# Ext.Net.Examples.ChartData.GenerateData(6) %>"
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>
<Axes>
<ext:NumericAxis Fields="Data1" Grid="true" Title="Number of Hits" Minimum="0">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
</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" Title="test 245, novembre">
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));" />
</Tips>
<Label Display="InsideEnd" Field="Data1" Orientation="Horizontal" Color="#333" TextAnchor="middle">
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Renderer Fn="barRenderer" />
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>I want :
Regards
Yoann
Last edited by Daniil; Nov 15, 2012 at 4:15 PM.
Reason: [CLOSED]
Originally Posted by Tactem
