Chart.js: Cant provide x and y coordinates for bar data

[Montrazul]

Hello,

i wanted to create a combined chart using the latest version of chart.js (2.1.6) a line and a bar chart in the same chart. This is my code:

`

function initCombinedChart() {

    $("canvas").each(function() {
        var config = getConfigCombined($(this).attr("id"));
        var context = $(this);
        var combined = new Chart(context, config);
    });
}

function getConfigCombined(id) {
    var currentId = id;
    var currentIdNumber = currentId.substring((currentId.lastIndexOf("_") + 1), currentId.length);
    var entry = $("#" + id).data("entry");

    var labelMeasure = $("#evaluations_combined_measures").data("txt");
    var labelInsulin = $("#evaluations_combined_insulins").data("txt");

    var datasetLine = dataCombinedLine(labelMeasure, entry);
    var datasetCombined = dataCombinedBar(labelInsulin, entry);

    var config = {
        type: "bar",
        data: {
            labels: labelsFromEntry(entry),
            datasets: []
        },
        options: {
            responsive: true,
            title: {
                display: false
            },
            legend: {
                position: "bottom"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: "hour",
                        format: "HH:mm",
                        tooltipFormat: "HH:mm",
                        displayFormats: {
                            hour: "HH:mm",
                            day: "HH:mm",
                            week: "HH:mm",
                            month: "HH:mm",
                            quarter: "HH:mm",
                            year: "HH:mm"
                        }
                    },
                    gridLines : {
                        display : false
                    }
                }, ],
                yAxes: [{
                    type: "linear",
                    display: true,
                    position: "left",
                    id: "y-axis-0",
                    gridLines: {
                        show: true,
                    }
                }, {
                    type: "linear",
                    display: true,
                    position: "right",
                    id: "y-axis-1",
                    gridLines: {
                        show: false
                    }
                }]
            },
        }
    }

    if (datasetLine != null) {
        config.data.datasets.push(datasetLine);
    }

    if (datasetCombined != null) {
        config.data.datasets.push(datasetCombined);
    }

    return config;
}

function labelsFromEntry(entry) {
    var result = [];
    var entryCombined;
    var entryMeasure;
    var entryInsulin;

    if (entry.indexOf("-") >= 0) {
        entryCombined = entry.split("-");
        entryMeasure = entryCombined[0];
        entryInsulin = entryCombined[1];
    } else {
        entryMeasure = entry;
        entryInsulin = "";
    }

    var entryMeasureArray = entryMeasure.split(";");
    var entryInsulinArray = entryInsulin.split(";");

    entryMeasureArray.forEach(function(entry) {
        var entryPair = entry.split(",");
        var date = parseFloat(entryPair[0]);
        var dateFormat = moment(date).format("HH:mm");

        if (!result.includes(dateFormat)) {
            result.push(dateFormat);
        }
    });

    entryInsulinArray.forEach(function(entry) {
        var entryPair = entry.split(",");
        var date = parseFloat(entryPair[0]);
        var dateFormat = moment(date).format("HH:mm");

        if (!result.includes(dateFormat)) {
            result.push(dateFormat);
        }
    });

    return result;
}

function dataCombinedLine(label, entry) {
    var dataset = {
        type: "line",
        label: label,   
        lineTension: 0,
        backgroundColor: "#4078A7",
        borderCapStyle: "butt",
        borderJoinStyle: "miter",
        borderColor: "#4078A7",
        pointRadius: 5,
        pointBorderColor: "#4078A7",
        pointBackgroundColor: "#FFFFFF",
        pointBorderWidth: 3,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#FFFFFF",
        pointHoverBorderWidth: 3,
        pointHitRadius: 5,
        data: dataCombinedLineFromEntries(entry),
        yAxisID : "y-axis-0",
        fill: false
    }

    return dataset;
}

function dataCombinedBar(label, entry) {
    var dataset = {
        type: "bar",
        label: label,
        backgroundColor: "#239471",
        borderCapStyle: "butt",
        borderJoinStyle: "miter",
        borderColor: "#239471",
        data: dataCombinedBarFromEntries(entry),
        yAxisID : "y-axis-1"
    }

    return dataset;
}

function dataCombinedLineFromEntries(entry) {
    var result = [];
    var entryMeasures = entry.split("-")[0];
    var entryMeasuresArray = entryMeasures.split(";");

    entryMeasuresArray.forEach(function(entry) {
        var entryPair = entry.split(",");
        var date = parseFloat(entryPair[0]);
        var value = entryPair[1];

        var data = {
            x: moment(date).format("HH:mm"),
            y: entryPair[1]
        }

        result.push(data);
    });

    return result;
}

function dataCombinedBarFromEntries(entry) {
    var result = [];

    if (entry.indexOf("-") >= 0) {
        var entryInsulins = entry.split("-")[1];
        var entryInsulinsArray = entryInsulins.split(";");

        entryInsulinsArray.forEach(function(entry) {
            var entryPair = entry.split(",");
            var date = parseFloat(entryPair[0]);
            var value = entryPair[1];

            var data = {
                x: moment(date).format("HH:mm"),
                y: entryPair[1]
            }

            result.push(entryPair[1]);
        });
    }

    return result;
}

`

As you can see for the line data im doing the following:

        var data = {
            x: moment(date).format("HH:mm"),
            y: entryPair[1]
        }

        result.push(data);

Unfortunately this is not possible for bar data. If i do this for bar data:

            var data = {
                x: moment(date).format("HH:mm"),
                y: entryPair[1]
            }

            result.push(data);

Instead of this:

            var data = {
                x: moment(date).format("HH:mm"),
                y: entryPair[1]
            }

            result.push(entryPair[1]);

The bar data is never showing up. Isnt there a similar functionality for bar data like it is for line data since there is no match between my line and my bar data. Just because i have a line data value for 08:00 o'clock that does not mean that there is a bar data value for 08:00 o'clock. And also there does not have to be a matching line data value for bar data.

[etimberg]

@Montrazul can you drop this in a fiddle?

[Montrazul]

Sure, https://jsfiddle.net/av15kuwj/6/

I just noticed that there are more things not correct. First thing is that beginAtZero: true seems to be ignored for the yAxes of the bar chart (you cant see the first bar). Second thing is, that the first and the last bar are overlapping with the yAxis

Here i used only y-value for the bar data. but as i said i would like to be able to use x and y values like i did for the line data so that the line and bar data are completely independent from each other.

Also the

gridLines: {
    show: false
}

for the bar data is ignored.

[JewelsJLF]

+1 I also would like to specify my bar and line chart data in sparse format: {x: value, y: value}

I'm already storing my data in sparse format and when it is updated the chart is not two-way bound b/c the data is an array of values rather than an array of objects which would be mapped to the source object.

[SesioN]

+1 👍

I've also ran into this issue, can have data from serval logfiles, where each can have a different log interval. Am displaying multiple graphs at the same time, which can be from several logfiles at once, meaning I need the possibility to have the data stored as with X / Y per entry.

So I tried using the sparse format but as it turns out it isn't supported for bars and so far I don't see any workaround for this issue?

[maxflex]

+1 👍

I have a perfectly working time scale line chart with X-Y data, and when I switch the type to bar – it breaks