ZingChart followed mysql tutorial but i want a pie not a bar

Question

I'm pretty new with all this stuff and it may be an easy solution but i can't figure it out. I followed the mysql tutorial for ZingChart and i am able to see my bar i created, but i want a pie chart.

<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Pie Chart</h3>
                        </div>
                        <?php 
                            $sqlpie = "SELECT Naam,Voorraad FROM product WHERE Voorraad != 0";
                            $data = mysqli_query($con, $sqlpie);
                        ?>

                        <script>
                        var myData=[<?php 
                        while($info=mysqli_fetch_array($data))
                             echo $info['Voorraad'].','; /* We use the concatenation operator '.' to add comma delimiters after each data value. */
                        ?>];
                        <?php
                            $data=mysqli_query($con,"SELECT * FROM Product WHERE Voorraad !=0");
                        ?>
                            var myLabels=[<?php 
                            while($info=mysqli_fetch_array($data))
                            echo '"'.$info['Naam'].'",'; /* The concatenation operator '.' is used here to create string values from our database names. */
                        ?>];
                        </script>
                        <script>
                                 window.onload=function(){
                                    zingchart.render({
                                        id:"pieChart",
                                        width:"100%",
                                        height:400,
                                        data:{
                                        "type":"bar",
                                        "scale-x":{
                                            "labels":myLabels
                                        },
                                        "series":[
                                            {
                                                "values":myData

                                            }
                                    ]
                                    }
                                    });
                                    };
                    </script>

                        <div class="panel-body">
                            <div id="pieChart"></div>    
                        </div>
                    </div>
                </div>

            </div>

I want to use the Pie which has this format

"type":"pie3d",
"series":[
    {
        "text":"Apples",
        "values":[5]
    },
    {
        "text":"Oranges",
        "values":[8]
    },
    {
        "text":"Bananas",
        "values":[22]
    },
    {
        "text":"Grapes",
        "values":[16]
    },
    {
        "text":"Cherries",
        "values":[12]
    }
]

Can anybody help me?

Answer 1

If you were able to get a bar chart, then your myData JavaScript variable probably looks something like this:

myData = [98,12,36,76];

Each pie slice in a pie chart requires its own object within series, with a values attribute that takes a single value array. So if you have four values in your myData array, you could do something like this:

var myData = [98,12,36,76];

window.onload=function(){
    zingchart.render({
        id:"pieChart",
        width:"100%",
        height:400,
        data:{
            "type":"pie",
            "series":[
                {
                    "values": [ myData[0] ]
                },
                {
                    "values": [ myData[1] ] 
                },
                {
                    "values": [ myData[2] ]
                },
                {
                    "values": [ myData[3] ]
                }
            ]
        }
    });
};

I'm on the ZingChart team, so let me know I can do anything else to help!