I am creating some geometrical figures on my web pages, for which I am using RaphaelJS. Currently, I have some animated circles.
I want to add pie shapes to my web page as well, and the trickier thing about which I don't known how to go about is adding content inside those pie shapes. How do I add the pie on my web page, inside which I can place content such as text, images etc. (or for that matter other html elements as well)
Using RaphaelJS, you can create text like this:
paper.text(50, 50, "Blueberry\nPie!");
You are going to want to pass the x,y position as a variable that is relative to your pie slice. Here is some example code for pie charts: raphaeljs.com/pie.html.
Also, I found this tutorial that looks pretty good: http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/
Related
so I am tasked to do a project. So let me show something first.
In this one. The Purple shape should only appear when Durable Returns part is clicked.
Now I am drawing blanks with coming up ideas on how to do this. What I want to ask is if it's possible to recreate all of this in html interactively.
SVG is what you actually want.
SVG has a DOM with different elements, allowing you to have polygons and such that you can place arbitrarily. You can embed text and lay it out as you need as well. SVG in-browser can be scripted and also have CSS applied to it.
I need to create a data visualization in a web application, I wanted to use Highcharts since I have some previews experience, the problem is that the visualization I need to create is more custom, based on my investigation I'd need to use something like D3 which allows to do more things, but maybe someone has done something similar using a library with a smaller learning curve.
Is it possible to create a visualization like this (the image to the right) without using D3? Each of the small boxes inside the bars is an element that should be clickable to show it's details inside a card-like HTML element.
I saw this example with Highcharts, but it's not quite what I want and I'm not sure if what I need can also be done.
Thanks in advance for any help.
On d3.js homepage, http://d3js.org/, any source code or examples on how the interactive hexagons are created? In particular, I have a set of photos and I'd like to create the same effect. i.e. on mouse hover, the tiles move a little and the hovered tile is highlighted.
If you look at the html source code, they use d3.js (of course) and d3hexbin.js, which is a library able to create and animate hexagons.
You can take a look on the code used in this page (thanks to dev tools) to learn how they use it.
I'm looking to make a responsive donought chart with CanvasJS but my client wants a "broken" donought. Like with a piece missing.
Can it be done? If so, how?
Or else, if it cannot be done, could another responsive graph library be recommended that can do this?
Thanks
EDIT:
I managed to "fake" a gap in it my setting one datapoint to transparent. However, it's not "real" as the transparent part is still a part.
See my pen
http://codepen.io/SubZane/pen/sHpey
I don't know about canvasJS, but you can draw a polygon with inner rings in canvas, see the answer here: Polygon with a hole in the middle with HTML5's canvas
You can also do it with SVG which some web mapping libs used for this purpose before the advent of the canvas element.
i would like to draw complex Graphs using Canviz, and put them to a HTML page.
i downloaded the Canviz package, which includes an example. when running the example, i have a graph drawn in my HTML page.
when i'm trying to do my own test, the graph is not drown.
anyone has an idea about this ?
There are a variety of tutorials on how to use the html 5 canvas to draw graphs such as:
http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/
http://www.javascripter.net/faq/plotafunctiongraph.htm
http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/
http://www.html5laboratory.com/creating-a-bar-chart-with-canvas.php
Also see:
http://www.w3schools.com/html/html5_canvas.asp