[Fixed]-How to implement chart.js with each field in the model? Django

1👍

where is your javascript code?

  Here is my php code you can have idea from here
    <script>
      var client="<?php echo $count_client; ?>";
      var lead="<?php echo $count_lead; ?>";
      var lead_inactive="<?php echo $count_lead_inactive; ?>";
      var suspended="<?php echo $count_suspended; ?>";
      var prospect="<?php echo $count_prospect; ?>";
      var inactive="<?php echo $count_inactive; ?>"; 

      var pending_invoice_balance="<?php echo $count_balance; ?>";


var clientdata = function() {
       return (parseFloat(client));
};
var leaddata = function() {
       return (parseFloat(lead));
};

var lead_inactivedata = function() {
       return (parseFloat(lead_inactive));
};
var suspendeddata = function() {
       return (parseFloat(suspended));
};
var prospectdata = function() {
       return (parseFloat(prospect));
};
var inactivedata = function() {
       return (parseFloat(inactive));
};

var pendingbalance = function() {
       return (parseFloat(client));
};

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                clientdata(),
                inactivedata(),
                leaddata(),
                lead_inactivedata(),
                prospectdata(),
                suspendeddata(),
            ],
            backgroundColor: [
             "#00FF00",
            "#e50000",
            "#ffa500",
           "#00FF00",
           "#0000FF",
           "#4B0082",
            ],
            label: 'Dataset 1'
        }],
        labels: [
        "Client",
        "Inactive",
        "Lead",
        "Lead/Inactive",
        "Prospect",
        "Suspended",
        ]
    },
    options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
            display: true,
            text: 'Status'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};
   var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config); 
   </script>

Leave a comment