Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set the color of a specific note and/or link in a google chart sankey diagram?

Here is what my data may look like:

var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU','your customers',29],
      ['bought first from Store1','your customers',9],
      ['bought first from Store2','your customers',8],
      ['bought first from Store3','your customers',4],
      ['your customers','BOUGHT ONLY FROM YOU',27],
      ['your customers','bought later from Store2',9],
      ['your customers','bought later from Store4',7]]);

What I would like in descending order of importance:

  1. All links which start or end at a note that has "you" in its title should be one color.
  2. All notes which have "you" in its title should be one color.
  3. The color of #1 should depend on #2.
  4. All notes which refer to the same store should have the same color.

To achieve that I need to set the color of the notes and links independently. Is that possible and if so how?


EDIT 1: Solution

I was hoping for a bit more direct control of the colors but I guess this is as good as it gets. The colors are actually used in a predictable way (see code) even if the notes get reordered so I can create the color array based on the data to display.

Based on WhiteHat's answer:

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU',       // 01 new node -> 1st color
       'your customers',29],          // 02 new node -> 2nd color
      ['bought first from Store1',    // 03 new node -> 3rd color
       'your customers',9],           // 04 recuring node of 02 -> 2nd color
      ['bought first from Store2',    // 05 new node -> 4th color 
       'your customers',4],           // 06 recuring node of 02 -> 2nd color
      ['bought first from Store3',    // 07 new node -> 5th color
       'your customers',8],           // 08 recuring node of 02 -> 2nd color
      ['your customers',              // 09 recuring node of 02 -> 2nd color
       'BOUGHT ONLY FROM YOU',13],    // 10 new node -> 6th color
      ['your customers',              // 11 recuring node of 02 -> 2nd color
       'bought later from Store2',9], // 12 new node -> 7th color
      ['your customers',              // 13 recuring node of 02 -> 2nd color
       'bought later from Store4',7]  // 14 new node -> 8th color
    ]);

    var options = {
      sankey: {
        node: {
          // node colors will cycle thru array
          colors: [
            'magenta',
            'magenta',
            'cyan',
            'green',
            'yellow',
            'magenta',
            'green',
            'blue'
          ]
        },
        link: {
          colorMode: 'source'
        }

      }
    };

    var chart = new google.visualization.Sankey(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['sankey']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
like image 870
Holly Avatar asked Oct 20 '25 22:10

Holly


1 Answers

to color one node different from the rest,

use the sankey.node.colors config option

it takes an array of color strings which will be mapped to the nodes

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU','your customers',29],
      ['bought first from Store1','your customers',9],
      ['bought first from Store2','your customers',8],
      ['bought first from Store3','your customers',4],
      ['your customers','BOUGHT ONLY FROM YOU',27],
      ['your customers','bought later from Store2',9],
      ['your customers','bought later from Store4',7]
    ]);

    var options = {
      sankey: {
        node: {
          // node colors will cycle thru array
          colors: [
            'magenta',
            'cyan',
            'cyan',
            'cyan'
          ]
        }
      }
    };

    var chart = new google.visualization.Sankey(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['sankey']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
like image 53
WhiteHat Avatar answered Oct 25 '25 03:10

WhiteHat



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!