Using hours and minutes as data in donut chart - Javascript highcharts

Javascript examples for highcharts:Donut Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Donut Chart

Description

Using hours and minutes as data in donut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*w  ww.j  a va 2s  . com*/
    var m = 1000 * 60;
   var h = m * 60;
    var colors = Highcharts.getOptions().colors,
        categories = ['A', 'B'],
        data = [{
            y: (10 * h) + (40 * m),
            color: colors[0],
            drilldown: {
                name: 'A',
                categories: ['Aa', 'Ab'],
                data: [(5 * h) + (50 * m), (4 * h) + (50 * m)],
                color: colors[0]
            }
        }, {
            y: (3 * h),
            color: colors[1],
            drilldown: {
                name: 'B',
                categories: ['Ba'],
                data: [(3 * h)],
                color: colors[1]
            }
        }],
        innerData = [],
        outerData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;

    for (i = 0; i < dataLen; i += 1) {
        // add inner data
        innerData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });
        // add outer data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            brightness = 0.2 - (j / drillDataLen) / 5;
            outerData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }
    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%H:%M',
                                          new Date(this.y));
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        series: [{
           name: 'Inner',
            data: innerData,
            size: '60%'
        }, {
           name: 'Outer',
            data: outerData,
            size: '100%',
            innerSize: '60%'
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials