Help: Can't display data in map

[mouise1111]

Hi, I am trying to display some static data on the heatmap. Here is my current code, I don't understand what I am doing wrong.

const cal = new CalHeatmap();

var data = [
  { date: '2024-06-26', habit: 1 },
  { date: '2024-06-25', habit: 0 },
  { date: '2024-06-24', habit: 1 },
];

cal.paint({
  range: 1,
  itemSelector: "#cal-heatmap-year",
  domain: { type: 'year' },
  subDomain: { type: 'day' },
  theme: 'dark',
  data: {
    source: data,
    type: 'json', // Specify the type of data source
    x: 'date', // Property name for the date
    y: 'habit', // Property name for the value
    groupY: false, // No grouping needed for binary data
  },
  scale: {
    color: {
      scheme: 'Cool',
      type: 'linear',
      domain: [0, 1], // Domain adjusted for binary data
    },
  },
});

Kind regards.

[John4650-hub]

Also having the same issue,i have noticed though that most examples use render() which is reactjs. Can't the heatmap be used without the render() function?

[wa0x6e]

Also having the same issue,i have noticed though that most examples use render() which is reactjs. Can't the heatmap be used without the render() function?

The library can be used without react, the render() function is used only because the documentation script is using react to render live example

[John4650-hub]

But still, it won't work

[Pin0]

I'm running in the same issue.

Edit: found this one: https://github.com/wa0x6e/cal-heatmap/issues/516 where ISS-Ltd-Web found out you have to add the x and y properties in the data.

working example:

const heatmap_options = {
    itemSelector: "#cal-heatmap",
    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: '2024-01-01', value: 3 },
            { date: '2024-01-02', value: 6 },
        ],
        x: (datum) => +new Date(datum['date']),
        y: (datum) => +datum['value']
    },
    verticalOrientation: false,
    animationDuration: 500,
    theme: 'light',
    scale: {
        color: {
            scheme: 'Cool',
            type:   'linear'
        },
    },
    //range: number,
    //label: LabelOptions,
};

const calHeatmap = new CalHeatmap();
calHeatmap.paint(heatmap_options);

[John4650-hub]

@Pin0, thanks it work as soon as i included x and y properties