Charts.js Multi Line scales. See value curve

user_18490686 0
Viewed 61

Hello everybody and thanks in advance. I am using a multi line charts.js to compare follower data from different accounts. I managed to solve the dynamic filling of the graph with the following JS code:

$(document).ready(function() {

  // Read data file with random string generated by current time
  // to bypass browser cache, and create chart
  $.get('db/consultas/comparaFollowers.php', {'_': $.now()}, function(csvString) {

    var datafollowers = Papa.parse(csvString).data;
    var timeLabelsF = datafollowers.slice(1).map(function(row) { return row[0]; });

    var datasetsF = [];
    for (var i = 1; i < datafollowers[0].length; i++) {
      datasetsF.push(
        {
          label: datafollowers[0][i], // column name
          data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false // `true` for area charts, `false` for regular line charts
        }
      )
    }

    // Get container for the chart
    var ctx = document.getElementById('ChartCompFollowers').getContext('2d');

    new Chart(ctx, {
      type: 'line',

      data: {
        labels: timeLabelsF,
        datasets: datasetsF,
      },
      
      options: {
        legend: {
          display: true,
        },
        maintainAspectRatio: false,
        scales: {
          max: 5,
          xAxes: [{
            time: {
              unit: 'date'
            },
            gridLines: {
              display: false,
              drawBorder: false
            },
            ticks: {
              maxTicksLimit: 10,

            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: false,
              
            },
            gridLines: {
              color: "rgb(234, 236, 244)",
              zeroLineColor: "rgb(234, 236, 244)",
              drawBorder: false,
              borderDash: [2],
              zeroLineBorderDash: [2]
            }
          }],
        },
        tooltips: {
          displayColors: true,
          callbacks: {
            label: function(tooltipItem, all) {
              return all.datasets[tooltipItem.datasetIndex].label
                + ': ' + tooltipItem.yLabel.toLocaleString();
            }
          }
        },
        plugins: {
          colorschemes: {
            /*
              Replace below with any other scheme from
              https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html
            */
            scheme: 'office.Excel16'
          }
        }
      }
    });

  });

});

The problem now is that if the values of the different profiles are very far apart, the lines are seen as two straight lines, the variations in the time line not being appreciated.

Imagen1

I would like to know if there is any way to eliminate or modify the scale, so that the value change curve can be seen even though the data is far away.

Imagen2

Thank you very much for your help.

chart.js php javascript
2 Answers

Your first image is as close as it can get with plain Chart.js with a single scale, Chart.js does not support scale breaks.

You can add a second Y axis and map the datasets to different scales:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12000, 19000, 3000, 5000, 2000, 3000],
        borderColor: 'orange',
        yAxisID: 'y'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink',
        yAxisID: 'y2'
      }
    ]
  },
  options: {
    scales: {
      y: {
        position: 'left'
      },
      y2: {
        position: 'right'
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

Edit:
Notice you are still using V2 of the lib

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12000, 19000, 3000, 5000, 2000, 3000],
        borderColor: 'orange',
        yAxisID: 'y'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink',
        yAxisID: 'y2'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'y',
        position: 'left'
      }, {
        id: 'y2',
        position: 'right'
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

user_86829830

Creating different Y-Axes worked fine for me, albeit partially. modify the JS code to create an axis for each compared element:

var datasetsF = [];
    for (var i = 1; i < datafollowers[0].length; i++) {
      datasetsF.push(
        {
          label: datafollowers[0][i], // column name
          data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false, // `true` for area charts, `false` for regular line charts
          yAxisID: 'y' + i
        }
      )
    }

Well, with that modification version 2 of charts does not work as indicated. And in Version 3, among other things, the colors are deconfigured as seen in the image.

imagen1

The problem is that I have many graphics and I would have to adapt the code of all the graphics to work with version 3 (which I will do but I am very new to this and it would take time to fix them all). Is there any way to do the same with version 2? And how could I do so that all the axes and created would not be seen?

user_184906860
Related