Create bar chart using extjs and php
In this tutorial, I will give examples of the usage of bar chart by using extjs and php. Generally, bar chart consists of the x-axis and y-axis in this tutorial I will provide a case study about the number of sales in each month, the x-axis represents the name of the month, while the y-axis represents the total sales of each month.
we first create a database with the name of “chart” after that create a table with a “sale”, tables of contents consists of two columns of “month” and “sumOfsel”, for more details on the source code can be seen below.
CREATE TABLE IF NOT EXISTS `sale` ( `month` int(11) NOT NULL, `sumOfsel` int(11) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
after create tables, enter data into a table, like the example below:
INSERT INTO `penjualan` (`month`, `sumOfsel`) VALUES (0, 1400), (2, 2000), (3, 4000), (4, 8000), (0, 30000), (1, 5000), (5, 14686);
Ok now we’ve got a database, the next is create a file to display a bar chart. First step, create a file javascriptnya, like the example below,
Ext.chart.Chart.CHART_URL = '../ext-3.1.0/resources/charts.swf';
Ext.onReady(function(){
Ext.QuickTips.init(); //mengaktifkan QuickTips
var store = new Ext.data.JsonStore({
url:'chart.php',
root:'data',
autoLoad:true,
fields: [
{
name:'month'
},{
name:'total1'
}
],
listeners:{
load: function(){
cstore.refreshData();
}
}
});
var cstore = new Ext.data.JsonStore({
fields: ['month', 'total1'],
data: [],
refreshData: function(){
var data =[];
for(i=0;i<12;i++){
total1 =0;
found = store.findExact('month',String(i));
if (found != -1)
total1 = Math.floor(store.getAt(found).data.total1);
data.push({
month: Date.monthNames[i],
total1:total1
});
}
cstore.loadData(data);
}
});
new Ext.Panel({
width: 600,
height: 400,
renderTo: document.body,
title: 'Bar Graph',
tbar: [
{
text:'Refresh Data',
handler:function(){
store.reload();
}
}
],
items: {
xtype: 'columnchart',
store: cstore,
yField: 'total1',
url: '../ext-3.1.0/resources/charts.swf',
xField: 'month',
xAxis: new Ext.chart.CategoryAxis({
title: 'mont'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'sale'
}),
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});
});
Here we define two data store. the store and cstore. Why have two? I also do not know because I tried to just create one was not able to show graphs. After the confusion had I realized the data sent by the php json in all types is a string!. hence we have to do the conversion to the figure for total sales data by using the Math.floor function.
From there we need a another container that is cstore to accommodate new data as tired as we are converted according to the type of data. Actually you can also add a type definition in the configuration fields in the store, but for this one I have not tried.
Another problem is if for example I do not have the data in August, then the graph will jump to the next month. but wants me every month showing the total sales, although there is no sales data for the month (considered zero)
But with a little trick we can display all these months in ways:
1. Figures do Looping from Zero to 11 (number 0 is January)
2. Search the store based on the total recurrence rate was (0-11), if there is then the total data capture and, if not total = 0
3. This total data conversion (string form) into the form of number
4. Conversion rate into a month-month use the Date
5. enter data that has been converted into a temporary variable
6. Enter the temporary variable in cstore.
after that creat php file to get data from database.
last step is to create a html file to call the javascript file.
source http://xcoder.comoj.com
bar-chart-extjs
Tags: Axis, Bar Graph, Case Study, chart extjs, Chart Url, Columns, Document Body, extjs, Handler Function, Init, JSON, Language Javascript, Listeners, Lt, Math, MySQL, PHP, Php Chart, Php Tutorial, Source code, Tables Of Contents, True Fields