Jump to content

Cannot get second yAxes to scale by right side 0-1


dodgeitorelse3
 Share

Go to solution Solved by dodgeitorelse3,

Recommended Posts

I have this code. The players works and scales to the left side 0-23 but online scales to left side 0-23 instead of right side 0-1. What am I doing wrong?

//arrays used in javascript
	//$labelsdb = array('2018-12-20 00:11', '2018-12-20 00:37', '2018-12-20 00:43', '2018-12-20 03:15', '2018-12-20 03:42', '2018-12-20 03:56', '2018-12-20 04:17', '2018-12-20 04:33', '2018-12-20 07:23', '2018-12-20 10:00', '2018-12-20 12:23', '2018-12-20 14:00', '2018-12-20 18:42', '2018-12-20 19:17', '2018-12-20 23:53');
	//$datadb = array(2,12,2,7,23,5,8,2,0,4,0,8,1,0,3);
	//$datadon = array(1,0,1,1,1,1,1,0,1,1,0,1,1,0,1);
	//$datadoff = array(0,1,0,0,0,0,0,1,0,0,1,0,0,1,0);
	
	var labelsdb = <?php echo json_encode($labelsdb); ?>; //array from database for dates and times
	
	var datadb = <?php echo json_encode($datadb); ?>; // array from database for number of players
	var datadon = <?php echo json_encode($datadon); ?>; // array from database for number of players
	var datadoff = <?php echo json_encode($datadoff); ?>; // array from database for number of players
	
	var todays_date = "20Dec2018"; // todays date
	
	//var ctx = document.getElementById("myChart").getContext('2d'); // points to canvas
	var ctx = document.getElementById("myChart"); // points to canvas
	ctx.style.backgroundColor = "#2F3136"; //canvas background color
	
	var myChart = new Chart(ctx, {
	
		type: 'line',
			data: {
				labels: labelsdb, //data from database for dates and times
				datasets: [{
					backgroundColor: '#593A45', // color for active players bars in graph
					label: 'Players', // label for legend 
					yAxisId: 'y-axis-players',
					data: datadb, //data from database for number of players
					borderWidth: 1, // border for active players bars in graph
					borderColor: '#F45E7F',
					steppedLine: true, //true keeps even line horizontal until change, false displays curved line
				},
				{
					yAxisId: 'y-axis-online',
					backgroundColor: '#E5E5E5', // color for active players bars in graph
					label: 'Online', // label for legend 
					data: datadon, //data from database for number of players
					borderWidth: 1, // border for active players bars in graph
					borderColor: '#CECECE',
					steppedLine: true, //true keeps even line horizontal until change, false displays curved line	
				},]
			},
			options: {
				responsive: true, //wheteher graph is responsive when zoom in or out
				maintainAspectRatio: false,
				legend: {
					labels: {
						fontColor: '#FFFFFF' // color of legend label
					}
				},
				scales: {
					xAxes: [{
						scaleLabel: {
							display: true,
							//labelString: updated, //displays date at very bottom of graph
							fontColor: '#FFFFFF',
							fontStyle: 'bold',
							fontSize: 14,
						},
						ticks: {
							autoSkip: false,
							maxTicksLimit: 24,
							maxRotation: 45, //rotate text for hours at bottom of graph
							minRotation: 45, //rotate text for hours at bottom of graph
							fontColor: '#FFFFFF', // color of hours at bottom of graph
							major: {
								enabled: true, // <-- This is the key line
								fontStyle: 'bold', //You can also style these values differently
								fontSize: 14 //You can also style these values differently
							}
						},
						type: 'time', //to show time at bottom of graph
						time: {
							unit: 'hour',
							displayFormats: {
							hour: 'hA', //example displays 9AM or 6PM
							stepSize: 1 //1 for each hour to display at bottom of graph, 2 to show every 2 hrs.
						   }
						},
						display: true,
						gridLines: {
							display: true, // display vertical gridline
							color: '#686868', //color of vertical gridlines
							zeroLineColor: '#686868' //colors first vertical grid line
						}
					}],
					yAxes: [{
						scaleLabel: {
							display: true, //display label at left vertical side of graph
							labelString: 'Players', //text to be displayed at left vertical side of graph
							fontColor: '#FFFFFF',
							fontStyle: 'bold',
							fontSize: 14,
							position: 'left', 
							id: 'y-axis-players',
							},
							
						ticks: {
							fontColor: '#FFFFFF', // color of numbers at left side of graph for number of players
							stepSize: 1 // 1 is to display 0, 1, 2, 3 or 2 will display 0, 2, 4, 6
						},
						gridLines: {
							display: true, //display horizontal gridlines
							color: "#686868" //color of horizontal gridlines
						}
					},{
					   scaleLabel: { 
							display: true, 
							labelString: 'Online', 
							fontColor: '#E5E5E5',
							fontStyle: 'bold',
							fontSize: 14 },
							position: 'right', 
							id: 'y-axis-online',
							//type: 'linear',
								ticks: {
									min: 0, 
									beginAtZero: true, 
									stepSize: 1, 
									max: 1, 
									fontColor: '#E5E5E5',
									fontStyle: 'bold',
									fontSize: 14
								},
								ticks: {
									fontColor: '#FFFFFF', // color of numbers at right side of graph for online
									stepSize: 1 
								},
									gridLines: {
										display: true, //display horizontal gridlines
										color: "#686868" //color of horizontal gridlines
									}
					}],
				}
			}
	});
	
	

 

Edited by dodgeitorelse3
tagged as javascript
Link to comment
Share on other sites

  • Solution
	
	var labelsdb = <?php echo json_encode($labelsdb); ?>; //array from database for dates and times
	
	var datadb = <?php echo json_encode($datadb); ?>; // array from database for number of players
	var datadon = <?php echo json_encode($datadon); ?>; // array from database for number of players
	var datadoff = <?php echo json_encode($datadoff); ?>; // array from database for number of players
	

	var ctx = document.getElementById("myChart"); // points to canvas
	ctx.style.backgroundColor = "#2F3136"; //canvas background color
	
	var myChart = new Chart(ctx, {
	
		type: 'line',
		data: {
			labels: labelsdb,
				datasets: [{
					label: 'Players',
					yAxisID: 'A',
					backgroundColor: '#593A45', // color for active players bars in graph
					borderWidth: 1, // border for active players bars in graph
					borderColor: '#F45E7F',
					steppedLine: true, //true keeps even line horizontal until change, false displays curved line
					data: datadb
				}, {
				    label: 'Online',
					yAxisID: 'B',
					backgroundColor: '#808080', // color for active players bars in graph
					borderWidth: 1, // border for active players bars in graph
					borderColor: '#CECECE',
					steppedLine: true, //true keeps even line horizontal until change, false displays curved line	
					data: datadon
				}]
			},
		options: {
			responsive: true, //whether graph is responsive when zoom in or out
			maintainAspectRatio: false,
				scales: {
					xAxes: [{
						scaleLabel: {
							display: true,
							fontColor: '#FFFFFF',
							fontStyle: 'bold',
							fontSize: 14
						},
						ticks: {
							autoSkip: false,
							maxTicksLimit: 24,
							maxRotation: 45, //rotate text for hours at bottom of graph
							minRotation: 45, //rotate text for hours at bottom of graph
							fontColor: '#FFFFFF', // color of hours at bottom of graph
								major: {
									enabled: true, // <-- This is the key line
									fontStyle: 'bold', //You can also style these values differently
									fontSize: 14 //You can also style these values differently
								}
						},
						type: 'time', //to show time at bottom of graph
							time: {
								unit: 'hour',
								displayFormats: {
								hour: 'hA', //example displays 9AM or 6PM
								stepSize: 1 //1 for each hour to display at bottom of graph, 2 to show every 2 hrs.
							   }
							},
						display: true,
							gridLines: {
								display: true, // display vertical gridline
								color: '#686868', //color of vertical gridlines
								zeroLineColor: '#686868' //colors first vertical grid line
							}
					}],
					yAxes: [{
						id: 'A',
						type: 'linear',
						position: 'left',
							ticks: {
								fontColor: '#FFFFFF', // color of numbers at left side of graph for number of players
								stepSize: 1
							},
							gridLines: {
								display: true, //display horizontal gridlines
								color: "#686868" //color of horizontal gridlines
							},
							scaleLabel: {
								display: true, //display label at left vertical side of graph
								labelString: 'Players', //text to be displayed at left vertical side of graph
								fontColor: '#FFFFFF',
								fontStyle: 'bold',
								fontSize: 14,
							}
					}, {
						id: 'B',
						type: 'linear',
						position: 'right',
							ticks: {
								max: 1,
								min: 0,
								stepSize: 1,
								fontColor: '#808080',
								fontStyle: 'bold',
								fontSize: 14
							},
							gridLines: {
								display: true, //display horizontal gridlines
								color: "#686868" //color of horizontal gridlines
							},
							scaleLabel: { 
								display: true, 
								labelString: 'Online', 
								fontColor: '#808080',
								fontStyle: 'bold',
								fontSize: 14 
							}
						}]
			}
		}
	});
	

Solved!!

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.