1

First of all tell me whats this, this is input type val or div or what? then how can I create One of them?

enter image description here

dario
  • 5,149
  • 12
  • 28
  • 32
Morteza Negahi
  • 232
  • 1
  • 5
  • 13
  • I guess the above was made through SVG. Try this: [Demo](http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html) Look at the chart at the right middle area. It was built using http://raphaeljs.com/ – m4n0 Jun 28 '15 at 12:36

2 Answers2

1

you can do this with a canvas html element and some javascript. have a look at chartjs.org
it's really simple to make Doughnut Charts whith this library
http://www.chartjs.org/docs/#doughnut-pie-chart
here is a fiddle http://jsfiddle.net/4vo72rLd/1/

vitr
  • 6,766
  • 8
  • 30
  • 50
  • Thank you . Is It method to I write this chart ? I really hate to use plugins. – Morteza Negahi Jun 28 '15 at 13:11
  • @user3881935 yes, technically you can. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. http://www.w3schools.com/html/html5_canvas.asp – vitr Jun 29 '15 at 00:02
0

It is mostly called as 'Donut Chart'. It is constructed using SVG and javascript D3.js

You can refer to this

http://bl.ocks.org/mbostock/3887193

Also, there is a wonderful tutorial available on jsfiddle.net

Shri
  • 834
  • 1
  • 12
  • 36
  • Thank you , But I don't use plugin I need to create this – Morteza Negahi Jun 28 '15 at 12:41
  • You can try using this project for reference. [Open Order Framework](https://github.com/lbacaj/OpenOrderFramework) It has used donut chart for analytics. Good Luck! – Shri Jun 28 '15 at 13:02