My task is to fetch different types of charts ,when i click from the drop down box. Based on which graph i select from dropdown ,i need to display the same in JS file. Currently i can display different types of charts.
Can you please help me how to fetch from based on dropdown values through sencha EXT JS.
Thanks in advance..
please find the attached code below.
/*global Ext:false */
Ext.onReady(function () {
// The data store containing the list of states
var charts = Ext.create('Ext.data.Store', {
fields: [ 'name'],
data: [{
"name": "Bar"
}, {
"name": "Pie"
}, {
"name": "Line"
},{
"name": "Area"
}, {
"name": "Column"
}, {
"name": "Gauge"
}
]
});
// Create the combo box, attached to the charts data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Chart',
store: charts,
queryMode: 'local',
displayField: 'name',
renderTo: Ext.getBody()
});
//Line Chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 4, 'data2': 4, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});
var linechart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
//Bar Chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
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'
}]
});
//pie chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data': 27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
//column chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'January', 'data': 10 },
{ 'name': 'February', 'data': 20 },
{ 'name': 'March', 'data': 30},
{ 'name': 'April', 'data': 40 },
{ 'name': 'May', 'data': 50 },
{ 'name': 'June', 'data': 60 },
{ 'name': 'July', 'data': 70 },
{ 'name': 'August', 'data': 60 },
{ 'name': 'September', 'data': 50 },
{ 'name': 'October', 'data': 40},
{ 'name': 'November', 'data': 30},
{ 'name': 'December', 'data': 20}
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 1000,
height: 500,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
]
});
});