# Pie-chart code to populate dynamic data

**URL:** <https://discourse.cakephp.org/t/pie-chart-code-to-populate-dynamic-data/3469>\
**Category:** Need Help\
**Created:** [November 9, 2017, 9:33am UTC](https://discourse.cakephp.org/t/pie-chart-code-to-populate-dynamic-data/3469 "2017-11-09T09:33:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![harsha](https://avatars.discourse-cdn.com/v4/letter/h/e274bd/32.png) [@harsha](https://discourse.cakephp.org/u/harsha)\
**Post date:** [November 9, 2017, 9:33am UTC](https://discourse.cakephp.org/t/pie-chart-code-to-populate-dynamic-data/3469/1 "2017-11-09T09:33:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Diego](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/diego/32/296_2.png) [@Diego](https://discourse.cakephp.org/u/Diego)\
**Post date:** [November 9, 2017, 10:58am UTC](https://discourse.cakephp.org/t/pie-chart-code-to-populate-dynamic-data/3469/2 "2017-11-09T10:58:47Z")

</div>

Use highcharts:  
[https://www.highcharts.com/demo/pie-basic](https://www.highcharts.com/demo/pie-basic)  
[https://www.highcharts.com/docs/working-with-data/data-from-a-database](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
        }]
    }]
```

---

<div class="post-metadata">

**Author:** ![rrd](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/rrd/32/113_2.png) [@rrd](https://discourse.cakephp.org/u/rrd)\
**Post date:** [November 9, 2017, 11:37am UTC](https://discourse.cakephp.org/t/pie-chart-code-to-populate-dynamic-data/3469/3 "2017-11-09T11:37:57Z")

</div>

I used this in one of my projects. [https://github.com/pguso/jquery-plugin-circliful](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.