Labels

php (34) javascript (30) phpjavascript (29) jquery (23) html (19) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Wednesday, February 21, 2018

Everything about google pie chart

Its always a good idea to represent your data in a graphical way. here we are explaining how to use google graphs API.
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Add these lines in your options variable

1. For 3D model pie chart.
is3D: true,

2. Adding background to pie chart
backgroundColor: 'skyblue',

3. Change legend text color and size
legendTextStyle: { color: 'red', fontSize: 15},

4. Change legend position
you can four different position options-top/bottom/left/right
legend:{ position:'bottom'},

5. Change title text color and size
titleTextStyle: { color: 'red', fontSize:16},

6. Change colors of pie slices
 colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],

7. Pie slice text display value and percentage
only for value.
 pieSliceText: 'value',

only for percentage
 pieSliceText: 'percentage',

for value and percentage
 pieSliceText: 'value-and-percentage',

8.Change pie slice(labels) text color and size
pieSliceTextStyle : {fontSize:16, color:'red'},
Result:



1 comment:

  1. It is always so hard to express how we feel and sometimes it is almost impossible to make others understand what we feel for them. The standards are often too high to attain. So many things to say, but not enough words. So, how do we create an atmosphere of pure emotion, love and affection? How do we send a message without actually saying too much? How do we reflect humility, tradition and respect without overstepping our bounds? These questions drive us every day.

    cheap flowers singapore
    best florist singapore
    cheap florist singapore
    flower arrangements online
    flower bouquet same day delivery
    flower delivery websites
    online floral delivery
    bridal hand bouquet singapore
    singapore florist delivery online
    flowers for floral arrangements
    Same day flower delivery singapore

    ReplyDelete

More Posts

FOLLOW