javascriptgoogle-visualizationsankey-diagram
Change link colors of Google Chart Sankey diagram
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:
Solution
I commented a few lines in your code to get the following result. (I also changed the colors of the first three data rows to red, green, and blue to make it clear the link colors are being read from the list. The other links should be colored as expected from the data rows):
I simply commented out part of your chart options that were overriding the styles defined in your rows:
// Set chart options
var options = {
height: 400,
sankey: {
node: {
colors: colors,
width: 5,
nodePadding: 1
},
link: {
// Uncommenting any of these lines overrides the link colors defined in the data above.
// colorMode: 'gradient',
// colors: colors
}
}
};
Full modified code:
<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, 0, 0)'], // Color changed to red.
['C0_1', 'C1_2', 164, 'color: rgb(0, 255, 0)'], // Color changed to green.
['C1_1', 'C0_2', 123, 'color: rgb(0, 0, 255)'], // Color changed to blue.
['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: {
// Uncommenting these lines overrides the link colors defined in the data above.
// 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>
- XForms Refresh not working? (XSLTForms 1.7)
- Why won't a simple image load in Phaser in the browser?
- Counting cells with a specific class in JavaScript
- How to join / combine two arrays to concatenate into one array?
- Execution order of GS files in a Project
- TypeScript Type-safe Omit Function
- how can i change html input to change to decimal when pressing comma while typing
- HTML5 enable Previous/Next track when playing Video/Audio
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Imitate webserver for tests with Jest
- Check if IndexedDB database exists
- How do you mix the conditional operator ( ? : ) and deconstructed function returns?
- Use API to autofill form options?
- Display JavaScript Fetch for JsonResponse 2 Tables on HTML
- How to count number of social shares on web page locally
- How do I fix CORS issue in Fetch API
- Firebase Cloud Functions: Difference between onRequest and onCall
- Model.create is not a function - strapi
- Button in a table cell to open a modal dialog
- File API - Blob to JSON
- How to check if a variable is a blob in JavaScript
- Where to save a JWT in a browser-based application and how to use it
- React Native <Modal /> onDismiss not invoked
- Font-Awesome icon does not show in my ReactJS website
- How to clear/reset mocks in Vitest
- Combining two arrays to form a JavaScript object
- I want to make an SVG a random color every time s is hit
- Why does console.log report the value of my variable, but return doesn't?
- Javascript case sensitive
- Load and execute a javascript file from S3 in a Lambda