Jump to content

dodgeitorelse3

Members
  • Posts

    150
  • Joined

  • Last visited

  • Days Won

    2

Community Answers

  1. dodgeitorelse3's post in Cannot get second yAxes to scale by right side 0-1 was marked as the answer   
    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!!
×
×
  • 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.