See: http://jsfiddle.net/j9tx8hL1/
By using the 'null'-values I want to achieve that there are no lines displayed in the graph, for instance no visible line for series4.
var series4 = [[56,null],[65,null],[80,null]];
In JSFiddle, this works.
However, in my browser my application still shows something different.
See: https://www.screencast.com/t/jRr6nlivwF0M
I can't find out what could be the cause of this, both situations should be exactly the same, but apparently are not.
Has anybody here got any advice where to search for a cause?
Related
I exactly follow the steps of tutorials from https://learnforge.autodesk.io/#/tutorials/dashboard and the lab lecture from the autodesk https://www.autodesk.com/autodesk-university/class/Learning-Lab-Your-first-Forge-Dashboard-2019#video. And the dashboard successfully showed for the first time. After I refreshed the pages for several times, the pie chart and bar chart disappeared, leaving the blank area. I repeated the same procesures again and still shows no dashboard.the layup
Can somebody please tell the reason? Thank you.
Assuming that you haven't modified the source code in any way, there are many different reasons why the sample could break, for example, the server we download the charting library from could be temporarily down. Also, if you changed the size of the window, the charts could be below the viewer.
As Augusto mentioned in his comment, if you can still reproduce the issue with the sample code without any modifications, please check the browser console to see if there are any errors.
I did a search and could not find an exact answer and I'm a bit of a newbie with ChartJS.
Right now I've got a chart that draws a vertical line on top of a line using an added plugin to ChartJS. My thought now is that I'm looking to make it so that the tooltip's value displays elsewhere not on the canvas. Pretty much I'm trying to recreate a Robinhood like experience.
I have the line and tracking already created. My only issue is that I want to have some text that displays the tooltip value and changes for each point. The red circle is what I'm looking to simulate for the tooltip. Instead of having it appear at the point, it should be fixed at a location and of course change values depending on the point.
I think I've read somewhere there is a method that can be used for ChartJS called getPointsAtEvent, but I'm not exactly sure how to properly use this, but if someone could help me, I'd be really grateful.
I got it to work out using customToolTips and using the tooltip.dataPoints.length. One issue I had when going through this though was that an error appears in the console when you go out of the canvas area, but doesn't stop anything from working.
I'm not exactly how to fix this one, but if anyone has encountered it, please let me know:
(http://localhost:3000/Chart.js:10917:4)
dashboard:178 Uncaught TypeError: Cannot read property 'style' of null
at ChartElement.customTooltips (dashboard:178)
at ChartElement.update (Chart.js:8660)
at ChartElement.handleEvent (Chart.js:8952)
at Chart.eventHandler (Chart.js:4679)
at listener (Chart.js:4609)
at HTMLCanvasElement.proxies.(anonymous)
When using context.createRadialGradient() on a 2d context, the gradient is not rendering as expected in Chrome v65.
The example above is from MDN, but it's also happening in some of my own code.
The gradient works fine in Firefox v59, Safari v11. It fails in Opera v52, so maybe it's a new bug in webkit? I've tested this on two different computers, so shouldn't be anything in my local setup causing it.
Anybody else experiencing this bug or better yet know how to fix it?
EDIT: Found an open issue on Chromium here.
Apparently this is not a consistent bug, and should be fixed in v66 if I'm reading the comments correctly.
As mentioned in the post above, there's an issue in Chromium v65. It should all be fixed in v66.
If you do need to fix it right now, the hacky way is to make sure that the gradient doesn't receive identical x and y arguments for the first and the second circle:
var gradient = ctx.createRadialGradient(100,100,100,100,100,0); // Doesn't work
var gradient = ctx.createRadialGradient(100,100,100,100.001,100,0); // Works
You can see the fix in effect here. Happy hacking!
I have been making a simple website with AngularJS and D3JS and created a custom circle mesh library (very crude). It all works fine in Firefox but it doesn't work in Chrome. The website is up at petoknm.github.io . In my homepage I have this circle mesh thing that displays the circles. But when I transition (directly) to another page with this circle mesh (programmming page) it starts behaving differently. And when I go from programming to home it starts to ignore the clipPath on the first two images (two probably because of the two images in the programming page). The svg is identical (I checked only the first three 'a' tags with the images and the first three clipPaths) to the correct svg that was there first... I don't know what happens.
This is a screenshot just after first loading the page
http://i.stack.imgur.com/2fAI6.png
This is a screenshot after coming from the programming page
http://i.stack.imgur.com/JLO3r.png
As you can see the clipPath is still in the svg and "shown" by Chrome but is not actually used (or is ignored).
Please help, I have no idea why it happens and why it's no problem for Firefox
I'll make an educated guess and say it's because your programming page is reusing ids "#clippath0" and "#clippath1". Because it's a single page site and you are replacing the parts of the DOM that contain those references, perhaps there is a bug in Chrome where it getting confused over what they point to.
Try using different sets of ids for each page and see if that fixes it. Maybe you could add different prefixes for each page (eg "#homeclippath0" and "#programmingclippath0").
It does seem like a bug in Chrome though. Perhaps you might want to report it.
I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.