Does anyone have any examples of stacked graphs (or stream graphs) in Raphael?
I'm wondering if there is a working Raphael equivalent of this D3 streamgraph:
The closest I've seen is this line chart example:
I guess I could just knock up a stacked graph based on this, but it'd be great if anyone already had some outline code.
Are you looking for something like this. It's based on Raphael.
If you need something more powerful I could recommend Sencha ExtJS.
Area Graph #1 and Area Graph #2 are looking quite like your posted D3 streamgraph.
Related
I attached the graph I want to achieve.. can you recommend any library/ how to do this kind of graph?
I looked at libraries such as charts.js, anycharts,canvasJs, High Charts (has payment client wouldn't like that) One interesting I found is Google Charts' Combo chart but have no idea how to do it.
https://i.stack.imgur.com/hm5uf.png
I used d3 Line chart and append it on top of the progress bar chart. since it's an svg the background is transparent. hope that helps someone
I am not sure if anyone has come across this scenario or has even made a solution but basically I am able to create simple Pie and Donut charts using Flot Charts. What I am looking for though is a scenario where there is a pie chart in the center and it is surrounded by a Donut Chart. Very similar to this question but that question is now 3 years old and was never really answered.
I tried creating two charts using the same DIV but then one just overwrites the other. I thought of creating two different charts on two different DIVs and having them overlap but that just doesnt seem like a clean approach that will also accommodate responsive behavior.
Any thoughts / suggestions are welcome.
Thanks in advance
The answer to this is not simple as some of the comments have already indicated but I did find something that comes pretty close - HighCharts. They do have a con-centric donut chart that gives exactly the look and feel desired - infact LinkedIn uses them to display their dashboard statistics. The downside to Highcharts is that it is a paid library and its not cheap if you are planning to deploy on a commercial web application
The alternative is to use MorrisCharts - http://morrisjs.github.io/morris.js/donuts.html
They do have some good donut charts that come pretty close to the need.
I have a chart which is currently implemented in RaVis which uses flex.
I want to implement the same chart using JavaScript/SVG chart library but so far I haven't found a suitable solution.
I can't even put a name to this chart.
Any ideas?
D3.js has a pretty similar radial tree that you could bend to suit your needs :
http://bl.ocks.org/mbostock/4063550
More examples : https://github.com/mbostock/d3/wiki/Gallery
I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.
I've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example
Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)
There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.
Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico