Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) 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:



Drag the box using JQuery

<html>

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ css/bootstrap.min.css">

    

<style type="text/css">

        #draggable { 

width: 100px; 

height: 60px; 

padding: 0.5em;

border: 1px solid;

background-color: orange;

}

        .box{

            width: 50%;

            height: auto;

            border: 1px solid black;

            padding: 10px;

            margin-bottom: 10px;

        }

body{

   padding:20px;

}

</style>

    <script>

        $(function() {

            var thHeight = $("table#demo-table th:first").height();

            $("table#demo-table th").resizable({

                handles: "e",

                minHeight: thHeight,

                maxHeight: thHeight,

                minWidth: 40,

                resize: function (event, ui) {

                    var sizerID = "#" + $(event.target).attr("id") + "-sizer";

                    $(sizerID).width(ui.size.width);

                }

            });

        });


        $( function() {

            $( "#draggable" ).draggable({ axis: "x" });


            $( "#draggable" ).draggable({ containment: "parent" });

        } );

    </script>


</head>

<body>

<div class="box">

<div id="draggable" class="ui-widget-content">

    <span>Draggable Box</span>

</div>

</div>

</body>

</html>

Output:




More Posts

FOLLOW