CODEWITHSUNDEEP
javascriptjqueryhtmlapigoogle-visualization
user43553
user43553

Reputation: 65

Navigate on click of slice to different page using slice of pie-chart in Google- charts api

![enter image description here][1]


<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

// Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);

        google.visualization.events.addListener(chart, 'select', selectHandler);

        var label1 = data.pieSliceText('label');

        // The selection handler.
        // Loop through all items in the selection and concatenate
        // a single message from all of them.
    function selectHandler() {

    window.location.href = 'http://www.google.com?search='&label1;   
    // I want that on clickof slice , i must be able to navigate to a different page.                                  /    // with the clicked slice ID passed as a Querystring.
}

      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Refer this questions diagram for the same. I cant post diagrams:
Google Pie Charts Label

I have to get the id of clicked slice in pie chart and use its ID and concatenate it with a url to make it redirectable. Using the id of clicked slice as a querystring. Please help.

Upvotes: 2

Views: 5036

Answers (2)

user43553
user43553

Reputation: 65

I got a solution to my question.

Here is the answer part.

First add extra columns and rows you want >>

function drawChart() {

// Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addColumn('string', 'Group');
        data.addColumn('string', 'Category');


        data.addRows([
          ['Mushrooms', 3,'A','Happy'],
          ['Onions', 1,'B','Day'],
          ['Olives', 1,'A','Smile'],
          ['Zucchini', 1,'C','Be'],
          ['Pepperoni', 2,'D','Happy']
        ]);

Then in the SelectionHandler fetch the appropriate rows you want, like this >>

function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length) {
        var pieSliceLabel = data.getValue(selection[0].row, 0);
        var pieSliceGroup = data.getValue(selection[0].row, 2);
        var pieSliceCategory = data.getValue(selection[0].row, 3);

        window.location.href = 'http://www.google.com?search=' + pieSliceLabel +'&Group='+ pieSliceGroup+ '&Category='+ pieSliceCategory;
    }

This worked for me.

Upvotes: 0

asgallant
asgallant

Reputation: 26340

You need to fetch the relevant data from the DataTable:

function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length) {
        var pieSliceLabel = data.getValue(selection[0].row, 0);
        window.location.href = 'http://www.google.com?search=' + pieSliceLabel;
    }
}

Upvotes: 1

Related Questions