JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">Pie Chart for file_C</div>
<form>
<input id='file_C' type="button" value="file_C" onclick="getParams(this.id)">
</form>
JavaScript
var files = ['file_A', 'file_B', 'file_C', 'file_D'];
var contributions = [['jack:2', 'yep:4', 'nah:7', 'woo:2'], ['jack:6', 'yep:1', 'nah:8', 'woo:4'], ['jack:7', 'yep:3', 'nah:4', 'woo:6'], ['jack:4', 'yep:2', 'nah:1', 'woo:7']];
var createChart = function (data, fileName, driveName) {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme3", //colour/text selection
title:{
text: "User %/Actions for " + fileName + " in Drive " + driveName
}, //title with parameters
data: [
{
type: "pie", //type of graph
showInLegend: true, //legend or no legend
toolTipContent: "{y} - #percent %", //value and % when hover over segment
legendText: "{indexLabel}", //names of users
dataPoints: data //data in the form of contributions : user
}
]
});
chart.render();
}
var driveName = '';
var fileName = null;
var wantedNames = [];
var wantedVals = [];
var wantedInfo = [];
var data = [];
function getParams(clickedID) {
wantedNames = [];
wantedVals = [];
wantedInfo = [];
driveName = 'test_drive';
fileName = clickedID;
for (var i = 0; i < files.length; i++) {
wantedInfo.push(contributions[i]);
if (files[i] == clickedID) {
for (var j = 0; j < contributions[i].length; j++) {
wantedNames.push(contributions[i][j].split(':')[0]);
wantedVals.push(contributions[i][j].split(':')[1]);
}
}
}
create_pie_chart(driveName, fileName, wantedNames, wantedVals);
}
function create_pie_chart(drive_name, file_name, users, contributions) {
driveName = drive_name; //string taken as paramater
fileName = file_name; //string taken as parameter
usersArr = users; //array of strings taken as parameter
contributionsArr = contributions; //array of ints taken as parameter
N = usersArr.length; //length of users &/or contributions array
data = [];
//filling the data...