Very weird and unexpected behavior of Chart.js chart rendering.
Dataset is sorted. Contains 172 timestamps and some Y data.
In Chrome (109.0.5414.75) only happens after messing around with size of the window. In Firefox (109.0) shows up at chart draw animation. Artifact disappears after animation finish.
Best to check out movie for full understanding of what is problem:
https://www.screencast.com/t/a2lXNpn9QP
How it should look:
How it looks after messing with window size:
Any possible tips on what's going on here and what should I check are very welcome.
Related
Chart.js 2.6.0
Expected Output
I have a problem to solve, I needed to generate this chart out of data:
I somehow managed to generate this chart.
Problems
I am searching for best way to detect summit/peak of data-mountains so that I could put a point(arc) at the top.
Is there a way to put labels in x-axis like in the picture above? I mean there is label after every 21 seconds.
Code so far
Gist: https://gist.github.com/shivabhusal/efb48db79128ffd926cc25960a1d875c
I overrode the draw function of Chart.js and drew lines and points on my own.
Any help will be appreciated, thanks.
Note: My data is not guaranteed to be pointy at the summit; sometimes it can get plateau.
Necessary CodePen is https://codepen.io/shivabhusal/pen/LjWyMe?editors=0010
I'm taking a look at this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/
I'd like to do a very similar chart but it's not working out how I want it to. My current fiddler is this: (see edit below!)
The main functional differece is in the first fiddler, he's using a range, whereas I'm using just actual values (and timestamps).
What's not working for me:
The labels are jacked up. If I try to mouse over a point on mine it's way off; it seems to be 'stuck' on the left. If you try to mouse over you should see the same issue.
I can't zoom in. On his chart you can't zoom in either, but on another chart I was messing around with, it seems like all I needed to do to add zooming was put in:
chart: {
zoomType: 'x'
},
But that doesn't seem to be working here.
The points are so big that the bottom part in green looks too 'blobby'. How can I just remove those point markers?
In summary, how can I have this map have just lines with no blobs, with zooming, and labels that follow your mouse?
EDIT: I have a new version, where the labels work and the blobbiness is removed. However the zoom still doesn't work. How can I enable the zoom?
http://jsfiddle.net/qprmjm67/
Turns out that there's a much easier way to do this, using zones.
stackoverflow makes me put code to put a link. So I'm typing fake code here.
http://jsfiddle.net/2f1c659L/
I'm trying to adapt this example http://prag.ma/code/d3-cartogram/ to show information about obesity in 2002, 2005 and 2010 around the world. This the visualization: http://datauy.github.io/obesity-cartogram with a link to the code in the same page.
The problem I'm trying to resolve is that the shapes are not being distorted like in the original example with the alberusa projection. The colors seems to be mapped just fine but for some reason I can't distort the map. I tried changing the scale and looking into the cartogram.js code but I don't see anything that could be the problem. If I change the data to have a larger difference then I see the color difference but nothing on shape.
Any clue what is happening? Thanks!
The problem is due to Fiji and Russia having project extents which cross the edge and return to the left border. When the cartogram.js calculations complete, the path has a negative value in it which is causing the problem. I'm trying to resolve it myself and will update asap.
I've got Highstock running on a website loading two series from two different csv/log files on the same webserver.
I previously had this exact setup on a different server where it worked flawlessly.
On the new server, however, the chart doesn't render properly. When the page is loaded the series lines do not display. If you zoom in, or scroll away from the rightmost edge of the chart the lines pop into view. If you scroll back all the way to the right the lines stop displaying.
The actual chart can be seen here on this temporary page:
http://maxedin.com/pages/18/
The JS which loads the chart here:
http://jsfiddle.net/3Jpb3/
The chart is loaded with this div element:
<div id="mholmen" style = "width:100%"></div>
I've tried playing around with the different zoom options, chart sizes, modifying the data that's being loaded and such to no luck.
Has anyone else bumped into this same issue and managed to fix it?
In your data you have some NaN's, for example:
lines[2154]: Array[2]
0: NaN
1: NaN
Which can not be displayed on a chart. Make also sure that data doesn't contain duplitaced and is ordered for xAxis ascending.
Thanks to Pawel Fus I figured it out. Turns out the text editor nano which I used to view and edit the log files did some odd things while saving them. Editing the files in textwrangler fixed my problems. Go figure.
I seem to be having trouble arising from adding a scrollbar to my JavaScript Chart. The problem is my chart
infovis is 2400px, while the frame is 800. However, whenever I scroll right, the cursor becomes misaligned and trails (as though the x and y coordinates have become confused).
To give you a better idea, here is a link to the chart.
http://philogb.github.com/jit/static/v20/Jit/Examples/AreaChart/example1.html
My question is: how can I best rectify this problem? Should onscroll be called in the html div or css or .js file? Also, what do i use for the selected div? Would it be the center container holding the visualization, the overall window, or #vis (the visualization itself). I have attached a screenshot below for clarification.
Due to the animation and drilling down capabilities of the graph, this issue renders the graph unusable. Any help or guidance would be appreciated.
Also, here is a link to the open source API this is based on: http://philogb.github.com/jit/demos.html
Unfortunately the site will not allow me to post a screenshot.