← Back to Sharrre home

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="example4">
  <div id="sharepie"></div>
  <div id="pie"></div>
</div>
<script>
google.load("visualization", "1", {packages:["corechart"]});

$('#sharepie').sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true,
    digg: true,
    delicious: true
  },
  url: 'http://code.google.com',
  enableHover: false,
  render: function(api, options){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Social network');
    data.addColumn('number', 'Sharing');
    data.addRows(6);
    data.setValue(0, 0, 'Google Plus');
    data.setValue(0, 1, options.count.googlePlus);
    data.setValue(1, 0, 'Facebook');
    data.setValue(1, 1, options.count.facebook);
    data.setValue(2, 0, 'Twitter');
    data.setValue(2, 1, options.count.twitter);
    data.setValue(3, 0, 'Digg');
    data.setValue(3, 1, options.count.digg);
    data.setValue(3, 0, 'Delicious');
    data.setValue(3, 1, options.count.delicious);
    data.setValue(4, 0, 'Stumbleupon');
    data.setValue(4, 1, options.count.stumbleupon);
    data.setValue(5, 0, 'Linkedin');
    data.setValue(5, 1, options.count.linkedin);
    //console.log(options.count);

    var chart = new google.visualization.PieChart(document.getElementById('pie'));
    chart.draw(data, {width: 450, height: 300, title: 'Total: '+options.total, backgroundColor: '#F3F3F3'});
  }
});
</script>
<style type="text/css">
#example4{
  float:left;
  margin:0 25% 0 25%;
}
#sharepie{
  display:none;
}
</style>
            

See Google Chart Tools for more informations.