SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!doctype html>
<html>

<head>
    <title>Scatter Chart Multi Axis</title>
    <script src="../dist/Chart.bundle.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width:75%">
        <div>
            <canvas id="canvas"></canvas>
        </div>
    </div>
    <button id="randomizeData">Randomize Data</button>
    <script>
    var randomScalingFactor = function() {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    };
    var randomColor = function(opacity) {
        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
    };

    var scatterChartData = {
        datasets: [{
            label: "My First dataset",
            xAxisID: "x-axis-1",
            yAxisID: "y-axis-1",
			data: [{
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}]
        }, {
            label: "My Second dataset",
            xAxisID: "x-axis-1",
            yAxisID: "y-axis-2",
            data: [{
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}, {
				x: randomScalingFactor(),
				y: randomScalingFactor(),
			}]
        }]
    };

    $.each(scatterChartData.datasets, function(i, dataset) {
        dataset.borderColor = randomColor(0.4);
        dataset.backgroundColor = randomColor(0.1);
        dataset.pointBorderColor = randomColor(0.7);
        dataset.pointBackgroundColor = randomColor(0.5);
        dataset.pointBorderWidth = 1;
    });

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myScatter = Chart.Scatter(ctx, {
        	data: scatterChartData,
        	options: {
	            responsive: true,
	            hoverMode: 'single',
            	title: {
	                display: true,
	                text: 'Chart.js Scatter Chart - Multi Axis'
	            },
	            scales: {
	            	xAxes: [{
	            		position: "bottom",
	            		gridLines: {
	            			zeroLineColor: "rgba(0,0,0,1)"
	            		}
	            	}],
	            	yAxes: [{
		                type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
		                display: true,
		                position: "left",
		                id: "y-axis-1",
		            }, {
		                type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
		                display: true,
		                position: "right",
		                reverse: true,
		                id: "y-axis-2",
		        
		                // grid line settings
		                gridLines: {
		                    drawOnChartArea: false, // only want the grid lines for one axis to show up
		                },
		            }],
	            }
	        }
        });
    };

    $('#randomizeData').click(function() {
        scatterChartData.datasets[0].data = [{
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}];
        scatterChartData.datasets[1].data = [{
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}, {
			x: randomScalingFactor(),
			y: randomScalingFactor(),
		}];
        window.myScatter.update();
    });
    </script>
</body>

</html>