group column chart with tool tip having pie chart

[shardaprasad001]

Dear Reader,

I have created group column chart that chart having tooltip with pie chart option as based on extjs example. first column represent 2009 data and other is showing 2010 data based on that data when i drag my mouse over these then pie chart is showing data based on render.

I want when i go to 2009 data render will identify and tooltip pie chart data is based on some data1,data2,data3 and 2010 tooltip data is show based on data4,data5,data6.

please give me your suggestion so i will solve my problem.


I have integrated group column for 2009 and 2010 as wall as used tooltip with pie chart from extjs example part.

Thanks & Regards,
Sharda

[nagalla038]

Hi, try to refer this code..It may help you

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container');
Ext.require('Ext.layout.container.Fit');
Ext.require('Ext.window.MessageBox');


Ext.onReady(function () {


var pieModel = [
{
name: 'Uploads'
},
{
name: 'Downloads'
},
{
name: 'Saved'
},
{
name: 'Edited'
}

];


var pieStore = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: pieModel
});


var pieChart = Ext.create('Ext.chart.Chart', {
width: 100,
height: 100,
animate: false,
store: pieStore,
shadow: false,
insetPadding: 0,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data',
showInLegend: false,
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '9px Arial'
}
}]
});


var gridStore = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: pieModel
});


var grid = Ext.create('Ext.grid.Panel', {
store: gridStore,
height: 130,
width: 480,
columns: [
{
text: 'name',
dataIndex: 'name'
},
{
text: 'data',
dataIndex: 'data'
}
]
});


var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'Uploads', 'Downloads', 'Saved', 'Edited'],
data: [
{ 'name': 'January', 'Uploads': 10, 'Downloads': 12, 'Saved': 14, 'Edited': 8 },
{ 'name': 'Febraury', 'Uploads': 7, 'Downloads': 8, 'Saved': 16, 'Edited': 10 },
{ 'name': 'March', 'Uploads': 5, 'Downloads': 2, 'Saved': 14, 'Edited': 12 },
{ 'name': 'April', 'Uploads': 2, 'Downloads': 14, 'Saved': 6, 'Edited': 1 },
{ 'name': 'May', 'Uploads': 27, 'Downloads': 38, 'Saved': 36, 'Edited': 13 }
]
});


var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Uploads'],
title: false,
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false
}],
series: [{
type: 'line',
axis: 'left',
gutter: 80,
xField: 'name',
yField: ['Uploads'],
tips: {
trackMouse: true,
width: 580,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart, grid]
}
,
renderer: function (klass, item) {
var storeItem = item.storeItem,
data = [{
name: 'Uploads',
data: storeItem.get('Uploads')
}, {
name: 'Downloads',
data: storeItem.get('Downloads')
}, {
name: 'Saved',
data: storeItem.get('Saved')
}, {
name: 'Edited',
data: storeItem.get('Edited')
}], i, l, html;


this.setTitle("Information for " + storeItem.get('name'));
pieStore.loadData(data);
gridStore.loadData(data);
grid.setSize(480, 130);
}
}
}]
});




var panel1 = Ext.create('widget.panel', {
width: 800,
height: 400,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',

items: chart
});
});