Chartjs-How to use variable for data in Charts.js Pie Chart?

by

1👍

I have found the solution, i’m posting it here in case anyone else runs into the same problem in the future.

It turns out I just needed to use parseFloat. so the part that was changed was:

var sharePiePolorDoughnutData = [
                                       {
                                          value: [charttotalsedaypic],
                                          color: "#455C73",
                                          highlight: "#34495E",
                                          label: "Si Day"
                                       },

and i parsed the variable and the final code is:

var sharePiePolorDoughnutData = [
{
  value: parseFloat(charttotalsedaypic),
  color: "#455C73",
  highlight: "#34495E",
  label: "Si Day"
},

0👍

Can you just move the two variable declaration in onDeviceReady function.

<!DOCTYPE html>
<html>
<head>
   <title>Creating chart</title>
   <script src="jquery-1.11.3.min.js"></script>
   <script type = "text/javascript" src="Chart.js"> </script>
   <script>
        $(document).ready(function () {
           var charttotalsedaypic = document.getElementById("tbtotalsedaypic").value;

           var sharePiePolorDoughnutData = [
                                           {
                                              value: [charttotalsedaypic],
                                              color: "#455C73",
                                              highlight: "#34495E",
                                              label: "Si Day"
                                           },
                                           {
                                             value: 50,
                                             color: "#9B59B6",
                                             highlight: "#B370CF",
                                             label: "Si Night"
                                           },
                                           {
                                             value: 150,
                                             color: "#BDC3C7",
                                             highlight: "#CFD4D8",
                                             label: "Mi Day"
                                           }
                                         ];
  window.myPie = new Chart(document.getElementById("canvas_doughnut").getContext("2d")).Pie(sharePiePolorDoughnutData, {
      responsive: true,
      tooltipFillColor: "rgba(51, 51, 51, 0.55)"
  });
  });

  </script>
  </head>
  <body>
     <input type="text" value="11" id="tbtotalsedaypic"/>
     <canvas id="canvas_doughnut" height="450" width="600"></canvas>
   </body>
    </html>

As the value is not set, so the value return gives null and that’s why it is not rendered using the chart.

Leave a comment