SAPUI5: How to display row index in table - html
I am new to SAPUI5 and I have assignment to display row index (consecutive numbering) in table (sap.ui.table.Table). For Example, I have this data in table:
Dente Al
Friese Andy
Mann Anita
and so on..
I want it to have column with row index, (preferably that will count from 1 to 3 even if rows are filtered/sorted):
1 Dente Al
2 Friese Andy
3 Mann Anita
Is there any UI component or some rendering callback or similar that will help me solve this problem in SAPUI5 manner?
Here is the code example:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
</head>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
//Define some sample data
var aData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris"},
{lastName: "Open", name: "Doris"},
{lastName: "Dewit", name: "Kenya"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
width: "200px"
}));
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
//Initially sort the table
oTable2.sort(oTable2.getColumns()[0]);
//Bring the table onto the UI
oTable2.placeAt("content");
});
</script>
<body class="sapUiBody" id="content">
</body>
</html>
Another Solution (besides one answered):
This solution is based on modifying table rows directly. Although modifying model is preferable, our current project circumstances might not allow model editing:
Add Index column:
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Index"}),
template: new sap.ui.commons.TextView({
text: "12"
}),
width: "200px"
}));
After binding was successful (or in onAfterRendering event in controller), use following code:
for (var i = 0, len = oTable2.getRows().length; i < len; i++){
var row = oTable2.getRows()[i];
var firstControl = row.getCells()[0];
firstControl.setText(row.getIndex()+1);
};
If you are using controller/jsview, make sure to give id to your table with createId method in jsview and to get component in controller by using byId method.
This can be done without having to add a "rowIndex" property to the model, but instead by using a formatter function which gets the index from the BindingContext path (which in this example would look like "/modelData/x" where x is the index of the item in the model).
Please see the modified code below. Note the use of the formatRowNumber function.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8"/>
</head>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
//Define some sample data
var formatRowNumber = function(val) {
if(!this.getBindingContext()) return null;
var index = this.getBindingContext().getPath().split("/")[2];
// (an example of path value here is "/modelData/0")
return parseInt(index) + 1;
};
var aData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris"},
{lastName: "Open", name: "Doris"},
{lastName: "Dewit", name: "Kenya"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Index"}),
template: new sap.ui.commons.TextView().bindProperty("text", {path: '', formatter:formatRowNumber}),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
width: "200px"
}));
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
//Initially sort the table
oTable2.sort(oTable2.getColumns()[0]);
//Bring the table onto the UI
oTable2.placeAt("content");
});
</script>
<body class="sapUiBody" id="content">
</body>
</html>
See the screenshot below:
Please find the updated function code hope this helps
sap.ui.getCore().attachInit(function() {
//Define some sample data
var aData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris"},
{lastName: "Open", name: "Doris"},
{lastName: "Dewit", name: "Kenya"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3
});
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Index"}),
template: new sap.ui.commons.TextView().bindProperty("text", "rowIndex"),
width: "200px"
}));
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
width: "200px"
}));
function fnAppenData(count,data, objName){
return Array.apply(null, Array(count)).map(function(obj, i) {
var obj = data[i];
var name = data[i][objName];
data[i][objName] = (i + 1) + " " + name;
data[i]["rowIndex"] = (i + 1);
var returndata = data[i];
return returndata;
//return {name: names[i % names.length] + i};
});
}
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel(fnAppenData(aData.length, aData, "lastName"));
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
//Initially sort the table
oTable2.sort(oTable2.getColumns()[0]);
//Bring the table onto the UI
oTable2.placeAt("content");
});
sample output:
Related
Razor chart.js labels/data not in sync
I have a Razor application that generates three columns of data to use in a chart graph. The page and javascript to do that looks like this:
<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var Maanden = [];
var Totalen = [];
#foreach (var m in Model.Grafieks)
{
#:Maanden.push("#m.maand" + "-" + "#m.jaar");
#:Totalen.push(#m.Total);
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Maanden,
datasets: [
{ label: 'Facturen €',
data: Totalen,
backgroundColor: 'rgb(255, 255, 132)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
}
]
},
});
</script>
Problem is that the labels are displayed OK but the data is off. Every second column is empty and its data pushed to the next column:
Chrome says:
Is there something wrong pushing the data into the arrays?
I had to convert the comma in decimal Totalen to a period!
#foreach (var m in Model.Grafieks)
{
#:Maanden.push("#m.maand" + "-" + "#m.jaar");
<text>bedrag = parsePotentiallyGroupedFloat("#m.Total");</text>
#:Totalen.push(bedrag);
}
function parsePotentiallyGroupedFloat(stringValue) {
stringValue = stringValue.trim();
var result = stringValue.replace(/[^0-9]/g, '');
if (/[,\.]\d{2}$/.test(stringValue)) {
result = result.replace(/(\d{2})$/, '.$1');
}
return parseFloat(result);
}
The function "parsePotentiallyGroupedFloat" is from here: Convert String with Dot or Comma as decimal separator to number in JavaScript
Add Information to Google Timeline bar Hover
I'm trying to add three new sections to the hover pop-up on a bar in google timeline charts.
I have tried using the google timeline help but cannot find a solution
The default is Title / Time / Duration, however I want to add Arena / Website
I have created the below code for this as an example.
<DIV>
<p><font face="verdana" size="6" color="Black">Thursday</font></p>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Federation' });
dataTable.addColumn({ type: 'string', id: 'Event' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'WWE / NXT', 'AXXESS', new Date(0,0,0,18,0,0), new Date(0,0,0,22,0,0)],
[ 'WWN', 'Matt Riddles Bloodsport', new Date(0,0,0,15,0,0), new Date(0,0,0,18,0,0)],
[ 'WrestleCon', 'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0)],
[ 'WWN', 'Evolve', new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0)],
[ 'WrestleCon', 'WrestleCon Supershow', new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0)],
[ 'Knockout', 'Knockout in NOLA', new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0)],
[ 'ROH', 'RoH Supercard of Honor', new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0)],
[ 'WWN', 'Beyond Wrestling', new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0)]]);
var options = {
timeline: { colorByRowLabel: true },
tooltip: {isHtml: true},
legend: 'none',
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 300px;"></div>
</DIV>
you can add your own custom tooltip, see Customizing tooltips in the Timeline reference
the tooltip column will just be a string, either a simple value or html
see following working snippet,
here, a DataView is used to add the tooltip column.
this allows the tooltip to be built dynamically based on the data in the data table
also, the arena is added to the original data table, for easy reference,
but is excluded from the data view...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Federation' });
dataTable.addColumn({ type: 'string', id: 'Event' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', id: 'Arena' });
dataTable.addRows([
['WWE / NXT', 'AXXESS', new Date(0,0,0,18,0,0), new Date(0,0,0,22,0,0), 'Arena A'],
['WWN', 'Matt Riddles Bloodsport', new Date(0,0,0,15,0,0), new Date(0,0,0,18,0,0), 'Arena B'],
['WrestleCon', 'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0), 'Arena C'],
['WWN', 'Evolve', new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0), 'Arena D'],
['WrestleCon', 'WrestleCon Supershow', new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0), 'Arena E'],
['Knockout', 'Knockout in NOLA', new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0), 'Arena F'],
['ROH', 'RoH Supercard of Honor', new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0), 'Arena G'],
['WWN', 'Beyond Wrestling', new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0), 'Arena H']]);
var options = {
timeline: { colorByRowLabel: true },
tooltip: {isHtml: true},
legend: 'none',
backgroundColor: '#ffd'
};
var formatTime = new google.visualization.DateFormat({
pattern: 'HH:mm:ss a'
});
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 1, {
role: 'tooltip',
type: 'string',
calc: function (dt, row) {
// build tooltip
var dateBegin = dt.getValue(row, 2);
var dateEnd = dt.getValue(row, 3);
var oneHour = (60 * 60 * 1000);
var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;
var tooltip = '<div><div class="ggl-tooltip"><span>';
tooltip += dt.getValue(row, 0) + ':</span> ' + dt.getValue(row, 1) + '</div>';
tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
tooltip += formatTime.formatValue(dateEnd) + '</div>';
tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' hours</div></div>';
tooltip += '<div class="ggl-tooltip"><span>Arena: </span>' + dt.getValue(row, 4) + '</div></div>';
return tooltip;
},
p: {html: true}
}, 2, 3]);
chart.draw(view.toDataTable(), options); // <-- use data view to draw chart
});
.ggl-tooltip {
background-color: #ffffff;
border: 1px solid #e0e0e0;
font-family: Arial, Helvetica;
font-size: 14px;
padding: 8px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>
Set combobox in dojo datagrid cell depands on value type
Can anybody help me how to set Combobox in DataGrid (dojox/grid) cells programmatically for each cell in column separately?
Structure parameter: cellType does its job, but all cells in column inherit defined type.
With formatter function we can return Combobox object but it has different behaviour then Combobox inserted with cellType.
I'm thinking also about onStartEdit function but I do not have idea how to implement that.
What I want to achieve is that if in cell is value which is text then I want to show combobox with all possibilities. In case of value as a number than I don't want to show combobox at all.
Sample code: (Dojo version 1.9.11)
require([
"dojo/data/ItemFileReadStore",
"dojo/store/Memory",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/dom",
"dojo/dom-construct",
"dijit/form/ComboBox",
"dojox/grid/cells/dijit",
"dojo/dom-style",
"dojo/domReady!"],
function(ItemFileReadStore, Memory, DataGrid, ObjectStore, dom, domConstruct, ComboBox, dijit, domStyle){
var dataArray = [];
var dataMemory = new Memory({data:dataArray});
var gridStruc = [];
gridStruc.push({name: 'Name', field: 'col1', width: '100px', editable: false});
gridStruc.push({name: 'Type', field: 'col2', width: '100px', editable: false});
gridStruc.push({name: 'Value (cellType)', field: 'col3', width: '100px', editable: true, cellType: 'dojox.grid.cells.ComboBox', options: ["Test1","Test2"]});
gridStruc.push({name: 'Value (formatter)', field: 'col4', width: '100px', editable: true, formatter: formatterCb});
var columnObj0 = {};
columnObj0["col1"] = "Voltage";
columnObj0["col2"] = "Number";
columnObj0["col3"] = "5";
columnObj0["col4"] = "5";
dataMemory.put(columnObj0);
var columnObj1 = {};
columnObj1["col1"] = "Type";
columnObj1["col2"] = "Text";
columnObj1["col3"] = "THT";
columnObj1["col4"] = "THT";
dataMemory.put(columnObj1);
var columnObj2 = {};
columnObj2["col1"] = "Num. Reflow";
columnObj2["col2"] = "Number";
columnObj2["col3"] = "3";
columnObj2["col4"] = "3";
dataMemory.put(columnObj2);
var columnObj3 = {};
columnObj3["col1"] = "Series";
columnObj3["col2"] = "Text";
columnObj3["col3"] = "CBK34";
columnObj3["col4"] = "CBK34";
dataMemory.put(columnObj3);
var dataStore = new ObjectStore({ objectStore: dataMemory});
grid = new DataGrid({
store: dataStore,
structure: gridStruc
},"gridDiv");
grid.startup();
function formatterCb(value, rowIndex, rowItem)
{
var storeItems=[];
storeItems.push({name: "Test1", value: "test1"});
storeItems.push({name: "Test2", value: "test2"});
var store = new ItemFileReadStore({data: {identifier:"name", items: storeItems}});
var w = new ComboBox({
label: "Use Input",
store: store,
value: value
});
w._destroyOnRemove = true;
return w;
}
});
I think defining formatter function may help.
Take a look at this example from documentation
function formatCell(value){
//perform your logic here
}
var layout = [
{
name: 'Cell1',
field: 'id'
},
{
name: 'Cell2',
field: 'date',
formatter: formatCell
}
];
In your case it will be here:
gridStruc.push({name: 'Name', formatter: formatCell, field: 'col1', width: '100px', editable: false});
I have no idea why do you use array.push, but it doesn't matter in this case.
Also check this tutorial, there is an example how to put widget in cell. It may be helpful.
Google Visualization Column Chart set a data column from query as role: "Style"
I have a Google Visualization Column Chart from a query that works fine. I can set the a columns with a style role after the query by using the code snippet below. It adds a new column to the query data and sets the role as "Style". This colors each of the column chart bars accordingly. But I want to be able to use one of my query columns "C" for example as the color code and not have to add it afterward. I can't seem to get this to work. Any ideas? I posted more of my code below the snippet so you can see where I'm coming from. Thanks so much guys for any help you can give. Brandon
var data = response.getDataTable();
data.addColumn({type: "string", role: "style" });
data.setCell(0,2,'red');
data.setCell(1,2,'orange');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');
// More code above this, but I ommited it.
function drawDashboard() {
var query = new google.visualization.Query(
'URL');
query.setQuery('SELECT A, B, C');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
data.addColumn({type: "string", role: "style" });
data.setCell(0,2,'red');
data.setCell(1,2,'orange');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var scoreSlider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
options: {
filterColumnLabel: 'Class AVG'
}
});
var ClassFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'Classfilter_div',
options: {
'filterColumnLabel': 'Teacher Name','ui': { 'labelStacking': 'veClasscal','allowTyping': true,'allowMultiple': true
}
}});
// Create a Column Bar chart, passing some options
var columnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
title: 'Math Proficiency by Class',
height: 320,
width: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"60%"},
hAxis: {textStyle: {fontSize:14}, title: 'Teacher Name', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
vAxis: {minValue: 0, maxValue: 100, title: 'Math Proficiency AVG', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
legend: {position: 'none'},
animation: {duration:1500, easing:'out'},
colors: ['#a4c2f4','#3c78d8']
},
view: {columns: [0, 1, 2]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
dataTable: data,
containerId: 'table_div',
options: {
width: '400px'
},
view: {columns: [0, 1,]}
});
// Establish dependencies, declaring that 'filter' drives 'ColumnChart',
// so that the column chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind([scoreSlider], [table, columnChart]);
dashboard.bind([ClassFilter], [table, columnChart]);
// Draw the dashboard.
dashboard.draw(data);
}// More code below this, but I ommited it.
I'm not sure how you would add this to a column in the query but...
using a DataView with a calculated column should work...
Assumes the value you want to test is in the second column -- index 1
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: "string",
role: "style",
calc: function (dataTable, rowIndex) {
if (dataTable.getValue(rowIndex, 1) < 0.69) {
return 'color: red;';
} else if ((dataTable.getValue(rowIndex, 1) >= 0.69) && (dataTable.getValue(rowIndex, 1) <= 0.79)) {
return 'color: yellow;';
} else {
return 'color: green;';
}
}
}]);
updating a CanvasJS Chart from fields on HTML form
I've got a simple graph built that I want to update from fields on my HTML form. I can get the graph to render when I put in "hard-coded" numbers - but when I attempt to use variable declarations instead it doesn't work.
I would also like it to re-render the chart onchange...
I know you are all going to just shake your head at the simplicity of this, and I will too probably - AFTER someone enlightens me as to what I'm doing wrong or NOT doing.
Anyway - here is the code for the 3 fields and the graph (You'll notice I've used the variables "q", "c", and "b" under "dataPoints:"):
<!DOCTYPE HTML>
<form>
<label for="QSUMTOT">QSUMTOT entry:</label>
<input id='QSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
<label for="CSUMTOT">CSUMTOT entry:</label>
<input id='CSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
<label for="BSUMTOT">BSUMTOT entry:</label>
<input id='BSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
<div id="chartContainer" style="height: 300px; width: 400px;"></div>
</form>
<script type="text/javascript" src="assets/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var q = document.getElementById("QSUMTOT").value;
var c = document.getElementById("CSUMTOT").value;
var b = document.getElementById("BSUMTOT").value;
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Graphic results of Analysis"
},
data: [//array of dataSeries
{ //dataSeries object
type: "column",
dataPoints: [
{ label: "Quality System", y: q },
{ label: "Compliance", y: c },
{ label: "Business", y: b }
]
}
]
});
chart.render();
}
</script>
Discovered the answer quite by accident:
function summary(){
var qSumTot = document.getElementById("QTOT").value;
var cSumTot = document.getElementById("CTOT").value;
var bSumTot = document.getElementById("BTOT").value;
var q = qSumTot.substring(0, qSumTot.length -1);
var c = cSumTot.substring(0, cSumTot.length -1);
var b = bSumTot.substring(0, bSumTot.length -1);
var analTot = [q * 1, c * 1, b * 1]
var str = document.getElementById('SUMTOT').value;
var rstr = str.substring(0, str.length - 1);
var qms = analTot[0];
var comp = analTot[1];
var bus = analTot[2];
document.getElementById("QSUMTOT").value = qSumTot;
document.getElementById("CSUMTOT").value = cSumTot;
document.getElementById("BSUMTOT").value = bSumTot;
document.getElementById('SUMTOT').value = (parseInt(((q*1) + (c*1) + (b*1))/3) + "%");
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Graph of Analysis"
},
axisY:{
suffix: "%"
},
data: [{
type: "column",
toolTipContent: "{y}%",
dataPoints: [{
label: "QMS",
y: qms
}, {
label: "Compliance",
y: comp
}, {
label: "Business",
y: bus
}]
}]
});
chart.render();
}