CODEWITHSUNDEEP
javascriptchart.js
atarikaltun
atarikaltun

Reputation: 33

How to reach to a chartjs chart's value?

I have a chartjs line chart that has multiple lines like that;

I have been trying to add a date-time selector but I am not able to update my chart because I don't get how to reach the datas of my chart. Here is my chart decleration;

var ctx = document.getElementById('canvas');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: time1, time2,
            datasets: [
                {
                label: 'Temperature - 1',
                data: temp1,
                backgroundColor: 'transparent',
                borderColor: 'red',
                borderWidth: 3
            },
            {
                label: 'Temperature - 2',
                data: temp2,
                backgroundColor: 'transparent',
                borderColor: 'purple',
                borderWidth: 3
            },
            {
                label: 'Humidity - 1',
                data: hum1,
                backgroundColor: 'transparent',
                borderColor: 'green',
                borderWidth: 3
            },
            {
                label: 'Humidity - 2',
                data: hum2,
                backgroundColor: 'transparent',
                borderColor: 'yellow',
                borderWidth: 3
            }]
        },
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            scales: {
                y: {
                    title: "Temperature/Humidity",
                    beginAtZero: true,
                    min: 10,
                    max: 60
                }
            }
        }
    });

time1, time2, temp1, temp2, hum1, hum2 are all array. When I want to update the chart using chart.update() function that I read at its own documentation, as I said I don't get it how to reach to data arrays like temp1, temp2. Something like myChart.data.datasets.data would not work, making them like json;

{first_data:{
            label: 'Temperature - 1',
            data: temp1,
            backgroundColor: 'transparent',
            borderColor: 'red',
            borderWidth: 3
        }},

Doesn't work also, how can I reach to temp1 for example?

SOLUTION:

Because of my carelessness I had asked a nonsense question. Because of myChart.data.datasets is an object, I am able to reach to temp1 like myChart.data.datasets[0].data, sorry everyone

Upvotes: 0

Views: 76

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

You will need to target the specific dataset you want to get the data from so to get the data of the Temperature - 1 dataset you will need to target it like this: myChart.data.datasets[0].data

Example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, options);

console.log(myChart.data.datasets[0].label)
console.log(myChart.data.datasets[0].data)
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Upvotes: 1

Related Questions