Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.
Related
I want to make the whole webpage into a graph, like a blueprint (the colour scheming). And then i want to plot a graph in the same page. So should i use some code to make the grid or should i just make an image file and make it the background.
The grid should be preferably something like this : Graph, or with the proper coloring Blueprint Graph
If code is suggested, please give an overview of how to do so.
Thank You.
This sounds like something you could do with HTML5 Canvas, although maybe that's above and beyond what you're looking for. Here's a pretty good free course that has relevant examples.
Since you're going to be plotting points on the graph, your best bet is to create an element, such as a <div>, and give it a fixed width and height. Then apply a background image of the graph paper to that element. You'll need to use absolute positioning when plotting points, so it's key that the graph stays in place and doesn't get skewed based on differing viewports.
If you wanted the entire viewport to be a graph, you'll need to reference the upper-left corner when plotting points (start at 0,0) since users' browsers will have varying widths and heights.
Is it possible to make divs with for example five or six corners?
I need this to make clickable zones on a map. If there is another way to achieve this I would be delighted.
No, you can't. A block in HTML is rectangular.
And even if you change its look using (expensive) css based tricks, the clickable zone will keep rectangular.
But there are several solutions for clickable zones :
simple computations with javascript from the event coordinates on click
the old image-map format
If you want to do it in javascript without image maps, you may be interested by ready algorithms to decide if a point is inside a polygon.
If the map is an image, use a polygon imagemap. There are several web apps that make it easy to create these (just Google "imagemap generator").
If you're using a mapping API like Google, they'll have documentation on creating clickable targets within the map (for example: Google Maps Docs).
I'm trying to make a wheel, which will be sliced into different coloured sections (kinda like a pie chart) but they may have extra elements on top of them, e.g., a stitched border across the borders at the side and an icon at the edge of each, etc.
So my question is do I just use css3 (examples: http://www.css3shapes.com/)
and then use something like http://css3pie.com/ for Internet explorer 6-9?
Or am I just better off doing it in Photoshop and slapping it on a div as a background image? And use absolute positioning for extra elements?
Which is the best practice?
I would (and do) use PHP's GD extension to create a pie chart based on input data, save the image generated by that, and optionally generate an imagemap so parts of the chart can be highlighted, have tooltips, etc.
I really wouldn't use CSS for drawing shapes. It's hacky at best, and can get really messy. Quite a few of the examples in the cssshapes site you linked to don't even work in Firefox 3.6 - which is still quite heavily used - let alone other older browsers, and in IE you'd really struggle; css3pie won't give you the kind of fine-grained control you'd need for a pie chart.
If you want to draw stuff on the browser using on the client side, there are a number of ways to do so without resorting to hacks like CSS shapes.
Both SVG and Canvas are relatively new technologies for placing and manipulating graphics on the browser. SVG draws vector graphics and Canvas is for pixel-based graphics.
Both of them are supported on a wide variety of browsers. The obvious exception being IE8 and earlier. However, IE does support an alternative graphics format called VML, and there are javascript tools for IE which allow it to convert both SVG and Canvas into VML, so you can use either of them and they will work in IE using these tools, which makes both SVG and Canvas effectively cross-browser compatible.
But if you're drawing pie charts, or similar sorts of things, my personal recommendation would be to use the Raphael library. This is a javascript library which works in all browsers, and can be used to draw and animate pretty much anything, including graphs and charts (it even has a separate graphing add-on library. See the demos on those two sites to see what it's capable of; I think you'll be impressed. (I certainly was)
Hope that helps.
I have been looking for a good server side graphing / charting library that has a lot of design options. Most seem to be very difficult to customize the specific way we are looking to.
I don't mind if it is python, php, java, etc... I just need it to generate server side and output an image to be embedded on a pdf.
Specifically I need the following.
Gradients in bars fill color
Ability to have rounded edges on bars of chart
From a design perspective those are the important ones that I can not find in a specific library.
Ended up using MatPlotLib and used the example below. Essentially you can use an image and set the repeating area of the image. Instead of the gift boxes, I used a rounded corners horizontal gradient image.
http://matplotlib.sourceforge.net/examples/pylab_examples/demo_ribbon_box.html
I have a javascript plot on my page with "data point highlighter" functionality: when the mouse hovers over the point, you can see the coordinates popup. I also want to place a semi-transparent "sheen" image layer over the plot to make it look glossy. I can achieve this with the z-index, but the on-mouse-over functionality of the js plot stops working. Is there a way to have the sheen layer on top and still have the on-mouse-over of the layer below (the plot layer)? Many thanks...
I can't think of a way to do that easily, apart from splitting apart the plot image and the area that reacts to the mouseover, and placing the latter above the sheen - which may be bothersome to do.
If it's semi-transparent, though, would it be an option to do the whole thing the other way round? Placing the "sheen" below the plot, and making the plot semi-transparent?
This is not possible. Shame.
Actually, I believe it is possible, but it's a bit of a messy workaround, and, in essence, involves capturing mouse/cursor position x/y location and mapping that to the plot layer -- not the easiest or optimal task, let alone completely inefficient. I realize this is an older question, but thought I'd point this out for future users.
Update: Firefox has a CSS property geared toward this in the 3.6: http://demos.hacks.mozilla.org/openweb/pointer-events/