render stacked area chart of JSON dataset - Javascript Chart.js

Javascript examples for Chart.js:Chart Json Data

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

Description

render stacked area chart of JSON dataset

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>ChartJS stacked line chart</title> 
   </head> 
   <body translate="no"> 
      <canvas id="myChart" width="400" height="400"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> 
      <script>
      var ctx = document.getElementById("myChart").getContext("2d");
var colors = {//w ww .j ava  2 s. c  om
  green: {
    fill: '#e0eadf',
    stroke: '#5eb84d' },
  lightBlue: {
    stroke: '#6fccdd' },
  darkBlue: {
    fill: '#92bed2',
    stroke: '#3282bf' },
  purple: {
    fill: '#8fa8c8',
    stroke: '#75539e' } };
var loggedIn = [26, 36, 42, 38, 40, 30, 12];
var available = [34, 44, 33, 24, 25, 28, 25];
var availableForExisting = [16, 13, 25, 33, 40, 33, 45];
var unavailable = [5, 9, 10, 9, 18, 19, 20];
var xData = [13, 14, 15, 16, 17, 18, 19];
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: xData,
    datasets: [{
      label: "Unavailable",
      fill: true,
      backgroundColor: colors.purple.fill,
      pointBackgroundColor: colors.purple.stroke,
      borderColor: colors.purple.stroke,
      pointHighlightStroke: colors.purple.stroke,
      borderCapStyle: 'butt',
      data: unavailable },
    {
      label: "Available for Existing",
      fill: true,
      backgroundColor: colors.darkBlue.fill,
      pointBackgroundColor: colors.darkBlue.stroke,
      borderColor: colors.darkBlue.stroke,
      pointHighlightStroke: colors.darkBlue.stroke,
      borderCapStyle: 'butt',
      data: availableForExisting },
    {
      label: "Available",
      fill: true,
      backgroundColor: colors.green.fill,
      pointBackgroundColor: colors.lightBlue.stroke,
      borderColor: colors.lightBlue.stroke,
      pointHighlightStroke: colors.lightBlue.stroke,
      borderCapStyle: 'butt',
      data: available },
    {
      label: "Logged In",
      fill: true,
      backgroundColor: colors.green.fill,
      pointBackgroundColor: colors.green.stroke,
      borderColor: colors.green.stroke,
      pointHighlightStroke: colors.green.stroke,
      data: loggedIn }] },
  options: {
    responsive: false,
    // Can't just just `stacked: true` like the docs say
    scales: {
      yAxes: [{
        stacked: true }] },
    animation: {
      duration: 750 } } });
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials