chartjs x-axis category label (with data from tabletop.js)

Question

my below code extracts data from google-sheets via tabletop.js as input to the chart.js. the problem is im unable to make the x-axis show. the chart simply displays the y-values itself as x-label. any help, please?

var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1BFPjROVypCGNeLxhk5_PW6PoOb4FDzJsL3DEOEdW_Rc/edit?usp=sharing';

function init() {
    Tabletop.init({
        key : publicSpreadsheetUrl,
        callback : showPlot,
        simpleSheet : true
    });
}

function showPlot(data, tabletop) {
    var xValues = [];
    var yValues = [];

    for (var i = 0; i < data.length; i++) {
        if (xValues.indexOf(data[i].x) === -1) {
            xValues.push(data[i].y);
        }
        if (yValues.indexOf(data[i].x) === -1) {
            yValues.push(data[i].y);
        }
    }

    var x = 0;
    var y = 0;
    for (i = 0; i < data.length; i++) {
        x = xValues.indexOf(data[i].x);
        y = yValues.indexOf(data[i].y);
    }

    var ctx = document.getElementById('chart').getContext('2d');
    var chart = new Chart(ctx, {
        type : 'line',
        data : {
            labels : xValues,
            datasets : [{
                    label : "Revenues",
                    fill : false,
                    backgroundColor : '#3498DB',
                    borderColor : '#3498DB',
                    data : yValues,
                }
            ],
        }
    });
}

init();

score -1 · Answer 1 · answered Jan 19 '18 at 07:39

I'm very sorry for any troubles caused, It was a typo that caused the error.... Managed to spot it.

for (var i = 0; i < data.length; i++) {
        if (xValues.indexOf(data[i].x) === -1) {
            xValues.push(data[i].y); // this should be x and not y.!

Thanks for those who responded..!

chartjs x-axis category label (with data from tabletop.js)

1 Answers1