Create a gist now

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<head lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var firstData = genData();
var secondData = genData();
var myChart = new Chart( ctx, {
type: 'line',
data: {
datasets: [
{
label: "1st Data",
data: firstData ,
pointStyle: 'star',
pointRadius: 5,
pointBorderRadius: 5,
borderColor: '#000',
showLine: false
},
{
label: "2nd Data",
data: secondData,
pointRadius: 5,
pointBorderRadius: 5,
borderColor: '#000',
showLine: false
}
]
},
options: {
responsive: true,
scales: {
xAxes:[{
type: 'linear',
position: 'bottom'
}]
},
legend: {
position: 'bottom',
lineWidth: 0,
labels: {
fontSize: 12,
boxWidth: 12,
usePointStyle: true,
generateLabels: function(chart){
return chart.data.datasets.map( function( dataset, i ){
return {
text: dataset.label,
fillStyle: dataset.backgroundColor,
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: [],
lineDashOffset: 0,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.pointBorderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
datasetIndex: i // extra data used for toggling the datasets
};
})
}
}
},
}
});
function genData(){
var size = getRandomInt( 20, 100 );
var data = [];
for( var i = 0; i < size; i++ ) {
var x = getRandomInt( 0, 100 );
var y = getRandomInt( 0, 100 );
data.push( { x:x, y:y });
}
return data;
};
// Following functions borrowed from MDN
function getRandomInt(min, max) {
return Math.floor( Math.random() * (max - min + 1) ) + min;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment