I have a Rails webapp currently deployed at http://orbit-analytics.herokuapp.com/user/2990 which utilizes D3.JS and JavaScript to generate an SVG graph of the specific user's uploads with relation to time. The graph renders correctly in Chrome, Safari, and Firefox but highlighting the tick labels or scrolling can cause parts of the graph to disappear in Safari (but not Chrome or Firefox). This isn't a problem on another page with a similar graph, available at http://orbit-analytics.herokuapp.com/video/10.
Is this a Safari issue or some problem with my code? Thanks.
Your problem is fixed when you remove the stroke property from line in your CSS. As you mentioned, you can directly apply this style with the style function.
As far as adding minor lines goes, look into using axis.tickSubdivide([n]). If not you will probably find your answer in the Axis component.
Related
I'm working on a website which mixes html and WebGL/canvas. We're using WebGL/canvas to draw a graph with many elements, which proved to be too slow if drawn using html or svg.
The problem is that not our whole page is made in WebGL/canvas. The browser remembers the zoom from the html part of the website where zooming is fine, and then applies it to the part which uses WebGL, making the raster graph there blurry and too large for the window.
This is a major setback and a huge blow to the user experience. The worst part is that the browser won't even let me READ the zoom value so that I could AT LEAST notify the user about the issue, or even adjust the drawing based on the zoom.
Has anyone else run into this problem? How did you solve it?
My site generates a lap chart for a bunch of riders, like so:
The problem is, on some devices the legends don't line up. E.g. if it's perfect in one browser, it stretches a bit too far in others, presumably due to font rendering differences. (I have it set to Roboto).
The API documents the possibility of using lineHeight css property in itemStyle, but it doesn't seem to work for me. I've set it to 50 and '50px', both in "legend" and "legend: itemStyle". No good.
(http://api.highcharts.com/highcharts#legend.lineHeight)
As such the best I can do is fiddle with the fontsize and the itemMarginBottom, which leads me to the problem I have.
Anyone have a solution?
I'm using the latest version of highcharts by the way.
I am new to the world of SVG and D3, learning as I implement. Facing an issue with one of the websites that I am currently working on.
Requirement:
We want to create a custom graph (similar to bar graph) that has a set of bars that represent my data points and certain icons are embedded into these bars based on the type of bar graph data. The graph is representing a person's achievements throughout their career. On hover of the bar we show a custom popup that has a brief description of the bar (see below for an example). Some bars have an additional arrow that represents whether the bar is representing an experience that the user is currently pursuing.
Progress so far:
As you can see my profile under TIMELINE section.
So, whats wrong?
Everything works fine (as you can see from the screenshots) on Chrome. All other browsers render the graph without the icons. You can view my profile on Chrome and Firefox.
I copied d3 generated SVG HTML code and pasted it in jsfiddle to test it out on all browsers and found that all browsers are rendering it: (ignore the colors, I have not applied CSS to it, but the icons show up) http://jsfiddle.net/EbpPG/1/
See JS fiddle link
Check my profile to see the graph. The logic to generate the graph can be found in chart.js file, createTimelineChart() function.
Can someone have a look at it and let me know what's the mistake I am making?
The problem is obviously how you dynamically generate the SVG. The path element is generated in the wrong namespace. This typically happens when you're using something like jQuery's append with a string:
$('svg').append('<path d="m0,0 h100"/>')
This will generate an HTML-namespaced path element, which does not exist. (Interestingly, Chromium is not even showing it in the developer tools.)
Firebug is good at showing you problems of this kind. In the HTML panel, the wrongly namespaced elements are shown in a lighter color. Right-clicking on them in the HTML panel gives you the option to examine in the DOM panel, and there you can see what the namespaceURI property is.
So, use either plain DOM manipulation methods or, if you're already using d3 anyway,
d3.select('svg').append('svg:path').attr('d','m0,0 h100')
Check out with Firefox DOM Inspector and you'll see that the path element that forms the icon is in the HTML namespace rather than the SVG namespace which would be required for it to appear.
Are you passing this data though decodeHTMLEntities, that might be recreating the element in the wrong namespace, you'll need to step though with a debugger to see when it goes wrong.
If you save the d3 generated page then when it's reread by any UA it will pick the right namespace which is why the jsfiddle works.
I created animation in flash and converted it into HTML5 using Swiffy.
I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.
Thanks!
While no option is perfect, there are a few choices:
1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444
2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/
3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/
4.) There is the option to display flash for IE8 and below.
5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.
Based on your reason for the animation - I would recomend 4 or 5.
There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):
Chrome Frame: if you're going to get an extension, get that one
Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back.
If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg.
You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.
The best option probably is to diplomatically encourage them to use a real browser, but then it's not always possible for those who live under the rule of an unskilled IT department ;)
I'm using a javascript library called flot (http://code.google.com/p/flot/) to render graphs and charts and such.
This is my code http://jsfiddle.net/nQvEW/1/
I'm using the absolute latest version of everything (except for IE).
I've tested the fiddle in Safari, FF, Chrome, winFF, winChrome and IE.
As far as I can tell, there isn't a way to debug javascript in iE (no cosnole to show erros). So... I have no what the issue is.
Have you downloaded and included explorer canvas? IE doesn't have a native canvas element which is used by flot to create the pie chart on. Download and include excanvas.js before you include the flot plugins.