Free javascript Hosting


barchartstacked.js

Uploaded on Nov 08 2021 23:38 by amnesiary

const createChart = () => {

console.log('Loaded!')

let dataArray = [
['', 'Project Alpha', 'Project Epsilon', 'Project Gamma', 'Project Phi', 'Project Theta', 'Project Kappa', {
role: 'annotation'
}],
['Law firm A', 21, 18, 10, 8, 7, 2, ''],
['Law firm B', 27, 16, 10, 5, 6, 10, ''],
['Law firm C', 11, 23, 8, 13, 21, 3, ''],
['Law firm D', 17, 15, 10, 7, 5, 1, '']
];

// Do not touch
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable(dataArray);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2
]);
var options = {
chartArea: {
top: 0,
left: 80,
'width': '90%',
'height': '85%'
},
legend: {
position: 'bottom'
},
width: 1200,
height: 600,
/* Cool 1 */
series: {
0: {
color: '#b23427'
},
1: {
color: '#425563'
},
2: {
color: '#65a09c'
},
3: {
color: '#b5bd00'
},
4: {
color: '#9aa4b1'
},
5: {
color: '#4b7975'
},
6: {
color: '#6bbbae'
},
7: {
color: '#505456'
},
8: {
color: '#a2a900'
},
9: {
color: '#787f00'
}
},
/* Cool 2 */
// series: {
// 0:{color:'#b23427'},
// 1:{color:'#425563'},
// 2:{color:'#9290c6'},
// 3:{color:'#4b7975'},
// 4:{color:'#65a09c'},
// 5:{color:'#c7bcb9'},
// 6:{color:'#5c5a7b'},
// 7:{color:'#acafb2'},
// 8:{color:'#7977a2'},
// 9:{color:'#6bbbae'}
// },
/* Cool 3 */
// series: {
// 0:{color:'#b23427'},
// 1:{color:'#425563'},
// 2:{color:'#b5bd00'},
// 3:{color:'#9290c6'},
// 4:{color:'#acafb2'},
// 5:{color:'#5c5a7b'},
// 6:{color:'#a2a900'},
// 7:{color:'#787f00'},
// 8:{color:'#c7bcb9'},
// 9:{color:'#7977a2'}
// },
/* Warm 1 */
// series: {
// 0:{color:'#b23427'},
// 1:{color:'#425563'},
// 2:{color:'#f1c400'},
// 3:{color:'#b5bd00'},
// 4:{color:'#9aa4b1'},
// 5:{color:'#4b7975'},
// 6:{color:'#6bbbae'},
// 7:{color:'#505456'},
// 8:{color:'#9aa4b1'},
// 9:{color:'#892c4a'}
// },
/* Warm 2 */
// series: {
// 0:{color:'#b23427'},
// 1:{color:'#425563'},
// 2:{color:'#f1c400'},
// 3:{color:'#c9a300'},
// 4:{color:'#c7bcb9'},
// 5:{color:'#947a00'},
// 6:{color:'#505456'},
// 7:{color:'#9aa4b1'},
// 8:{color:'#c16602'},
// 9:{color:'#ea7600'}
// },
/* Warm 3 */
// series: {
// 0:{color:'#b23427'},
// 1:{color:'#425563'},
// 2:{color:'#ea7600'},
// 3:{color:'#914d00'},
// 4:{color:'#9aa4b1'},
// 5:{color:'#c16602'},
// 6:{color:'#c7bcb9'},
// 7:{color:'#aa365d'},
// 8:{color:'#c9a300'},
// 9:{color:'#f1c400'}
// },
isStacked: true,
vAxis: {
textStyle: {
color: '#425563'
}
},
hAxis: {
textStyle: {
color: '#425563'
}
},
tooltip: {
textStyle: {
color: '#425563'
}
},
bar: { groupWidth: '45%' }
};

var chart = new google.visualization.BarChart(document.getElementById('barchart_material'));
chart.draw(data, options);
}

}

export default createChart;

Back to list