katogiso · December 31, 2016 05:08
diff --git a/chartjs_scatter_base_index.html b/chartjs_scatter_base_index.html
 <!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>
	<!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>