Click here to Skip to main content
15,917,005 members
Articles / Web Development / HTML
Tip/Trick

Responsive Semicircular doughnut Chart Using Google Chart

Rate me:
Please Sign up or sign in to vote.
4.25/5 (4 votes)
27 Jan 2015CPOL 23.7K   310   4   6
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)


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Andre Sanches (alvs)27-Jan-15 3:18
Andre Sanches (alvs)27-Jan-15 3:18 
When reading up on how to create charts one expects to see screenshots or at least a demo URL.
GeneralRe: My vote of 1 Pin
Rafael Nicoletti27-Jan-15 7:18
Rafael Nicoletti27-Jan-15 7:18 
GeneralRe: My vote of 1 Pin
HitsRathod27-Jan-15 18:30
HitsRathod27-Jan-15 18:30 
QuestionNice article Pin
Member 1140569727-Jan-15 2:11
Member 1140569727-Jan-15 2:11 
Generalhelpful Pin
Member 1140568727-Jan-15 2:09
Member 1140568727-Jan-15 2:09 
QuestionVery Useful. Pin
shrijeet deshmukh27-Jan-15 1:08
shrijeet deshmukh27-Jan-15 1:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.