Apr 22, 2014, 9:04 PM
[CLOSED] Render Bar chart inside grid cell using column renderer
Hi,
I am trying to render a bar chart in grid cell using column renderer. I am referring to these links actually:
http://www.sencha.com/forum/showthre...ght=grid+chart
http://stackoverflow.com/questions/1...to-grid-column
I am using the js function - "renderColumnChart " that is trying to create a bar chart and render it to an EXT ID that is in turn, rendered inside grid cell.
But, this does not seem to work. I am just getting the page loaded with the grid with the data for only up to the column just before the column ( % Space) where this chart rendering is required. I am guessing the issue is somewhere is rendering, but no clue so far. Anyways, can you pls let me know whats the exact issue? Also how I can resolve this ?
It would be great if I could get a solution soon. Thanks a lot !
aspx code for grid:
-------------------
-----------
I am trying to render a bar chart in grid cell using column renderer. I am referring to these links actually:
http://www.sencha.com/forum/showthre...ght=grid+chart
http://stackoverflow.com/questions/1...to-grid-column
I am using the js function - "renderColumnChart " that is trying to create a bar chart and render it to an EXT ID that is in turn, rendered inside grid cell.
But, this does not seem to work. I am just getting the page loaded with the grid with the data for only up to the column just before the column ( % Space) where this chart rendering is required. I am guessing the issue is somewhere is rendering, but no clue so far. Anyways, can you pls let me know whats the exact issue? Also how I can resolve this ?
It would be great if I could get a solution soon. Thanks a lot !
aspx code for grid:
-------------------
<ext:GridPanel ID="InstanceTable" runat="server" Frame="true" Title="Instances" ForceFit="true" AutoScroll="true" StoreID="InstanceTableStore" >
<Store>
<ext:Store ID="InstanceTableStore" runat="server" AutoLoad="true" OnSubmitData="ExportToExcel" >
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#MainGridStoreURL%>' AutoDataBind="true" >
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<ExtraParams>
<ext:StoreParameter Name="DaysBack" Value="90"/>
<ext:StoreParameter Name="CompType" Value="Sybase ASE"/>
<ext:StoreParameter Name="AlertType" Value=""/>
</ExtraParams>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
<Reader>
<ext:JsonReader Root="" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model11" runat="server">
<Fields>
<ext:ModelField Name="PARENT_COMPONENT_ID" Type="Int" />
<ext:ModelField Name="COMPONENT_ID" Type="Int" />
<ext:ModelField Name="METRIC_NAME" Type="String" />
<ext:ModelField Name="ENVIRONMENT" Type="String" />
<ext:ModelField Name="COMPONENT_NAME" Type="String" />
<ext:ModelField Name="UNIT" Type="String" />
<ext:ModelField Name="PERC_USED" Type="Float" />
<ext:ModelField Name="PERC_GROWTH" Type="Float" />
<ext:ModelField Name="CAPACITY" Type="Float" />
<ext:ModelField Name="USED" Type="Float" />
<ext:ModelField Name="FREE" Type="Float" />
<ext:ModelField Name="EXPECTED_MAX_DATE" Type="String" >
</ext:ModelField>
<ext:ModelField Name="PEAK" Type="Float" />
<ext:ModelField Name="PEAK_DATE" Type="String">
</ext:ModelField>
<ext:ModelField Name="LAST_WEEK_PEAK" Type="Float" />
<ext:ModelField Name="LAST_7_DAY_INCR" Type="Float" />
<ext:ModelField Name="CAPACITY_NEED_6_MON" Type="Float" />
<ext:ModelField Name="USED_1_MON" Type="Float" />
<ext:ModelField Name="USED_6_MON" Type="Float" />
<ext:ModelField Name="LAST_UPDATED" Type="String" >
</ext:ModelField>
<ext:ModelField Name="WEEKS_OF_DATA" Type="Int" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<BeforeLoad Handler="App.btnExportInstances.disable();" />
<Load Fn="getDistinctforColumnsInsGrid"/>
</Listeners>
</ext:Store>
</Store>
<Plugins>
<ext:BufferedRenderer ID="BufferedRenderer1" runat="server" />
</Plugins>
<ColumnModel ID="InstanceBase" runat="server" >
<Columns>
<ext:Column ID="Column1" runat="server" Width="150">
<Commands>
<ext:ImageCommand Icon="ApplicationGet" CommandName="ViewDetailsDB" Text="Details " />
<ext:ImageCommand Icon="ChartCurve" CommandName="ViewGraph" ToolTip-Text="View Graph" />
</Commands>
<Listeners>
<Command Handler="App.direct.ShowDetails(command,record.get('COMPONENT_ID'),record.get('COMPONENT_NAME'));"/>
</Listeners>
</ext:Column>
<ext:Column ID="Column36" runat="server" Text="Environment" DataIndex="ENVIRONMENT" Width="120" Selectable="true" Align="Center"
>
<HeaderItems>
<ext:ComboBox
ID="cboEnvt"
runat="server"
Icon="Magnifier"
TriggerAction="All"
QueryMode="Local"
DisplayField="ENVIRONMENT"
ValueField="ENVIRONMENT">
<Listeners>
<Change Handler="applyFilter();" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton2" runat="server" />
</Plugins>
</ext:ComboBox>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Component Name" DataIndex="COMPONENT_NAME" Width="215" Selectable="true" Align="Center"
>
<HeaderItems>
<ext:TextField
ID="txtCompName"
runat="server"
Icon="Magnifier"
>
<Listeners>
<Change Handler="applyFilter();" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton1" runat="server" />
</Plugins>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column7" runat="server" Text="Metric Name" DataIndex="METRIC_NAME" Width="120" Align="Center"
>
<HeaderItems>
<ext:ComboBox
ID="cboMetricName"
runat="server"
Icon="Magnifier"
TriggerAction="All"
QueryMode="Local"
DisplayField="METRIC_NAME"
ValueField="METRIC_NAME">
<Listeners>
<Change Handler="applyFilter();" Buffer="250" />
</Listeners>
</ext:ComboBox>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" Text="% space" Align="Center" Width="320">
<Renderer Fn="renderColumnChart" />
</ext:Column>
<ext:Column ID="Column9" runat="server" Text="Capacity<br>(GB)" DataIndex="CAPACITY" Align="Center" Width="100"
/>
<ext:Column ID="Column10" runat="server" Text="Used<br>(GB)" DataIndex="USED" Align="Center" Width="100"
/>
<ext:Column ID="Column11" runat="server" Text="Free<br>(GB)" DataIndex="FREE" Width="100" Align="Center"
/>
<ext:Column ID="Column12" runat="server" Text="Expected<br>Max Date" DataIndex="EXPECTED_MAX_DATE" Width="170" Align="Center"
>
<Renderer Fn="RenderColor" />
<HeaderItems>
<ext:DateField ID="dtFilter" runat="server" Editable="false">
<Listeners>
<Change Handler="applyFilter();" Buffer="250" />
</Listeners>
<Plugins>
<ext:ClearButton ID="ClearButton3" runat="server" />
</Plugins>
</ext:DateField>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column17" runat="server" Text="% Growth<br>Rate" DataIndex="PERC_GROWTH" Width="100" Align="Center">
<Renderer Handler="return Ext.String.format(record.get('PERC_GROWTH') != 0 ?record.get('PERC_GROWTH').toFixed(2)+'%' : '0 %') "/>
</ext:Column>
<ext:Column ID="Column15" runat="server" Text="Peak<br>(GB)" DataIndex="PEAK" Width="90" Align="Center"
/>
<ext:Column ID="Column25" runat="server" Text="Last Week<br>Peak<br>(GB)" DataIndex="LAST_WEEK_PEAK" Width="100" Align="Center"
/>
<ext:Column ID="Column16" runat="server" Text="Date of<br>Peak" DataIndex="PEAK_DATE" Width="90" Align="Center"
>
<Renderer Fn="TrimText" />
</ext:Column>
<ext:Column ID="Column18" runat="server" Text="Last 7 Days<br>Increase<br>(GB)" DataIndex="LAST_7_DAY_INCR" Width="120" Align="Center"
/>
<ext:Column ID="Column21" runat="server" Text="Capacity Needed<br>for 6 Months<br>(GB)" DataIndex="CAPACITY_NEED_6_MON" Width="160" Align="Center"
>
<Renderer Handler="return Ext.String.format(record.get('CAPACITY_NEED_6_MON').toFixed(2)) "/>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Used in<br>1 Month<br>(GB)" DataIndex="USED_1_MON" Width="120" Align="Center"
/>
<ext:Column ID="Column70" runat="server" Text="Used in<br>6 Months<br>(GB)" DataIndex="USED_6_MON" Width="110" Align="Center"
/>
<ext:Column ID="Column14" runat="server" Text="# Weeks Of<br>Data" DataIndex="WEEKS_OF_DATA" Width="120" Align="Center"
/>
<ext:Column ID="Column13" runat="server" Text="Last Updated" DataIndex="LAST_UPDATED" Width="140" Align="Center"
>
<Renderer Fn="TrimText" /></ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="CellSelectionModel2" runat="server" EnableTextSelection="true" >
<DirectEvents>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GridView3" runat="server" EnableTextSelection ="true">
</ext:GridView>
</View>
</ext:GridPanel>-----------
var renderColumnChart = function (v, meta, r)
{
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 5 }
]
});
if (r.chart) {
r.chart.destroy();
}
r.chart =
new Ext.chart.Chart(Ext.create('Ext.chart.Chart', {
width: 250,
height: 100,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: false,
grid: false,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: false
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 35,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
}));
var id = Ext.id();
meta.attr = 'id="' + id +'"';
r.chart.render.defer(1, r.chart, [id]);
return '';
}
Last edited by Daniil; Apr 29, 2014 at 3:11 AM.
Reason: [CLOSED]
Originally Posted by Daniil
