Pie-chart code to populate dynamic data

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:

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:

    $(document).ready(function() {

function requestChartData() {
            var json_data;
                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) {

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

        $response = $this->response->withType('application/json')
        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