search

wa0x6e / cal-heatmap

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

data is not filled into cal boxes #466

Closed devprabal closed 7 months ago

devprabal commented 7 months ago

Problem

I have written a single page html-only file which takes data from a csv file. However, the data is not rendered in the boxes. The boxes appear empty.

Approaches

What I have tried so far ?

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <script src="https://d3js.org/d3.v7.min.js"></script>
        <script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
        <title>24k Tracks</title>
    </head>
    <body>
        <div id="cal-heatmap"></div>
        <script>
            const cal = new CalHeatmap();
            // const data = [
            //     { date: '2024-01-01', energylevel: 0 },
            //     { date: '2024-01-02', energylevel: 0 },
            //     { date: '2024-01-03', energylevel: 3 },
            //     { date: '2024-01-04', energylevel: 4 },
            //     { date: '2024-01-05', energylevel: 4 },
            //     { date: '2024-01-06', energylevel: 2 },
            //     { date: '2024-01-07', energylevel: 0 }
            // ];
            cal.paint(
            {
                itemSelector: '#cal-heatmap',
                data: {
                    // source: './records/gym_track.csv',
                    // type: 'csv',

                    // source: data,
                    type: 'json',
                    source: './records/gym_track.json',
                    x: 'date',
                    y: 'energylevel',
                    groupY: 'max'
                },
                date: { start: new Date('2024-01-01') },
                range: 1,
                scale: { color: { type: 'linear', scheme: 'PRGn', domain: [0, 5] } },
                domain: {
                    type: 'year',
                    label: { text: null }
                },
                subDomain: { type: 'day', radius: 0 },
            }
            );
        </script>

    </body>
</html>

Sample csv

date,energylevel,onlycardio
2024-01-01,0,0,
2024-01-02,0,0,
2024-01-03,3,0,
2024-01-04,4,0,
2024-01-05,4,1,
2024-01-06,2,0,
2024-01-07,0,0,
2024-01-08,3,0,
2024-01-09,0,0,
2024-01-10,4,0,
2024-01-11,4,0,
2024-01-12,0,0,
2024-01-13,3,0,
2024-01-14,0,0,
2024-01-15,0,0,
2024-01-16,5,0,
2024-01-17,4,1,
2024-01-18,0,0,
2024-01-19,3,0,
2024-01-20,0,0,

Sample json

[
    { "date": "2024-01-01", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-02", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-03", "energylevel": "3", "onlycardio": "0"},
    { "date": "2024-01-04", "energylevel": "4", "onlycardio": "0"},
    { "date": "2024-01-05", "energylevel": "4", "onlycardio": "1"},
    { "date": "2024-01-06", "energylevel": "2", "onlycardio": "0"},
    { "date": "2024-01-07", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-08", "energylevel": "3", "onlycardio": "0"},
    { "date": "2024-01-09", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-10", "energylevel": "4", "onlycardio": "0"},
    { "date": "2024-01-11", "energylevel": "4", "onlycardio": "0"},
    { "date": "2024-01-12", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-13", "energylevel": "3", "onlycardio": "0"},
    { "date": "2024-01-14", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-15", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-16", "energylevel": "5", "onlycardio": "0"},
    { "date": "2024-01-17", "energylevel": "4", "onlycardio": "1"},
    { "date": "2024-01-18", "energylevel": "0", "onlycardio": "0"},
    { "date": "2024-01-19", "energylevel": "3", "onlycardio": "0"},
    { "date": "2024-01-20", "energylevel": "0", "onlycardio": "0"}
]

Output

image

wa0x6e commented 7 months ago

When trying to losd data with csv, do you see the file loading correctly via the network or console tab?

My guess is that something like CORS blocking the file

On Sat, Jan 20, 2024 at 15:51 Prabal Dev @.***> wrote:

Problem

I have written a single page html-only file which takes data from a csv file. However, the data is not rendered in the boxes. The boxes appear empty. Approaches

What I have tried so far ?

  • If i keep the data in 24k Tracks 
    <body>
    <div id="cal-heatmap"></div>
    <script>
        const cal = new CalHeatmap();
        // const data = [
        //     { date: '2024-01-01', energylevel: 0 },
        //     { date: '2024-01-02', energylevel: 0 },
        //     { date: '2024-01-03', energylevel: 3 },
        //     { date: '2024-01-04', energylevel: 4 },
        //     { date: '2024-01-05', energylevel: 4 },
        //     { date: '2024-01-06', energylevel: 2 },
        //     { date: '2024-01-07', energylevel: 0 }
        // ];
        cal.paint(
        {
            itemSelector: '#cal-heatmap',
            data: {
                // source: './records/gym_track.csv',
                // type: 'csv',

                // source: data,
                type: 'json',
                source: './records/gym_track.json',
                x: 'date',
                y: 'energylevel',
                groupY: 'max'
            },
            date: { start: new Date('2024-01-01') },
            range: 1,
            scale: { color: { type: 'linear', scheme: 'PRGn', domain: [0, 5] } },
            domain: {
                type: 'year',
                label: { text: null }
            },
            subDomain: { type: 'day', radius: 0 },
        }
        );
    </script>

</body></html>

    Sample csv

    date,energylevel,onlycardio 2024-01-01,0,0, 2024-01-02,0,0, 2024-01-03,3,0, 2024-01-04,4,0, 2024-01-05,4,1, 2024-01-06,2,0, 2024-01-07,0,0, 2024-01-08,3,0, 2024-01-09,0,0, 2024-01-10,4,0, 2024-01-11,4,0, 2024-01-12,0,0, 2024-01-13,3,0, 2024-01-14,0,0, 2024-01-15,0,0, 2024-01-16,5,0, 2024-01-17,4,1, 2024-01-18,0,0, 2024-01-19,3,0, 2024-01-20,0,0,

    Sample json

    [ { "date": "2024-01-01", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-02", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-03", "energylevel": "3", "onlycardio": "0"}, { "date": "2024-01-04", "energylevel": "4", "onlycardio": "0"}, { "date": "2024-01-05", "energylevel": "4", "onlycardio": "1"}, { "date": "2024-01-06", "energylevel": "2", "onlycardio": "0"}, { "date": "2024-01-07", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-08", "energylevel": "3", "onlycardio": "0"}, { "date": "2024-01-09", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-10", "energylevel": "4", "onlycardio": "0"}, { "date": "2024-01-11", "energylevel": "4", "onlycardio": "0"}, { "date": "2024-01-12", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-13", "energylevel": "3", "onlycardio": "0"}, { "date": "2024-01-14", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-15", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-16", "energylevel": "5", "onlycardio": "0"}, { "date": "2024-01-17", "energylevel": "4", "onlycardio": "1"}, { "date": "2024-01-18", "energylevel": "0", "onlycardio": "0"}, { "date": "2024-01-19", "energylevel": "3", "onlycardio": "0"}, { "date": "2024-01-20", "energylevel": "0", "onlycardio": "0"} ]

    Output

    image.png (view on web) https://github.com/wa0x6e/cal-heatmap/assets/35391821/8e0b62ca-627f-42ab-befc-6007e8415bce

    — Reply to this email directly, view it on GitHub https://github.com/wa0x6e/cal-heatmap/issues/466, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADZAXNJKBMI4DX4DRBRHTTYPOAQ7AVCNFSM6AAAAABCDBLTXWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGA4TCOJXGAZDSNY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

devprabal commented 7 months ago

If i download the loaded file from the Network tab, it downloads well. I am not sure about the "file loading correctly" part. How do i check that?

wa0x6e commented 7 months ago

Look for errors in the developer tools console tab

On Sat, Jan 20, 2024 at 16:02 Prabal Dev @.***> wrote:

If i download the loaded file from the Network tab, it downloads well. I am not sure about the "file loading correctly" part. How do i check that?

— Reply to this email directly, view it on GitHub https://github.com/wa0x6e/cal-heatmap/issues/466#issuecomment-1901998162, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADZAXNPL63NA3XNTZ3ASJDYPOBZVAVCNFSM6AAAAABCDBLTXWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBRHE4TQMJWGI . You are receiving this because you commented.Message ID: @.***>

devprabal commented 7 months ago

I see only the error for favicon file in the developer tools console tab. Nothing else.

Also, now i tried out launching a server using python under WSL (http://172.29.198.29:8000/). But the result is the same (no colors).

devp@IdeaPad:/mnt/d/24k_tracks$ python3 -m "http.server"
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
172.29.192.1 - - [20/Jan/2024 14:38:34] "GET / HTTP/1.1" 200 -
172.29.192.1 - - [20/Jan/2024 14:38:35] "GET /records/gym_track.csv HTTP/1.1" 200 -
172.29.192.1 - - [20/Jan/2024 14:38:35] code 404, message File not found
172.29.192.1 - - [20/Jan/2024 14:38:35] "GET /favicon.ico HTTP/1.1" 404 -

Here also, the csv file request gets completed.

devprabal commented 7 months ago

I also tried to launch a CORS server through python. I don't think CORS is blocked.

image

#!/usr/bin/env python3
from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
wa0x6e commented 7 months ago

Found the issues after some tests, you have to use in your data object

y: d => +d['energylevel'],

Seems like data imported from CSV are string and not number, will investigate

wa0x6e commented 7 months ago

The extra casting to int or float is indeed needed when importing from other source than JS array. Will update the docs to reflect that

devprabal commented 7 months ago

It works well now! Thank you so much for such a quick response. I hope I can track my habits this year well :)

You may close the issue.