Jump to content

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

dodgeitorelse3

By dodgeitorelse3
in Javascript Help

 Share
Go to solution Solved by dodgeitorelse3,

Recommended Posts

dodgeitorelse3 Advanced Member

dodgeitorelse3

Posted
Posted (edited)

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
  • Solution
dodgeitorelse3 Advanced Member

dodgeitorelse3

Posted
  • Author
  • Solution
Posted 
	
	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!!

This thread is more than a year old. Please don't revive it unless you have something important to add.

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
Go to topic listing
×
×
  • 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.