CODEWITHSUNDEEP
javascriptgoogle-visualization
hoyasultan
hoyasultan

Reputation: 51

How do I capture the color value of a Google Charts pie charts slice?

I've got a working example of how to make a pie chart interact with a table. What I'd like to add is a visual cue of their correlation. The only examples I've seen are where the table row is highlighted by adding a listener. I'd like to add an empty cell within the table who's background color is the color of the pie slice it corresponds to. How do I capture the color of the pie slice? JSFiddle

What I have now:

  google.load("visualization", "1", {packages:["corechart","table"]});
  google.setOnLoadCallback(drawProductAllocationChart);
  function drawProductAllocationChart() {
    var data = google.visualization.arrayToDataTable([
      ['Name', 'Allocation'],
      ['Product A', 25],
      ['Product B', 50],
      ['Product C', 15],
      ['Product D', 10]
    ]);

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

    var productAllocationChart = new google.visualization.PieChart(document.getElementById('product-allocation-chart'));
    productAllocationChart.draw(data, options);

    var productAllocationTable = new google.visualization.Table(document.getElementById('product-allocation-table'));
    productAllocationTable.draw(data, null);

    // When the table is selected, update the orgchart.
    google.visualization.events.addListener(productAllocationTable, 'select', function() {
      portfolioAllocationChart.setSelection(productAllocationTable.getSelection());
    });

    // When the orgchart is selected, update the table visualization.
    google.visualization.events.addListener(productAllocationChart, 'select', function() {
      productAllocationTable.setSelection(productAllocationChart.getSelection());
    });
  }

Thanks!

Upvotes: 5

Views: 1121

Answers (1)

EnigmaRM
EnigmaRM

Reputation: 7632

My first thought is to just create a map of the default colors for Google Charts. Although, I haven't used the data tables for the visualization api yet.

From the Google Group I got this list of 31 default colors: 

["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"]

I assume you know the order that things are being added to the pie chart, and it most likely corresponds to the order of rows within the table. If that's the case, then just map the array to the row.

Upvotes: 4

Related Questions