KoolChart
|
| | |
KoolChart - Excellent PHP Chart and GraphFullVersion 2.6.0.2 released on 25/11/2016
Functionality - Gap and Ratio
Description & Sample code
To set a chart's gap ratios or padding, please use the following properties:
$chart = new KoolChart("KoolChart1");
$chart->set(array(
'BarGapRatio' => 0.5,
'CategoryGapRatio' => 0.4,
'pad' => [20, 20, 20, 20],
));
or:
$chart = new KoolChart('KoolChart1');
$s = $chart->getSetting();
$s["Pad"] = [0, 0, 0, 0];
$s["BarGapRatio"] = 0.5;
$s["CategoryGapRatio"] = 0.4;
$chart->set($s);
To set pie series's various options, please use the following properties:
$series = new PieSeries("Browsers");
$series->set(array(
"ExplodedRatio" => 1.15,
"PieLabel" => array(
"ArcTickGap" => 5,
"ArcTickSize" => 15,
"LabelTickGap" => 5,
"LabelTickSize" => 10,
),
));
or:
$series = new PieSeries("Browsers");
$s = $series->getSetting();
$s["ExplodedRatio"] = 1.15;
$s["PieLabel"]["ArcTickGap"] = 5;
$s["PieLabel"]["ArcTickSize"] = 15;
$s["PieLabel"]["LabelTickGap"] = 5;
$s["PieLabel"]["LabelTickSize"] = 10;
$series->set($s);
<?php
$KoolControlsFolder = "../../../../KoolControls";//Relative path to "KoolPHPSuite/KoolControls" folder
require $KoolControlsFolder . "/KoolChart/koolchart.php";
require $KoolControlsFolder."/KoolAjax/koolajax.php";
require $KoolControlsFolder."/KoolTreeGrid/kooltreegrid.php";
//Column chart
$chart = new KoolChart("KoolChart1");
$chart->scriptFolder=$KoolControlsFolder."/KoolChart";
$chart->Title->Text = "Sales report for 2012";
$chart->Width = 660;
$chart->Height = 460;
$chart->PlotArea->XAxis->Title = "Quarters";
$chart->PlotArea->XAxis->Set(array("Q1","Q2","Q3","Q4"));
$chart->PlotArea->YAxis->Title = "Sales (.million)";
$chart->PlotArea->YAxis->LabelsAppearance->DataFormatString = "$ {0}";
$series = new ColumnSeries();
$series->Name = "TVs";
$series->TooltipsAppearance->DataFormatString = "$ {0} millions {1}";
$series->ArrayData(array(20,30,40,70));
$chart->PlotArea->AddSeries($series);
$series = new ColumnSeries();
$series->Name = "Computers ";
$series->TooltipsAppearance->DataFormatString = "$ {0} millions {1}";
$series->ArrayData(array(34,55,10,40));
$chart->PlotArea->AddSeries($series);
$series = new ColumnSeries();
$series->Name = "Tablets, e-readers, everything else";
$series->TooltipsAppearance->DataFormatString = "$ {0} millions {1}";
$series->ArrayData(array(56,23,56,80));
$chart->PlotArea->AddSeries($series);
$chart->set(array(
'pad' => [20, 20, 20, 20],
'Transitions' => FALSE,
));
$info = array(
'id' => 'KoolTreeGrid1',
'style' => 'outlook',
'width' => '400px',
'columns' => array(
array(
'field' => 'prop',
'headerText' => 'Property',
'width' => '200px',
),
array(
'field' => 'value',
'headerText' => 'Value',
'width' => '120px',
),
array(
'field' => 'type',
'headerText' => 'Type',
'width' => '50px',
),
array(
'field' => 'desc',
'headerText' => 'Description',
'visible' => false,
),
),
);
$treeGrid = KoolTreeGrid::newTreeGrid($info);
$metaField = 'meta';
$rows = KoolTreeGrid::csvToArray('data.csv', ';');
foreach ($rows as & $row)
foreach ($row as $field => & $value)
if ($field===$metaField)
$value = json_decode($value, true);
$treeGrid->set(array(
'ArrayData' => $rows,
'idField' => 'id',
'parentField' => 'parentId',
'metaField' => $metaField,
));
$treeGrid->process();
//Pie chart
$chart2 = new KoolChart("KoolChart2");
$chart->scriptFolder=$KoolControlsFolder."/KoolChart";
$chart2->Width = 660;
$chart2->Height = 400;
$chart2->Title->Text = "Browser Statistics 2012";
$series = new PieSeries("Browsers");
$series->LabelsAppearance->DataFormatString="{0}%";
$series->set(array(
"ExplodedRatio" => 1.15,
"PieLabel" => array(
"ArcTickGap" => 5,
"ArcTickSize" => 15,
"LabelTickGap" => 5,
"LabelTickSize" => 10,
),
));
$item = new PieItem(31.8,"Firefox");
$item->BackgroundColor = "orange";
$item->Exploded = true;
$series->AddItem($item);
$item = new PieItem(16.1,"Internet Explorer");
$series->AddItem($item);
$item = new PieItem(44.9,"Chrome");
$item->BackgroundColor = "green";
$series->AddItem($item);
$item = new PieItem(4.3,"Safari");
$series->AddItem($item);
$item = new PieItem(2.9,"Opera & Others");
$series->AddItem($item);
$chart2->PlotArea->AddSeries($series);
$chart2->Transitions = false;
$info = array(
'id' => 'KoolTreeGrid2',
'style' => 'outlook',
'width' => '400px',
'columns' => array(
array(
'field' => 'prop',
'headerText' => 'Property',
'width' => '200px',
),
array(
'field' => 'value',
'headerText' => 'Value',
'width' => '120px',
),
array(
'field' => 'type',
'headerText' => 'Type',
'width' => '50px',
),
array(
'field' => 'desc',
'headerText' => 'Description',
'visible' => false,
),
),
);
$treeGrid2 = KoolTreeGrid::newTreeGrid($info);
$metaField = 'meta';
$rows = KoolTreeGrid::csvToArray('data2.csv', ';');
foreach ($rows as & $row)
foreach ($row as $field => & $value)
if ($field===$metaField)
$value = json_decode($value, true);
$treeGrid2->set(array(
'ArrayData' => $rows,
'idField' => 'id',
'parentField' => 'parentId',
'metaField' => $metaField,
));
$treeGrid2->process();
?>
<form id="form1" method="post">
<?php
//Render Ajax functions for KoolTreeView
echo $koolajax->Render();
?>
<div class="horizontalRule" style="float:left;border-bottom:2px solid #d1d1d1">
<div id="KoolChart1Div" style="float:left;">
<?php echo $chart->Render();?>
</div>
<div id="KoolTreeGrid1Div" style="float:left; margin: 25px">
<?php
echo $treeGrid->render();
?>
<input type="button" value="Update KoolChart1" onclick="KoolTreeGrid_update('KoolTreeGrid1', 'KoolChart1')"></input>
<input type="button" value="Reset" onclick="KoolTreeGrid_reset('KoolTreeGrid1', 'KoolChart1')"></input>
</div>
</div>
<div>
<div id="KoolChart2Div" style="float:left">
<?php echo $chart2->Render();?>
</div>
<div id="KoolTreeGrid2Div" style="float:left; margin: 25px">
<?php
echo $treeGrid2->render();
?>
<input type="button" value="Update KoolChart2" onclick="KoolTreeGrid_update('KoolTreeGrid2', 'KoolChart2')"></input>
<input type="button" value="Reset" onclick="KoolTreeGrid_reset('KoolTreeGrid2', 'KoolChart2')"></input>
</div>
</div>
<script type='text/javascript'>
KoolTreeGrid_update = function(ktgId, kcId) {
var ktg = KoolTreeGridJS.getTreeGrid(ktgId);
var treeData = ktg.getCurrentTreeData();
var chart = KoolChartJS.getChart(kcId);
var newSetting = ktg.treeDataToSetting(treeData, 'prop', 'value', 'type');
var chartSetting = chart.getSetting();
var setting = KoolPHP.recursiveMerge(chartSetting, newSetting);
chart.setSetting(setting);
chart.redraw();
};
KoolTreeGrid_reset = function(ktgId, kcId) {
var ktg = KoolTreeGridJS.getTreeGrid(ktgId);
var treeData = ktg.getOriginalTreeData();
var chart = KoolChartJS.getChart(kcId);
var newSetting = ktg.treeDataToSetting(treeData, 'prop', 'value', 'type');
var setting = KoolPHP.recursiveMerge(chart.getSetting(), newSetting);
chart.setSetting(setting);
chart.redraw();
ktg.reRender();
};
</script>
<div style="clear:left"><i>* <u>Note</u>:</i>Generate your own chart with <a style="color:#B8305E;" target="_blank" href="http://codegen.koolphp.net/generate_koolchart.php">Code Generator</a></div>
</form>
| | |
|