Can someone help me with dynamic piechart code in cakephp. I have set of data’s which is dynamic. I need to display those data’s in the form of pie-chart. So needed code for pie-chart in cakephp.
Use highcharts:
https://www.highcharts.com/demo/pie-basic
https://www.highcharts.com/docs/working-with-data/data-from-a-database
first create a view with js chart code and echo the series data with controller passed variables, then you can do something more dynamic with a specific controller action that returns json data and the view chart request this dynamic data with ajax call:
something like that js code:
$this->Html->scriptBlock('
$(document).ready(function() {
function requestChartData() {
var json_data;
$.ajax({
url: "'.$this->request->getAttribute('base') . '/controller/action_that_returns_data_as_json/",
dataType: "json",
data : $("#filter-form-id").serialize(), //optional form, for example if you want to filter data for specific year create this form with year field and this pass the variable to the controller action_that_returns_data_as_json where you use year variable in query builder finder()
cache: false,
success: function(data) {
renderChart(data);
}
});
}
function renderChart(seriesData){
chart = new Highcharts.Chart({
chart: {
renderTo: "div-id-where-render-chart",
type: "pie"
},
title: {
text: "My chart"
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: seriesData
});
}
});
', ['block' => true]);
controller - action_that_returns_data_as_json:
//use query builder $myModel->find(); do a foreach to format data as json in the example and return
$json_data = json_encode($result, JSON_NUMERIC_CHECK | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
$response = $this->response->withType('application/json')
->withStringBody($json_data);
return $response;
json example returns:
[{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'IE',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Other',
y: 0.2
}]
}]
1 Like
I used this in one of my projects. https://github.com/pguso/jquery-plugin-circliful
Both @Diego and myself suggested a javascript solution, and this is not an accident. Things like this is better to do on client side.
1 Like