Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js - displaying multiple line charts using multiple labels

I need to draw a chart with 2 lines using Chart.js.
Each of this line has a different label set.
i.e. Chart 1:

1 -> 2  
2 -> 4   
3 -> 8  
4 -> 16

Chart 2:

1 -> 3  
3 -> 4  
4 -> 6  
6 -> 9

This following sample obviously does not work as it uses the labels from chart1. But is it possible to realize this with Chart.js?

    var config = {
        type: 'line',
        data: {
            labels: [1,2,3,4,5],
            datasets: [{
                label: 'Chart 1',
                data: [2,4,8,16],
            }, {
                label: 'Chart 2',
                data: [3,4,6,9],
            }]
        },

Other charting libs offers a (label/data) set as parameter so I could simply give a tupel as parameter
(ie. [(1->2),(2->4),(3->8)...]
for each chart and the lib will match everything.

Thanks

Edit: Detailed sample as requested:

var config = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [{
      label: 'Chart 1',
      data: [2, 4, 8, 16],
    }, {
      label: 'Chart 2',
      data: [3, 4, 6, 9],
    }]
  },
  options: {
    spanGaps: true,
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Labels'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Values'
        },
        ticks: {
          min: 1,
          max: 10,

        }
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('canvas').getContext('2d');
  window.myLine = new Chart(ctx, config);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<div style="width:90%;" class="container">
  <canvas id="canvas"></canvas><br>
</div>
like image 861
Mike Nathas Avatar asked Dec 24 '22 08:12

Mike Nathas


1 Answers

Use scatter type chart and showLine: true instead of line type with labels:

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
    	{
        label: 'Chart 1',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
    	},
      {
        label: 'Chart 2',
        data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(200, 0, 0, 1)'
    	}
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
like image 88
beaver Avatar answered Apr 30 '23 18:04

beaver