how to make chart using extjs and php
In this section i want to share about how to make chart using extjs and php, this chart very sampel, i use pie chart and json to make it.
case study: in this tutorial I want to display the graph the number of visitors in a particular month.
create database: exmaple “chart” after that create table like this:
CREATE TABLE IF NOT EXISTS `testchart` ( `name` varchar(100) NOT NULL, `visit` varchar(100) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Enter the following data into the testchart table
INSERT INTO `testchart` (`name`, `visit`) VALUES
('jul 2007', '1000'),
('jun 2007', '1500'),
('agu 2007', '2000'),
('sep 2007', '2500');
we have created database, the next is to make the appearance, here are some files that you have to make,
index.php
Charts
at the source code , there are red script, the script used to call piechhart.js files, the contents of the file is as follows.
/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.chart.Chart.CHART_URL = 'ext/resources/charts.swf';
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url:'viewchart.php',
fields:['name', 'visit', 'view'],
root:'data'
});
store.load();
new Ext.Panel({
width: 400,
height: 400,
title: 'chart using piechart',
renderTo: 'container',
items: {
store: store,
xtype: 'piechart',
dataField: 'visit',
categoryField: 'name',
//extra styles get applied to the chart defaults
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
}
}
});
});
.
on javascript file there is script to load php file, the contents of the file is as follows.
$arr)); echo $jsonresult; ?>piechart-extjs
Tags: Appearance, Case Study, chart, Chart Url, extjs, graph, Index Php, Js Library, JSON, Llc, Php Chart, Php File, Pie Chart, Script Php, Size 13, Source code