Pie-chart code to populate dynamic data

Need Help
1

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.

2

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
3

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