I have a list of lists with [from, to, value, color] entries. I want to create a Sankey diagram with it in google charts. Creating a basic Sankey diagram is not difficult, however, I would like to change the link colors based on the RGB values in the list. I read in the documentation that we can add an optional column role for style. So, I tried to add this in different ways:
data.addColumn({type: 'string',role: 'style'});
Or:
data.addColumn('string', 'style');
But none of them work. I also tried setting the color attribute to fill-color but to no avail. Lastly I also tried to edit the options variable at the bottom of the code, since the node and link colors are here also defined. But I'm not sure how to use the lists values here. Simply changing the colors list to a list of RGB values does not work, since the order is then not correct (wrong RGB values are assigned to the links). How do I make sure that the links are filled with the RGB value from the 4th element of the lists? The current output of the code can be found below.
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
google.charts.load("current", {
packages: ["sankey"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addColumn({
type: 'string',
role: 'style'
});
data.addRows([
['C0_1', 'C0_2', 638, 'color: rgb(255, 207, 207)'],
['C0_1', 'C1_2', 164, 'color: rgb(255, 130, 130)'],
['C1_1', 'C0_2', 123, 'color: rgb(255, 207, 207)'],
['C1_1', 'C1_2', 1313, 'color: rgb(255, 130, 130)'],
['C0_2', 'C0_3', 555, 'color: rgb(255, 212, 212)'],
['C0_2', 'C1_3', 105, 'color: rgb(255, 127, 127)'],
['C1_2', 'C0_3', 111, 'color: rgb(255, 212, 212)'],
['C1_2', 'C1_3', 1320, 'color: rgb(255, 127, 127)'],
['C0_3', 'C0_4', 495, 'color: rgb(255, 217, 217)'],
['C0_3', 'C1_4', 80, 'color: rgb(255, 119, 119)'],
['C1_3', 'C0_4', 157, 'color: rgb(255, 217, 217)'],
['C1_3', 'C1_4', 1223, 'color: rgb(255, 119, 119)'],
['C0_4', 'C0_5', 374, 'color: rgb(255, 219, 219)'],
['C0_4', 'C1_5', 32, 'color: rgb(255, 66, 66)'],
['C0_4', 'C2_5', 157, 'color: rgb(255, 186, 186)'],
['C1_4', 'C0_5', 91, 'color: rgb(255, 219, 219)'],
['C1_4', 'C1_5', 623, 'color: rgb(255, 66, 66)'],
['C1_4', 'C2_5', 545, 'color: rgb(255, 186, 186)'],
['C0_5', 'C0_6', 299, 'color: rgb(255, 225, 225)'],
['C0_5', 'C1_6', 27, 'color: rgb(255, 63, 63)'],
['C0_5', 'C2_6', 59, 'color: rgb(255, 170, 170)'],
['C1_5', 'C0_6', 13, 'color: rgb(255, 225, 225)'],
['C1_5', 'C1_6', 425, 'color: rgb(255, 63, 63)'],
['C1_5', 'C2_6', 197, 'color: rgb(255, 170, 170)'],
['C2_5', 'C0_6', 136, 'color: rgb(255, 225, 225)'],
['C2_5', 'C1_6', 135, 'color: rgb(255, 63, 63)'],
['C2_5', 'C2_6', 409, 'color: rgb(255, 170, 170)'],
['C0_6', 'C0_7', 273, 'color: rgb(255, 219, 219)'],
['C0_6', 'C1_7', 29, 'color: rgb(255, 62, 62)'],
['C0_6', 'C2_7', 62, 'color: rgb(255, 199, 199)'],
['C1_6', 'C0_7', 12, 'color: rgb(255, 219, 219)'],
['C1_6', 'C1_7', 440, 'color: rgb(255, 62, 62)'],
['C1_6', 'C2_7', 116, 'color: rgb(255, 199, 199)'],
['C2_6', 'C0_7', 49, 'color: rgb(255, 219, 219)'],
['C2_6', 'C1_7', 211, 'color: rgb(255, 62, 62)'],
['C2_6', 'C2_7', 382, 'color: rgb(255, 199, 199)'],
['C0_7', 'C0_8', 239, 'color: rgb(255, 208, 208)'],
['C0_7', 'C1_8', 9, 'color: rgb(255, 40, 40)'],
['C0_7', 'C2_8', 31, 'color: rgb(255, 192, 192)'],
['C1_7', 'C0_8', 39, 'color: rgb(255, 208, 208)'],
['C1_7', 'C1_8', 403, 'color: rgb(255, 40, 40)'],
['C1_7', 'C2_8', 210, 'color: rgb(255, 192, 192)'],
['C2_7', 'C0_8', 77, 'color: rgb(255, 208, 208)'],
['C2_7', 'C1_8', 106, 'color: rgb(255, 40, 40)'],
['C2_7', 'C2_8', 344, 'color: rgb(255, 192, 192)'],
['C0_8', 'C0_9', 222, 'color: rgb(255, 227, 227)'],
['C0_8', 'C1_9', 24, 'color: rgb(255, 49, 49)'],
['C0_8', 'C2_9', 47, 'color: rgb(255, 191, 191)'],
['C1_8', 'C0_9', 6, 'color: rgb(255, 227, 227)'],
['C1_8', 'C1_9', 367, 'color: rgb(255, 49, 49)'],
['C1_8', 'C2_9', 110, 'color: rgb(255, 191, 191)'],
['C2_8', 'C0_9', 49, 'color: rgb(255, 227, 227)'],
['C2_8', 'C1_9', 147, 'color: rgb(255, 49, 49)'],
['C2_8', 'C2_9', 369, 'color: rgb(255, 191, 191)'],
['C0_9', 'C2_10', 24, 'color: rgb(255, 188, 188)'],
['C0_9', 'C1_10', 9, 'color: rgb(255, 26, 26)'],
['C0_9', 'C0_10', 192, 'color: rgb(255, 204, 204)'],
['C1_9', 'C2_10', 156, 'color: rgb(255, 188, 188)'],
['C1_9', 'C1_10', 332, 'color: rgb(255, 26, 26)'],
['C1_9', 'C0_10', 40, 'color: rgb(255, 204, 204)'],
['C2_9', 'C2_10', 340, 'color: rgb(255, 188, 188)'],
['C2_9', 'C1_10', 90, 'color: rgb(255, 26, 26)'],
['C2_9', 'C0_10', 67, 'color: rgb(255, 204, 204)'],
['C2_10', 'C2_11', 297, 'color: rgb(255, 198, 198)'],
['C2_10', 'C1_11', 137, 'color: rgb(255, 19, 19)'],
['C2_10', 'C0_11', 62, 'color: rgb(255, 237, 237)'],
['C1_10', 'C2_11', 75, 'color: rgb(255, 198, 198)'],
['C1_10', 'C1_11', 319, 'color: rgb(255, 19, 19)'],
['C1_10', 'C0_11', 13, 'color: rgb(255, 237, 237)'],
['C0_10', 'C2_11', 27, 'color: rgb(255, 198, 198)'],
['C0_10', 'C1_11', 23, 'color: rgb(255, 19, 19)'],
['C0_10', 'C0_11', 210, 'color: rgb(255, 237, 237)'],
['C2_11', 'C2_12', 247, 'color: rgb(255, 191, 191)'],
['C2_11', 'C1_12', 95, 'color: rgb(255, 0, 0)'],
['C2_11', 'C0_12', 43, 'color: rgb(255, 226, 226)'],
['C1_11', 'C2_12', 182, 'color: rgb(255, 191, 191)'],
['C1_11', 'C1_12', 267, 'color: rgb(255, 0, 0)'],
['C1_11', 'C0_12', 12, 'color: rgb(255, 226, 226)'],
['C0_11', 'C2_12', 60, 'color: rgb(255, 191, 191)'],
['C0_11', 'C1_12', 9, 'color: rgb(255, 0, 0)'],
['C0_11', 'C0_12', 180, 'color: rgb(255, 226, 226)'],
['C2_12', 'C2_13', 261, 'color: rgb(255, 183, 183)'],
['C2_12', 'C0_13', 98, 'color: rgb(255, 226, 226)'],
['C2_12', 'C1_13', 107, 'color: rgb(255, 20, 20)'],
['C1_12', 'C2_13', 86, 'color: rgb(255, 183, 183)'],
['C1_12', 'C0_13', 12, 'color: rgb(255, 226, 226)'],
['C1_12', 'C1_13', 243, 'color: rgb(255, 20, 20)'],
['C0_12', 'C2_13', 26, 'color: rgb(255, 183, 183)'],
['C0_12', 'C0_13', 166, 'color: rgb(255, 226, 226)'],
['C0_12', 'C1_13', 6, 'color: rgb(255, 20, 20)'],
['C2_13', 'C1_14', 69, 'color: rgb(255, 33, 33)'],
['C2_13', 'C0_14', 62, 'color: rgb(255, 245, 245)'],
['C2_13', 'C2_14', 219, 'color: rgb(255, 142, 142)'],
['C0_13', 'C1_14', 13, 'color: rgb(255, 33, 33)'],
['C0_13', 'C0_14', 185, 'color: rgb(255, 245, 245)'],
['C0_13', 'C2_14', 38, 'color: rgb(255, 142, 142)'],
['C1_13', 'C1_14', 201, 'color: rgb(255, 33, 33)'],
['C1_13', 'C0_14', 3, 'color: rgb(255, 245, 245)'],
['C1_13', 'C2_14', 134, 'color: rgb(255, 142, 142)'],
['C1_14', 'C1_15', 261, 'color: rgb(255, 75, 75)'],
['C1_14', 'C0_15', 12, 'color: rgb(255, 239, 239)'],
['C0_14', 'C1_15', 17, 'color: rgb(255, 75, 75)'],
['C0_14', 'C0_15', 196, 'color: rgb(255, 239, 239)'],
['C2_14', 'C1_15', 275, 'color: rgb(255, 75, 75)'],
['C2_14', 'C0_15', 104, 'color: rgb(255, 239, 239)'],
['C1_15', 'C0_16', 67, 'color: rgb(255, 241, 241)'],
['C1_15', 'C1_16', 464, 'color: rgb(255, 68, 68)'],
['C0_15', 'C0_16', 254, 'color: rgb(255, 241, 241)'],
['C0_15', 'C1_16', 26, 'color: rgb(255, 68, 68)'],
['C0_16', 'C1_17', 36, 'color: rgb(255, 59, 59)'],
['C0_16', 'C0_17', 251, 'color: rgb(255, 242, 242)'],
['C1_16', 'C1_17', 406, 'color: rgb(255, 59, 59)'],
['C1_16', 'C0_17', 61, 'color: rgb(255, 242, 242)'],
['C1_17', 'C1_18', 370, 'color: rgb(255, 64, 64)'],
['C1_17', 'C0_18', 48, 'color: rgb(255, 241, 241)'],
['C0_17', 'C1_18', 40, 'color: rgb(255, 64, 64)'],
['C0_17', 'C0_18', 245, 'color: rgb(255, 241, 241)'],
['C1_18', 'C1_19', 342, 'color: rgb(255, 73, 73)'],
['C1_18', 'C0_19', 41, 'color: rgb(255, 250, 250)'],
['C0_18', 'C1_19', 43, 'color: rgb(255, 73, 73)'],
['C0_18', 'C0_19', 224, 'color: rgb(255, 250, 250)'],
['C1_19', 'C0_20', 43, 'color: rgb(255, 255, 255)'],
['C1_19', 'C1_20', 323, 'color: rgb(255, 84, 84)'],
['C0_19', 'C0_20', 202, 'color: rgb(255, 255, 255)'],
['C0_19', 'C1_20', 41, 'color: rgb(255, 84, 84)'],
['C0_20', 'C1_21', 37, 'color: rgb(255, 97, 97)'],
['C0_20', 'C0_21', 188, 'color: rgb(255, 241, 241)'],
['C1_20', 'C1_21', 290, 'color: rgb(255, 97, 97)'],
['C1_20', 'C0_21', 55, 'color: rgb(255, 241, 241)']
]);
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'
];
// Set chart options
var options = {
height: 400,
sankey: {
node: {
colors: colors,
width: 5,
nodePadding: 1
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
Current output: 
from Change link colors of Google Chart Sankey diagram
No comments:
Post a Comment