CODEWITHSUNDEEP
javascriptarraysfor-loopchart.js
Size
Size

Reputation: 31

Chart.js date formatting use for

How would I format data using for() and putting that data inside datasets in Chart.js.
I tried and it's only showing the date labels and not the marks, but when I add data manually without using the data from inside for() everything works like it should.

var date = [];
var marks = [];

for (var i in data) {
  date.push(data[i].timestamp); // timestamp
  marks.push(data[i].count); // votes 
}
new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'votes',
      data: [{
          'date': '11/11',
          'votes': 55
        },
        {
          'date': '5/11',
          'votes': 13
        }
      ],
      borderColor: 'grey',
      backgroundColor: 'rgba(0, 0, 255, 0.5)'
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'date',
      yAxisKey: 'marks'
    },
    scales: {
      y: {
        ticks: {
          stepSize: 1
        }
      },
      x: {
        type: 'time',
        time: {
          parser: 'DD/MM/YY',
          unit: 'day',
          tooltipFormat: 'MMM DD'
        }
      },
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        }
      }],
    }
  }

Upvotes: 1

Views: 100

Answers (1)

Size
Size

Reputation: 31

I have it working now, just need to find a way to format the date without using numeric format. I think the reason it wasnt working at first is cause i was using an outdated version of chart.js.

var data = <?php print_r(json_encode($data)) ?> ;
var dates = [];
var vote = [];

for (var i in data) {
    dates.push(data[i].timestamp);
    vote.push(data[i].count);
}

var data = {
    labels: dates,
    type: "line",
    datasets: [{
        backgroundColor: '#585b72d9',
        data: vote,
    }],

};

var myBarChart = Chart.Line("examChart", {
    data: data,
});

Upvotes: 1

Related Questions