Display data using kendoChart

Question

I wonder why I cant display my result query using the kendoChart. when i tried this

series: [{
   type: "pie",
   data: [{
      category: "Available",
      value: 24
   }]
}],

It works!

but when i tried to put the result of my query (please see the picture below)

series: [{
   type: "pie",
   data: [{
      category: status,
      value: counts
   }]
}],

no record display

my current code:

<script>
  const createChart = async () =>{
     const { status, counts } = await getConditions();
     console.log(status, counts)
     $("#chart1").kendoChart({
            title: {
                text: "All Books"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                labels: {
                    template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                    position: "outsideEnd",
                    visible: true,
                    background: "transparent"
                }
            },
          series: [{
                type: "pie",
                data: [{
                    category: status,
                    value: counts
                }]
            }],
            tooltip: {
                visible: true,
                template: "#= category # - #= kendo.format('{0:P}', percentage) #"
            }
        }); 
}
$(document).ready(()=>{
    createChart();
});
</script>

the results data from the console.log(status, counts)

So `status` is an array, not a string; `counts` is an array, not a number. Looks like something to _iterate_ over. Get familiar with [how to access and process objects, arrays, or JSON](/q/11922383/4642212) and use the static and instance methods of [`Array`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods). — Sebastian Simon, Mar 28 '22 at 04:23
See [forEach loop through two arrays at the same time in javascript](/q/57903061/4642212). `data` is an array of objects. Perhaps map both arrays, i.e. `status` (by value) and `counts` (by index) (or vice-versa), into objects like `{ category:`…`, value:`…`}`. I’m not a Kendo UI dev, but I’d _guess_ that …`series: [ { type: "pie", data: status.map((category, index) => ({ category, value: counts[index] })) } ]`… is worth exploring. Read the Kendo UI documentation to find out if this structure makes sense. — Sebastian Simon, Mar 28 '22 at 04:40

score 0 · Accepted Answer · answered Mar 28 '22 at 09:17

As status and counts are arrays, you'll need to convert it to an array of objects (with category and value fields) Kendo can understand. See example below and try it in the Telerik DOJO.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/pie-charts/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="chart1">
    </div>
    <script>
  const createChart = async () =>{
     //const { status, counts } = await getConditions();
     //console.log(status, counts)
     // better ensure that status and counts are of the same length!
     let status = ["Not Available",
                   "Not Available",
                   "Not Available",
                   "Not Available",
                   "Available",
                   "Available",
                   "Available"];
     let counts = [7,
                   7,
                   7,
                   7,
                   7,
                   7,
                   7];
     let data = [];
     for (let a = 0; a < status.length; a++) {
       data.push({
         category: status[a],
         value: counts[a]
       });
     }
     $("#chart1").kendoChart({
            title: {
                text: "All Books"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                labels: {
                    template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                    position: "outsideEnd",
                    visible: true,
                    background: "transparent"
                }
            },
          series: [{
                type: "pie",
                data: data,
            }],
            tooltip: {
                visible: true,
                template: "#= category # - #= kendo.format('{0:P}', percentage) #"
            }
        }); 
}
$(document).ready(()=>{
    createChart();
});
</script>
</div>

</body>
</html>

Display data using kendoChart

1 Answers1