Display multiple datasets from array with chart.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Display multiple datasets from array with chart.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart For SO Answer</title> 
   </head> 
   <body translate="no"> 
      <canvas id="myChart" width="500" height="500"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var ctx = document.getElementById("myChart").getContext("2d");
var data = {/*  w  w w. j  a v  a 2 s. c  o m*/
  Nippes: [
    {
      annee: "1951",
      totalnaissance: "1"
    },
    {
      annee: "1986",
      totalnaissance: "1"
    },
    {
      annee: "1987",
      totalnaissance: "1"
    },
    {
      annee: "1992",
      totalnaissance: "2"
    }
  ],
  "Nord-Est": [
    {
      annee: "1995",
      totalnaissance: "1"
    }
  ],
  Ouest: [
    {
      annee: "1994",
      totalnaissance: "2"
    },
    {
      annee: "1995",
      totalnaissance: "1"
    }
  ],
  "Sud-Est": [
    {
      annee: "1985",
      totalnaissance: "1"
    }
  ]
};
var departments = [];
var annees = [];
for (var department in data) {
  if (data.hasOwnProperty(department)) {
    var departmentData = data[department];
    getYears(departmentData);
  }
}
annees.sort();
for (var department in data) {
  if (data.hasOwnProperty(department)) {
    var departmentData = data[department]; //getDataForDepartment(i);
    var totalnaissanceData = getTotalNaissanceDataForDep(departmentData);
    var departmentObject = prepareDepartmentDetails(
      department,
      totalnaissanceData
    );
    departments.push(departmentObject);
  }
}
var chartData = {
  labels: annees,
  datasets: departments
};
var chart = new Chart(ctx, {
  type: "line",
  data: chartData,
  options: {}
});
function getDataForDepartment(index) {
  return data[i][Object.keys(data[i])[0]];
}
function getYears(departmentData) {
  for (var j = 0; j < departmentData.length; j++) {
    if (!annees.includes(departmentData[j].annee)) {
      annees.push(departmentData[j].annee);
    }
  }
}
function getTotalNaissanceDataForDep(departmentData) {
  var totalnaissanceData = [];
  for (var j = 0; j < annees.length; j++) {
    var currentAnnee = annees[j];
    var currentTotalNaissance = null;
    for (var k = 0; k < departmentData.length; k++) {
      if (departmentData[k].annee === currentAnnee) {
        currentTotalNaissance = departmentData[k].totalnaissance;
        break;
      }
    }
    totalnaissanceData.push(currentTotalNaissance);
  }
  return totalnaissanceData;
}
function prepareDepartmentDetails(departmentName, totalnaissanceData) {
  var dataColor = getRandomColor();
  return {
    label: departmentName,
    data: totalnaissanceData,
    backgroundColor: "transparent",
    borderColor: dataColor, //"#3e95cd",
    pointBackgroundColor: dataColor,
    fill: false,
    lineTension: 0,
    pointRadius: 5
  };
}
function getRandomColor() {
  var letters = "0123456789ABCDEF".split("");
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials