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.
Related
I tried using apex charts, but did not find proper doc for the react-apexcharts. I also tried react-google-charts, although it works fine, but it has unwanted spaces on sides which spoils the layout. I'm not sure about which module to use. Do you have a suggestion??
Author of ApexCharts here.
Thanks for reminding me to update the docs for the candlestick charts.
Here is the page that explains what should be the data-format.
Also, there is no major difference in options if you use react-apexcharts. The series prop should be given the required format as specified in the docs and rest will fall into places.
For those who are still asking which library to use for candlestick graphs.
Take a look Highcharts Highcharts candlestick graph
Good documentation and great features
I have 3 similar pie charts. They use same dimension but different groups so, their legends look the same. Instead of having 3 same looking legends, I'd like to bind only a single legend to those charts. I tried creating a legend separately and assign it to the charts, however, it didn't work. Is there actually a way to do such thing?
This is not directly supported by dc.js, but it is very similar to a legend on a composite chart. I think if you were willing to do some hacking, you could override the legendables function on the chart you want to put the legend with, and have it accumulate the legendables from its sibling charts.
Take a look at pieChart.legendables:
https://github.com/dc-js/dc.js/blob/master/src/pie-chart.js#L419
And then compositeChart.legendables
https://github.com/dc-js/dc.js/blob/master/src/composite-chart.js#L363
for inspiration.
If this is too much hacking for you, please file an issue. It would certainly be nice to support!
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 have some metrics to display, I need a simple barchart to show values for every day in month, and it doesn't need to have any labels or legend, when you hover the day, the data is displayed. I found this http://codepen.io/deegill/pen/macik which is something that I need but it cost 90$ smallest package. Does anyone have chart like this which I can use in my project?
A set of reusable charts using D3
http://nvd3.org/examples/line.html
If you want to make any chart I'd look at using D3. It's a pretty smart js framework that allows you to display data in a lot of different ways. Here is an example of it displaying a bar chart. And here is another example that uses time as the x value.
Google Charts API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart
g.Raphael.js
http://g.raphaeljs.com/
Highcharts.js (Free for non-commercial use)
http://www.highcharts.com/
I've been using Flot for a few years now, and I have no complaints. Might take a little effort to get started, but we use it commercially, and it's great (and free).
I am trying to add the actual value of all the bars in my chart to the
end of each bar. I want this to either replace, or to add to the tool-
tip functionality.
I see that this is possible in the image chart, it is the
functionality described in the following link that I wish to
replicate:
http://code.google.com/apis/ajax/playground/#image_bar_chart
I am wondering if this is possible in the Javascript based version of
the bar chart?
Many thanks,
H.
It looks like there's no built in functions to draw text ad-hoc on top of google's different charts. Behind the scenes, it's generating SVG so you could try to insert some valid SVG on your own.
Another option would be to use a more flexible (but less featureful) library like raphael.js:
http://raphaeljs.com/