ChartJS Line Chart

Multiple Line Chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

// récupérer datajson avec appel AJAX / JQuery basé sur fichier PHP
// un truc du genre :
// $.getJSON("chemin/monscript.php", ...)

// test en définissant le contenu variable manuellement
var datajson = [{"mois":1,"v1":56066,"v2":267,"v3":120},{"mois":2,"v1":4119,"v2":187,"v3":617},{"mois":3,"v1":7941,"v2":346,"v3":796},{"mois":4,"v1":21640,"v2":356,"v3":993},{"mois":5,"v1":48836,"v2":669,"v3":2407},{"mois":6,"v1":44853,"v2":648,"v3":4056},{"mois":7,"v1":40625,"v2":779,"v3":4169},{"mois":8,"v1":25383,"v2":501,"v3":2138},{"mois":9,"v1":13772,"v2":183,"v3":615},{"mois":10,"v1":6378,"v2":144,"v3":613},{"mois":11,"v1":2197,"v2":119,"v3":115},{"mois":12,"v1":1276,"v2":0,"v3":4}]

var options = {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12], // <= à récupérer de datajson. Comment ?
    datasets: [
	    {
	      label: 'v2',
	      data: [267,187,346,356,669,648,779,501,183,144,119,0], // <= à récupérer de datajson. Comment ?
      	borderWidth: 1
    	},	
			{
				label: 'v3',
				data: [120,617,796,993,2407,4056,4169,2138,615,613,115,4], // <= à récupérer de datajson. Comment ?
				borderWidth: 1
			}
		]
  },
  options: {
  	scales: {
    	yAxes: [{
        ticks: {
					reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);