Comments (8)
wa0x6e
commented on June 8, 2024
1
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
from cal-heatmap.
wa0x6e
commented on June 8, 2024
1
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
from cal-heatmap.
wa0x6e
commented on June 8, 2024
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 <script> tag, it renders perfectly.
- If i keep data in 'csv' or 'json' file, the file is loaded (i can
see it from the inspect element -> network tab) but the colors are not
displayed. I tried it on both firefox and chrome.
<!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.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
<#466>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AADZAXNJKBMI4DX4DRBRHTTYPOAQ7AVCNFSM6AAAAABCDBLTXWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGA4TCOJXGAZDSNY>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
from cal-heatmap.
devprabal
commented on June 8, 2024
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?
from cal-heatmap.
wa0x6e
commented on June 8, 2024
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
<#466 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AADZAXNPL63NA3XNTZ3ASJDYPOBZVAVCNFSM6AAAAABCDBLTXWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBRHE4TQMJWGI>
.
You are receiving this because you commented.Message ID:
***@***.***>
from cal-heatmap.
devprabal
commented on June 8, 2024
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.
from cal-heatmap.
devprabal
commented on June 8, 2024
I also tried to launch a CORS server through python. I don't think CORS is blocked.
#!/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)from cal-heatmap.
devprabal
commented on June 8, 2024
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.
from cal-heatmap.
Related Issues (20)
- Year template goes wrong before the date 1894-01-01 HOT 1
- Not being able to adjust the calendar dimensions to 100% of its div based on the screen size HOT 1
- Resize calendar HOT 1
- Problem with timestamp and timezone HOT 6
- groupY median does not exist HOT 1
- Add custom subdomain classes
- Custom scales in CSS HOT 1
- React project using cal-heatmap and TypeScript cannot be built HOT 2
- Angular/Typescript typing issue HOT 3
- Commonjs export is not working HOT 1
- get other info from source data HOT 3
- Type is not correctly exported in
- Type is not correctly exported in "exports" HOT 1
- Could not find a declaration file for module 'cal-heatmap' HOT 3
- Hours subdomain is not honoring local browser time HOT 1
- New external plugins repositories HOT 1
- Error occurs when import plugin HOT 2
- How to hide the future days? HOT 3
- Full working code HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cal-heatmap.