PDA

View Full Version : [CLOSED] How to show a grouped bar vertically



JCarlosF
Mar 12, 2013, 11:42 PM
Is there anyway to show a grouped bar like this:

http://examples2.ext.net/#/Chart/Bar/Grouped/

but vertically ie. show the months in the bottom and the numbers in the left side

Baidaly
Mar 13, 2013, 12:41 AM
Hello!

You should use the Column Series for this. Take a look at the modified example from there: http://examples2.ext.net/#/Chart/Column/Basic/


<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
StyleSpec="background:#fff"
Animate="true">
<Store>
<ext:Store
runat="server"
Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
<ext:ModelField Name="Data3" />
</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"
XField="Name"
YField="Data1, Data2, Data3">
<Tips 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>
</ext:ColumnSeries>
</Series>
</ext:Chart>

JCarlosF
Mar 13, 2013, 6:47 PM
Hello!

You should use the Column Series for this. Take a look at the modified example from there: http://examples2.ext.net/#/Chart/Column/Basic/


<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
StyleSpec="background:#fff"
Animate="true">
<Store>
<ext:Store
runat="server"
Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
<ext:ModelField Name="Data3" />
</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"
XField="Name"
YField="Data1, Data2, Data3">
<Tips 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>
</ext:ColumnSeries>
</Series>
</ext:Chart>



Perfect, this works,
Thanks!