ChartJS and MomentJS - showing data - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

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

Description

ChartJS and MomentJS - showing data

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js - Time Scale Data</title> 
   </head> 
   <body translate="no"> 
      <div style="width:45%; float: left"> 
         <canvas id="chart1"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
var getData = function() {
  var dummyDataset = [//from  www  .j  ava 2s  .c om
    '2007-11-09T00:00:00.000Z',
    '2006-08-04T00:00:00.000Z',
    '2006-08-06T00:00:00.000Z',
    '2008-01-10T00:00:00.000Z'
  ];
  return dummyDataset.map(function(datum) {
    var myMoment = moment(datum);
    return {
      x: myMoment,
      y: parseInt(myMoment.format('YYYY')),
    };
  });
};
var ctx = document.getElementById("chart1").getContext("2d");
var myScatter = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "My First dataset",
      borderColor: 'rgb(255, 99, 132)',
      fill: false,
      pointRadius: 4,
      pointHoverRadius: 8,
      showLine: false,
      data: getData()
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Random Data'
    },
    legend: {
      display: true,
      labels: {
        fontSize: 10,
        boxWidth: 20
      }
    },
    elements: {
      point: {
        pointStyle: 'rect'
      }
    },
    hover: {
      mode: 'nearest'
    },
    scales: {
      xAxes: [{
        type: 'time',
        position: 'bottom',
        scaleLabel: {
          display: true,
          labelString: 'Months'
        },
        time: {
          unit: 'month',
          displayFormats: {
            month: 'MM'
          },
        }
      }],
      yAxes: [ {
        type: 'linear',
        ticks: {
          min: 2005,
          max: 2015,
          stepSize: 1
        },
        scaleLabel: {
          display: true,
          labelString: 'Year'
        }
      }]
    }
  }
});
   
      </script>  
   </body>
</html>

Related Tutorials