I just observed an abnormal behavior in chrome: I use highcharts pie graph and visualize some data. Although each pie slice has different colors, it shows some slices in black. I suspect it is related generated svg graph. Please examine the pictures taken from chrome and firefox *****.
Any help, suggestion, workaround would be appreciated.
(source: i.imm.io)
(source: i.imm.io)
*Using Win 7 64 bit
Chrome version 20.0.1132.47 m
Mozilla version 13.0.1
Alright guys I found the problem which is in my code. But I learnt something: If you assign color attribute to an element, Firefox doesn't check if it has # symbol in the beginning but Chrome checks. Therefore, color:343434 fails in Chrome but not in Firefox.
Related
I can not run this visualization on firefox, while I can do it on Chrome and even on Edge :
https://naustud.io/tech-stack/
Since I was very inspired by it and wanted to analyze it - I am a beginner with d3.js -, the fact that this visualization can not be rendered on all browsers is a bit of a drag on my approach. .
Does anyone have an explanation? Can this be solved? Thank you everyone.
It seems like in Firefox, the clientWidth of the svg element isn't being read, possibly related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=874811. Instead the width variable is being set to 0, and that looks like it causes infinite recursion when trying to pack the chart.
To correct this, you can use .node().parentNode.clientWidth (via How to get SVG element dimensions in FireFox?), by adding this before the console.log in techstack-main.js (Line 490):
if (!width) {
width = svg.node().parentNode.clientWidth;
}
I have tested with various graphs and this seems like a consistent problem.
I have a highstock graph, if you draw a lot of data and zoom out to the full view of the graph by using the sliders or the range selector, the whole graph draws all messes up.
I found an example fiddle that illustrate the issue.
http://fiddle.jshell.net/highcharts/qgprf/show/
I've used Chrome to get the path that highstock generated and then plotted just the path:
http://jsfiddle.net/MsFhh/
It's obvious that highstock is creating some tomfoolery.
For the sake of stackoverflow, here's some code
alert("I R code"); //Copying the huge svg path in here is kinda insane
Is there something that I can do to fix this?
PS: if I upgrade to the new highstock version, everything in our graphs breaks so updating is not an option :(
This is known bug of Highstock 1.3.0, alread y fixed in 1.3.3+. Reported here. You can modify sources to fix issue, or upgrade to latest version.
If you have issue with upgrading - let us know what kind, and we will try to fix them. Of course working fiddle with that issues is really appreciated.
The bug has been fixed. The fix for version 1.3.5 can be found here:
https://github.com/highslide-software/highcharts.com/issues/1651#issuecomment-25226662
Don't use the patch though. It doesn't fully fix the issue. It seems like 1.3.6 fixes everything that were causing the defect.
The patch can be seen here:
https://github.com/highslide-software/highcharts.com/commit/9607afd512473710b6aeb9bfceaf23549d285ff0
On the nexus 7 when I run a simple Highcharts example, I have the following issue -:
When I touch any area of the chart, the entire chart gets selected (a blue selection color fills the entire chart) shown below.
This issue does not happen when I try it on any other device (such as the Nexus 4).
Also, when I try accessing the highcharts demos from demo , the same issue reappears. This is what leads me to believe it has nothing to do with my source code, but has more to do with the device itself.
Does anyone else face this issue? If so, any advice in fixing this issue would be appreciated.
I tested examples in Nexus 7 device but and all works properly
http://jsfiddle.net/zn6FM/show/
Do you have the newest Chrome or you use other browser? Have you tried to update to Android 4.2.2 ?
I needed to create a error bar style chart with HighCharts. The issue is, I want to remove the connecting verticle line(stem) to error points (whiskers).
Following is the code I used in errorbar section.
stemWidth: -1,
whiskerLength: 150
Following is a modified example from HighCharts examples to accomplish my requirement.
http://jsfiddle.net/ry8qw/2/
This is working fine with Chrome. But not working with the FireFox (Version 20.0.1). I'm running the latest available FF version.
Are there any workarounds for this issue ?
Thank You
Indeed it looks like a issue, so I've reported to our developers here:https://github.com/highslide-software/highcharts.com/issues/1833
But you can use small workaround, iterate in each errorbar and change strike width by svg attribute.
http://jsfiddle.net/ry8qw/6/
$.each(chart.series[1].data,function(i,data){
data.stem.attr({
"stroke-width":0
})
});
I'm using Raphael javascript library to make graphics.
I've almost copied the Analytics example from the webpage and I'm getting a white and black color graphic in internet explore and I don't know why.
Please see this is how it works on Firefox, Chrome and Safari:
http://imageshack.us/photo/my-images/861/75172783.png/
And this in InternetExplorer:
http://imageshack.us/photo/my-images/847/94131171.png/
Thanks!
Thanks for the Help.
However, I managed to fix the problem. I don't know why VML didn't like that Raphael object was inside a div with a "-".
This was my structure:
Simply taking the graphic outside the on-data div worked. Very weird actually!
Thanks!
From my answer to another Raphael/IE related problem:
Have you tried using Raphael 2.0? I think it's still in beta stage, but I found that it's got improved VML capabilities.
Also be sure to test browser behavior with an uncompressed version of Raphael, as minified versions seem to have bugs. Instead, I've used Packer by Dean Edwards, which gave me a compressed and bug free version of the lib.