wa0x6e / cal-heatmap

Cal-Heatmap is a javascript charting library to create a time-series calendar heatmap
http://cal-heatmap.com
MIT License
2.66k stars 291 forks source link

Data not loading #516

Closed ISS-Ltd-Web closed 3 months ago

ISS-Ltd-Web commented 3 months ago

I'm having trouble displaying any data on the heatmap at all. Either passing the data on first paint, or trying to add it later on an additional paint call doesn't seem to give any effect. Feeding from the changes_data variable, or injecting JSON directly into the data value (as below) gives no visual data on the heatmap.

I'm using the basic data format suggested in the docs (date: yyyy-mm-dd, value: x)

A mouseover event on domains which gives the value and timestamp also seems to confirm no data is being loaded into the heatmap.

Cycling through a few different domain/subdomain view variations, the data isn't present in any form (year > day, month > day etc.)

Code is below:

` var changes_data = [ {date: '2024-01-01', value: 1}, {date: '2024-01-02', value: 2}, {date: '2024-01-03', value: 3}, {date: '2024-01-04', value: 4}, {date: '2024-01-05', value: 2}, {date: '2024-01-06', value: 4}, {date: '2024-01-07', value: 2}, ];

console.log(changes_data);

var changes_options = {
    itemSelector: "#about_changegraph",
    domain: {type: 'year'},
    subDomain: {type: 'day'},
    date: {
        locale: {weekStart: 1},
        highlight: [new Date()],
        min: new Date('2024-01-01'),
        max: new Date('2024-12-31'),
    },
    data: {source: [
        { date: '2012-01-01', value: 3 },
        { date: '2012-01-02', value: 6 },
    ]},
    verticalOrientation: false,
    animationDuration: 500,
    theme: 'light',
    scale: {
        color: {
            scheme: 'Cool',
            type:   'linear'
        },
    },
    //range: number,
    //label: LabelOptions,
};

about_change_graph = new CalHeatmap();
about_change_graph.paint(changes_options);

`

Perhaps I've missed something here.

ISS-Ltd-Web commented 3 months ago

For anybody else in a similar situation, I forgot the x and y parameters in the data object. See working code:

data: { source: changes_data, x: (datum) => +new Date(datum['date']), y: (datum) => +datum['value'], },