Pie chart with empty middle HTML5 - javascript

I'm currently working on an MVC webpage, i'm using Kendo for MVC to display some charts. Now, i need a specific chart (image bellow) that i don't seem to find in Kendo. Any ideas how to customize kendo's chart? or are there any JS charts that can be customized like this?

For anyone that will search this. kendo wasn't the best solution as we couldn't add number is the middle. The best solution we could found is a library called Morris.Js http://morrisjs.github.io/morris.js/

Related

VueJs : Displaying pie chart data value of each slices

I want to display the labels and datasets of pie & doughnut charts on their sides. I searched for many options on the internet including stackoverflow, but couldn't find a relative solution for my case. Maybe I missed something.
Now I have:
I need to display the chart data on its side like this: (For my pie and doughnut charts above)
First of all, I dont see any bar chart here. Second, what library are you using for making charts? If you couldn't find proper option to display label in that library, I can recommend you to use Amcharts, its more flexible. Let me know if you get your desired results

How to start with Custom Chart

I want to create this CHART, but i don't know how to start with that.. Because i cant found similar chart and i can't find any way how to create this one..
This graph i create just with CSS it's enough for now, but later i wanna receive a live data into chart so via CSS it's impossible and the chart is not responsive..
So any advice how to create this chart ?
Using jQuery or another one ?

chart like RaVis using js charts library

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

ready to use dynamic pie chart in d3.js

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.

Google Chart Visualization API, Bar chart values / tooltips

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/

Categories