CODEWITHSUNDEEP
javascripthtml
Sovit Maharjan
Sovit Maharjan

Reputation: 175

using loop to send value at pie chart

i am trying to get the data for pie chart looping array named "pie". But getting error at the selected line e.location. i have comment that line. and here is the picture. please help me find the solution image where i get the error

<div class="col-md-6">
    <style>
        #chartdiv {
        width: 100%;
        height: 500px;
        }
    </style>

    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/pie.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

    <script>
        var pie = [
            {"id":"1","location":"address1","value":"20"},
            {"id":"2","location":"address2","value":"30"},
            {"id":"3","location":"address3","value":"40"},
            {"id":"4","location":"address4","value":"50"},
            {"id":"5","location":"address5","value":"60"},
            {"id":"6","location":"address6","value":"70"},
            {"id":"7","location":"address7","value":"80"},
        ];

        console.log(pie);

        pie.map((e) => {
            console.log(e.location);
            return e;
        });

        var chart = AmCharts.makeChart( "chartdiv", {
            "type": "pie",
            "theme": "light",
            "dataProvider": [pie.map((e)=>{
              "location": e.location, //here is the error
              "value": e.value //here is the error
            })],
            "valueField": "value",
            "titleField": "location",
             "balloon":{
             "fixedPosition":true
            },
            "export": {
              "enabled": true
            }
        });
    </script>

    <div id="chartdiv"></div>
</div>

Upvotes: 1

Views: 1197

Answers (3)

cks
cks

Reputation: 153

heres the controller:

    $branch_emp = $this->mainModel->getbranchwise();

            foreach ($branch_emp as $data)
            {
                $series_data[]= array('name'=>$data['branch_name'],'data'=>array($data['totalemp']));
            }
$data['branch_emp']=json_encode($branch_emp);


 <script type="text/javascript">
        $(function () {
            var temp = <?php echo $branch_emp; ?>;
            console.log(temp);
            $('#pie_chart').highcharts({
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: 'Pie Chart of Employees'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: temp.map(function(e){
                        return [e.branch_name,e.totalemp];
                    })
                }]
            });
        });
    </script>

Upvotes: 0

3960278
3960278

Reputation: 796

[pie.map((e)=>{return {
              "location": e.location, //here is the error
              "value": e.value //here is the error}
            }})]

First { is for function and second is for object.

Upvotes: 0

David
David

Reputation: 548

It seems like you don't need to do that mapping at all, it works without it.

So just use "dataProvider": pie,

Here's a working version on JSFiddle.

Upvotes: 2

Related Questions