Bar chart is not grouped properly in chartjs












0















I tried to create a multi bar chart using chartjs.But jobType and jobCount is not displayed according to the each companyName.



Here is the table
enter image description here



Here is the php file(CompanySeletion.php):



<?php

header('Content-Type:application/json');

define('DB_HOST','127.0.0.1');
define('DB_USERNAME','root');
define('DB_PASSWORD','');
define('DB_NAME','newmanpower');

$mysqli =new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD, DB_NAME);

if(!$mysqli){

die("Connection failed: ".$mysqli->error);
}

//$selected = $_GET['Month'];
$selected=3;
$query = sprintf("SELECT jobType,jobCount,comName FROM graphview group by jobType,comName");

$result= $mysqli->query($query);

$data =array();

foreach ($result as $row){
$data= $row;
}
$result->close();
$mysqli->close();

print json_encode($data);


?>


Here is the JS file(testingbutton.js):



 $(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/CompanySeletion.php",
method: "GET",
success: function (data) {
console.log(data);
var jobType = ;
var jobCount = ;
var comName=;
var chartColors = {
green: 'rgb(70, 214, 8)',
red: 'rgb(242, 26, 2)'
};




for (var i in data)
{
jobType.push( data[i].jobType);
jobCount.push(data[i].jobCount);
comName.push(data[i].comName);
}


var ctx = document.getElementById("mycanvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: jobType,
datasets: [{
label: comName[0],
data: jobCount(comName[0]),
backgroundColor: ,
borderColor: ,
borderWidth: 1

},
{
label: comName[1],
data: jobCount ,
backgroundColor: ,
borderColor: ,
borderWidth: 1
},

]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});

var colorChangeValue = 1;
var dataset = myChart.data.datasets[0];
var dataset = myChart.data.datasets[1];
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] > colorChangeValue) {
dataset.backgroundColor[i] = chartColors.green;
}
else {
dataset.backgroundColor[i] = chartColors.red;
}

}
myChart.update();


},
error: function (data) {
console.log(data);
}


});
});


Here is the HTML file:



<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.0.0.js"></script>
<script src="jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<style type="text/css">
#chart-container {
width: 640px;
heigth: auto;
}
</style>

<title>Job Progress</title>
</head>
<body>


<canvas height='75' width='200' id="mycanvas"></canvas>

<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/testingbutton.js"></script>
</body>
</html>


Here is the received output according to the above code samples:
enter image description here



In the above graph, it shows same job type twice.Can anyone suggest a solution for that?










share|improve this question





























    0















    I tried to create a multi bar chart using chartjs.But jobType and jobCount is not displayed according to the each companyName.



    Here is the table
    enter image description here



    Here is the php file(CompanySeletion.php):



    <?php

    header('Content-Type:application/json');

    define('DB_HOST','127.0.0.1');
    define('DB_USERNAME','root');
    define('DB_PASSWORD','');
    define('DB_NAME','newmanpower');

    $mysqli =new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD, DB_NAME);

    if(!$mysqli){

    die("Connection failed: ".$mysqli->error);
    }

    //$selected = $_GET['Month'];
    $selected=3;
    $query = sprintf("SELECT jobType,jobCount,comName FROM graphview group by jobType,comName");

    $result= $mysqli->query($query);

    $data =array();

    foreach ($result as $row){
    $data= $row;
    }
    $result->close();
    $mysqli->close();

    print json_encode($data);


    ?>


    Here is the JS file(testingbutton.js):



     $(document).ready(function(){
    $.ajax({
    url: "http://localhost/chartjs/CompanySeletion.php",
    method: "GET",
    success: function (data) {
    console.log(data);
    var jobType = ;
    var jobCount = ;
    var comName=;
    var chartColors = {
    green: 'rgb(70, 214, 8)',
    red: 'rgb(242, 26, 2)'
    };




    for (var i in data)
    {
    jobType.push( data[i].jobType);
    jobCount.push(data[i].jobCount);
    comName.push(data[i].comName);
    }


    var ctx = document.getElementById("mycanvas").getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: jobType,
    datasets: [{
    label: comName[0],
    data: jobCount(comName[0]),
    backgroundColor: ,
    borderColor: ,
    borderWidth: 1

    },
    {
    label: comName[1],
    data: jobCount ,
    backgroundColor: ,
    borderColor: ,
    borderWidth: 1
    },

    ]
    },
    options: {
    scales: {
    yAxes: [{
    ticks: {
    beginAtZero:true
    }
    }]
    }
    }
    });

    var colorChangeValue = 1;
    var dataset = myChart.data.datasets[0];
    var dataset = myChart.data.datasets[1];
    for (var i = 0; i < dataset.data.length; i++) {
    if (dataset.data[i] > colorChangeValue) {
    dataset.backgroundColor[i] = chartColors.green;
    }
    else {
    dataset.backgroundColor[i] = chartColors.red;
    }

    }
    myChart.update();


    },
    error: function (data) {
    console.log(data);
    }


    });
    });


    Here is the HTML file:



    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery-3.0.0.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
    <link rel="stylesheet" href="stylesheet.css">
    <style type="text/css">
    #chart-container {
    width: 640px;
    heigth: auto;
    }
    </style>

    <title>Job Progress</title>
    </head>
    <body>


    <canvas height='75' width='200' id="mycanvas"></canvas>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/testingbutton.js"></script>
    </body>
    </html>


    Here is the received output according to the above code samples:
    enter image description here



    In the above graph, it shows same job type twice.Can anyone suggest a solution for that?










    share|improve this question



























      0












      0








      0








      I tried to create a multi bar chart using chartjs.But jobType and jobCount is not displayed according to the each companyName.



      Here is the table
      enter image description here



      Here is the php file(CompanySeletion.php):



      <?php

      header('Content-Type:application/json');

      define('DB_HOST','127.0.0.1');
      define('DB_USERNAME','root');
      define('DB_PASSWORD','');
      define('DB_NAME','newmanpower');

      $mysqli =new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD, DB_NAME);

      if(!$mysqli){

      die("Connection failed: ".$mysqli->error);
      }

      //$selected = $_GET['Month'];
      $selected=3;
      $query = sprintf("SELECT jobType,jobCount,comName FROM graphview group by jobType,comName");

      $result= $mysqli->query($query);

      $data =array();

      foreach ($result as $row){
      $data= $row;
      }
      $result->close();
      $mysqli->close();

      print json_encode($data);


      ?>


      Here is the JS file(testingbutton.js):



       $(document).ready(function(){
      $.ajax({
      url: "http://localhost/chartjs/CompanySeletion.php",
      method: "GET",
      success: function (data) {
      console.log(data);
      var jobType = ;
      var jobCount = ;
      var comName=;
      var chartColors = {
      green: 'rgb(70, 214, 8)',
      red: 'rgb(242, 26, 2)'
      };




      for (var i in data)
      {
      jobType.push( data[i].jobType);
      jobCount.push(data[i].jobCount);
      comName.push(data[i].comName);
      }


      var ctx = document.getElementById("mycanvas").getContext('2d');
      var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
      labels: jobType,
      datasets: [{
      label: comName[0],
      data: jobCount(comName[0]),
      backgroundColor: ,
      borderColor: ,
      borderWidth: 1

      },
      {
      label: comName[1],
      data: jobCount ,
      backgroundColor: ,
      borderColor: ,
      borderWidth: 1
      },

      ]
      },
      options: {
      scales: {
      yAxes: [{
      ticks: {
      beginAtZero:true
      }
      }]
      }
      }
      });

      var colorChangeValue = 1;
      var dataset = myChart.data.datasets[0];
      var dataset = myChart.data.datasets[1];
      for (var i = 0; i < dataset.data.length; i++) {
      if (dataset.data[i] > colorChangeValue) {
      dataset.backgroundColor[i] = chartColors.green;
      }
      else {
      dataset.backgroundColor[i] = chartColors.red;
      }

      }
      myChart.update();


      },
      error: function (data) {
      console.log(data);
      }


      });
      });


      Here is the HTML file:



      <!DOCTYPE html>
      <html>
      <head>
      <script src="jquery-3.0.0.js"></script>
      <script src="jquery-ui.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
      <link rel="stylesheet" href="stylesheet.css">
      <style type="text/css">
      #chart-container {
      width: 640px;
      heigth: auto;
      }
      </style>

      <title>Job Progress</title>
      </head>
      <body>


      <canvas height='75' width='200' id="mycanvas"></canvas>

      <!-- javascript -->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/Chart.min.js"></script>
      <script type="text/javascript" src="js/testingbutton.js"></script>
      </body>
      </html>


      Here is the received output according to the above code samples:
      enter image description here



      In the above graph, it shows same job type twice.Can anyone suggest a solution for that?










      share|improve this question
















      I tried to create a multi bar chart using chartjs.But jobType and jobCount is not displayed according to the each companyName.



      Here is the table
      enter image description here



      Here is the php file(CompanySeletion.php):



      <?php

      header('Content-Type:application/json');

      define('DB_HOST','127.0.0.1');
      define('DB_USERNAME','root');
      define('DB_PASSWORD','');
      define('DB_NAME','newmanpower');

      $mysqli =new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD, DB_NAME);

      if(!$mysqli){

      die("Connection failed: ".$mysqli->error);
      }

      //$selected = $_GET['Month'];
      $selected=3;
      $query = sprintf("SELECT jobType,jobCount,comName FROM graphview group by jobType,comName");

      $result= $mysqli->query($query);

      $data =array();

      foreach ($result as $row){
      $data= $row;
      }
      $result->close();
      $mysqli->close();

      print json_encode($data);


      ?>


      Here is the JS file(testingbutton.js):



       $(document).ready(function(){
      $.ajax({
      url: "http://localhost/chartjs/CompanySeletion.php",
      method: "GET",
      success: function (data) {
      console.log(data);
      var jobType = ;
      var jobCount = ;
      var comName=;
      var chartColors = {
      green: 'rgb(70, 214, 8)',
      red: 'rgb(242, 26, 2)'
      };




      for (var i in data)
      {
      jobType.push( data[i].jobType);
      jobCount.push(data[i].jobCount);
      comName.push(data[i].comName);
      }


      var ctx = document.getElementById("mycanvas").getContext('2d');
      var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
      labels: jobType,
      datasets: [{
      label: comName[0],
      data: jobCount(comName[0]),
      backgroundColor: ,
      borderColor: ,
      borderWidth: 1

      },
      {
      label: comName[1],
      data: jobCount ,
      backgroundColor: ,
      borderColor: ,
      borderWidth: 1
      },

      ]
      },
      options: {
      scales: {
      yAxes: [{
      ticks: {
      beginAtZero:true
      }
      }]
      }
      }
      });

      var colorChangeValue = 1;
      var dataset = myChart.data.datasets[0];
      var dataset = myChart.data.datasets[1];
      for (var i = 0; i < dataset.data.length; i++) {
      if (dataset.data[i] > colorChangeValue) {
      dataset.backgroundColor[i] = chartColors.green;
      }
      else {
      dataset.backgroundColor[i] = chartColors.red;
      }

      }
      myChart.update();


      },
      error: function (data) {
      console.log(data);
      }


      });
      });


      Here is the HTML file:



      <!DOCTYPE html>
      <html>
      <head>
      <script src="jquery-3.0.0.js"></script>
      <script src="jquery-ui.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
      <link rel="stylesheet" href="stylesheet.css">
      <style type="text/css">
      #chart-container {
      width: 640px;
      heigth: auto;
      }
      </style>

      <title>Job Progress</title>
      </head>
      <body>


      <canvas height='75' width='200' id="mycanvas"></canvas>

      <!-- javascript -->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/Chart.min.js"></script>
      <script type="text/javascript" src="js/testingbutton.js"></script>
      </body>
      </html>


      Here is the received output according to the above code samples:
      enter image description here



      In the above graph, it shows same job type twice.Can anyone suggest a solution for that?







      javascript php html json chart.js






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 1 at 7:13







      Pasindu Senarath

















      asked Jan 1 at 7:02









      Pasindu SenarathPasindu Senarath

      117116




      117116
























          1 Answer
          1






          active

          oldest

          votes


















          1














          You should pass the data in the below way to get the desired output. All the items which need to be showed in x-axis should be passed in the labels array, then each dataset i.e. "Pearson" and "srinath" should be passed as a separate dataset with data as corresponding values for the x-axis. Fiddle -> http://jsfiddle.net/Lzo5g01n/25/



          var ctx = document.getElementById("myChart").getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
          labels: ["CPI", "Cutting", "Ironing", "Mending"],
          datasets: [{
          label: 'Pearson',
          data: [1, 1, 0, 1],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
          },{
          label: 'srinath',
          data: [1, 0, 1, 0],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
          }
          ]},
          options: {
          scales: {
          yAxes: [{
          ticks: {
          beginAtZero:true
          }
          }]
          }
          }
          });





          share|improve this answer
























          • i want it using array. you just hard coded data to the array.what if i change the data in database? :(

            – Pasindu Senarath
            Jan 2 at 15:12






          • 1





            It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

            – Kunal Khivensara
            Jan 3 at 3:23













          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993633%2fbar-chart-is-not-grouped-properly-in-chartjs%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          You should pass the data in the below way to get the desired output. All the items which need to be showed in x-axis should be passed in the labels array, then each dataset i.e. "Pearson" and "srinath" should be passed as a separate dataset with data as corresponding values for the x-axis. Fiddle -> http://jsfiddle.net/Lzo5g01n/25/



          var ctx = document.getElementById("myChart").getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
          labels: ["CPI", "Cutting", "Ironing", "Mending"],
          datasets: [{
          label: 'Pearson',
          data: [1, 1, 0, 1],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
          },{
          label: 'srinath',
          data: [1, 0, 1, 0],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
          }
          ]},
          options: {
          scales: {
          yAxes: [{
          ticks: {
          beginAtZero:true
          }
          }]
          }
          }
          });





          share|improve this answer
























          • i want it using array. you just hard coded data to the array.what if i change the data in database? :(

            – Pasindu Senarath
            Jan 2 at 15:12






          • 1





            It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

            – Kunal Khivensara
            Jan 3 at 3:23


















          1














          You should pass the data in the below way to get the desired output. All the items which need to be showed in x-axis should be passed in the labels array, then each dataset i.e. "Pearson" and "srinath" should be passed as a separate dataset with data as corresponding values for the x-axis. Fiddle -> http://jsfiddle.net/Lzo5g01n/25/



          var ctx = document.getElementById("myChart").getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
          labels: ["CPI", "Cutting", "Ironing", "Mending"],
          datasets: [{
          label: 'Pearson',
          data: [1, 1, 0, 1],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
          },{
          label: 'srinath',
          data: [1, 0, 1, 0],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
          }
          ]},
          options: {
          scales: {
          yAxes: [{
          ticks: {
          beginAtZero:true
          }
          }]
          }
          }
          });





          share|improve this answer
























          • i want it using array. you just hard coded data to the array.what if i change the data in database? :(

            – Pasindu Senarath
            Jan 2 at 15:12






          • 1





            It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

            – Kunal Khivensara
            Jan 3 at 3:23
















          1












          1








          1







          You should pass the data in the below way to get the desired output. All the items which need to be showed in x-axis should be passed in the labels array, then each dataset i.e. "Pearson" and "srinath" should be passed as a separate dataset with data as corresponding values for the x-axis. Fiddle -> http://jsfiddle.net/Lzo5g01n/25/



          var ctx = document.getElementById("myChart").getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
          labels: ["CPI", "Cutting", "Ironing", "Mending"],
          datasets: [{
          label: 'Pearson',
          data: [1, 1, 0, 1],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
          },{
          label: 'srinath',
          data: [1, 0, 1, 0],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
          }
          ]},
          options: {
          scales: {
          yAxes: [{
          ticks: {
          beginAtZero:true
          }
          }]
          }
          }
          });





          share|improve this answer













          You should pass the data in the below way to get the desired output. All the items which need to be showed in x-axis should be passed in the labels array, then each dataset i.e. "Pearson" and "srinath" should be passed as a separate dataset with data as corresponding values for the x-axis. Fiddle -> http://jsfiddle.net/Lzo5g01n/25/



          var ctx = document.getElementById("myChart").getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
          labels: ["CPI", "Cutting", "Ironing", "Mending"],
          datasets: [{
          label: 'Pearson',
          data: [1, 1, 0, 1],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
          },{
          label: 'srinath',
          data: [1, 0, 1, 0],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
          }
          ]},
          options: {
          scales: {
          yAxes: [{
          ticks: {
          beginAtZero:true
          }
          }]
          }
          }
          });






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 2 at 11:27









          Kunal KhivensaraKunal Khivensara

          629413




          629413













          • i want it using array. you just hard coded data to the array.what if i change the data in database? :(

            – Pasindu Senarath
            Jan 2 at 15:12






          • 1





            It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

            – Kunal Khivensara
            Jan 3 at 3:23





















          • i want it using array. you just hard coded data to the array.what if i change the data in database? :(

            – Pasindu Senarath
            Jan 2 at 15:12






          • 1





            It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

            – Kunal Khivensara
            Jan 3 at 3:23



















          i want it using array. you just hard coded data to the array.what if i change the data in database? :(

          – Pasindu Senarath
          Jan 2 at 15:12





          i want it using array. you just hard coded data to the array.what if i change the data in database? :(

          – Pasindu Senarath
          Jan 2 at 15:12




          1




          1





          It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

          – Kunal Khivensara
          Jan 3 at 3:23







          It shows how the data should be passed to get the desired result, you need to have a business logic that will parse the data from the SQL server in the above-said format.

          – Kunal Khivensara
          Jan 3 at 3:23






















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993633%2fbar-chart-is-not-grouped-properly-in-chartjs%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas