jstaylor01 asked on reddit
Just to be clear, the 0.33 is part of the 0.4, which is part of the 1.2, which is part of the 25.
The treemap is my answer
jstaylor01 asked on reddit
Just to be clear, the 0.33 is part of the 0.4, which is part of the 1.2, which is part of the 25.
The treemap is my answer
<html> | |
<head> | |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | |
<script type="text/javascript"> | |
google.charts.load('current', {'packages':['treemap']}); | |
google.charts.setOnLoadCallback(drawChart); | |
function drawChart() { | |
var data = google.visualization.arrayToDataTable([ | |
['node', 'parent', 'size', 'color'], | |
['total (25)', null, 0, 0], | |
['23.8/25', 'total (25)', 23.8, 0], | |
['1.2/25', 'total (25)', 0, 0], | |
['0.8/1.2', '1.2/25', 0.8, 0], | |
['0.4/1.2', '1.2/25', 0.4, 0], | |
['0.07/0.4', '0.4/1.2', 0.07, 0], | |
['0.33/0.4', '0.4/1.2', 0.33, 0] | |
]); | |
tree = new google.visualization.TreeMap(document.getElementById('chart_div')); | |
tree.draw(data, { | |
minColor: '#f00', | |
midColor: '#ddd', | |
maxColor: '#0d0', | |
headerHeight: 15, | |
fontColor: 'black', | |
showScale: true | |
}); | |
} | |
</script> | |
</head> | |
<body> | |
<div id="chart_div" style="width: 900px; height: 500px;"></div> | |
</body> | |
</html> |