Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Responsive Semicircular doughnut Chart Using Google Chart

4.25/5 (4 votes)
27 Jan 2015CPOL 24.3K   311  
Responsive Semicircular doughnut Chart Using Google chart

Introduction

As we know, at the time of writing this tip, Google doesn't support semi circular doughnut charts. But in some conditions, which I also faced, we need to show doughnut chart in semicircular form. Some chart scripts do this but these are paid scripts. Following is the simple trick to show doughnut chart in semicircular form.

Using the Code

Following is the sample script for semicircular doughnut chart.

Just add links to min js and google chart js. Also take a div element with id 'piechart' in HTML and simply run your code.

Script

JavaScript
<script type="text/javascript">
 
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(initChart);
$(window).on("resize", function (event) {
  initChart();
});

function initChart() {
  var options = {
    legend:'none',
    width: '100%',
    height: '100%',
    tooltip: { isHtml: true },
    chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"},
    colors: ['#7CB5EC', '#5C5C61','transparent'],
    pieHole: 0.50,
    pieStartAngle: -90,
    is3D: false,
    pieSliceText: 'none',
  };
 
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ["Hide" , (11+2)]                    //addition of value of all elements
  ]);
  drawChart(data, options);
}

function drawChart(data, options) {

var tooltip = [
    Math.round((11/(11+2))*100) + "%",
    Math.round((2/(11+2))*100)+ "%",
    "Hiii3",
  ];

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
 
  var sliceid = 0;

function eventHandler(e){
    chart.setSelection([e]);
    try {
      selection = chart.getSelection();
      sliceid = selection[0].row;
    }
    catch(err) {
      ;
    }
    $(".google-visualization-tooltip-item-list li:eq(0)").css("font-weight", "bold");
    $(".google-visualization-tooltip-item-list li:eq(1)").html
        (tooltip[sliceid]).css("font-family", "Arial");
  }

google.visualization.events.addListener(chart, 'onmousedown', eventHandler);
  google.visualization.events.addListener(chart, 'onmouseover', eventHandler);
  chart.draw(data, options);
}

</script>

CSS Style

CSS
<style>
#piechart {
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}
.google-visualization-tooltip{
  display:table;
}
g{
  cursor:pointer;
}
</style>

HTML Element

HTML
<div id="piechart"></div>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)