JavaScript Donut Chart

Shield UI Charts variety: Donut Chart Shield UI HTML5 JavaScript charting library offers to users another useful chart type- the Donut chart. It is similar to the Pie chart on some respects- it uses circular graph to show percentile contributions of values to a whole. It is as convenient as the pie chart, since users don’t have to pre calculate data supplied. These calculations are done automatically and users only need to provide the data being visualized. On the next image is a typical view of the Shield UI Donut Chart:

 As we can see, slices in the Donut chart type look like bent rectangles and we have an empty center on the data plot. Just like in the Pie Chart we have an interactive legend, that allows users to hide/show slices by clicking on the corresponding legend item. On the next image we have some visible and some hidden slices:

Besides its interactivity, the chart legend has adjustable appearance and positioning to fit any user visual preferences. The Shield UI Donut Chart users can freely place the legend around the plot area and apply the formatting they want. For instance we may place the legend on the top of the data area and round its corners by using the following simple code:

    chartLegend: {
      align: "center",
      borderRadius: 2,
      borderWidth: 2,
      verticalAlign: "top"
    }, 

And on the image below is the visual result of this code:

Similar to the Pie chart, the Donut chart’s interactivity allows selected slices to move away from the center. This behavior is being set by the enablePointSelection and the slicedOffset properties. The enablePointSelection property allows users to select each of the Donut’s slices. And the slicedOffset property determines how far away the selected slice will move from the center. The code sample below shows a way of setting the two properties:

        enablePointSelection: true,
        slicedOffset: 50,

And on the image below we can see the result:

 User’s don’t have the ability to zoom in on the Shield UI Donut chart, neither might there be a need to, since all data is visible on the chart. As shown in the online code sample, we can easily bind the chart to local data. For that purpose we declare a variable and populate it with the needed data values as shown:

  var LocalData = [
    ["Category A", 14.2],
    ["Category B", 36.6],
    ["Category C", 40],
    ["Category D", 13.1],
    ["Category E", 52.4]
  ];

Than we only need to bind it to the data series:

    dataSeries: [{
      seriesType: "donut",
      data: LocalData
    }]

Of course the chart can be bound to remote data as well. It also allows users to export the current state of the chart to a graphical file, or send it to the printer.

An editable live example for the Shield UI Donut Chart is available here: Live Example 

More information as well as extensive code samples for the Donut chart type can be found here: Documentation and examples