Troubleshoot javascript not returning a unique variable value

Question

I'm trying to set a string value for "nodeClass" depending on a value returned in variable empCat. Current code is below:

function drawChart(items) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Title'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); for (var i = 0; i < items.length; i++) { var empTitle = items[i].Title; var empName = items[i].FullName !== null ? items[i].FullName.toString() : ''; var empManager = items[i].Manager !== null ? items[i].Manager.toString() : ''; var empInfo = items[i].CategoryDescription; var empCat = items[i].OData__Category; data.addRow([{v: empTitle, f: empTitle + '<span>' + empName + '</span>'},items[i].Manager.Title,empInfo]); var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); if (empCat == "BLU") { chart.draw(data, { allowHtml: true, nodeClass: 'BLU', }); } else { chart.draw(data, { allowHtml: true, nodeClass: 'GRN', }); } } } 

The returned value of empCat could be either BLU, GRN, or null, and if I set an alert on empCat it will cycle through them as each element is drawn. However, it's always applying that class to every element, even when the value is not "BLU".

This is for a google chart implementation on SharePoint 2013. If any additional info is needed to troubleshoot please let me know. Any help would be greatly appreciated!

Answer 1

This isn't really a SharePoint question, is it?

Anyways, your JS appears to be redrawing the chart on every pass through the loop? I've never used google OrgChart before but the dataset should be built, then bound to the chart, right?

Looking at this example, it appears to setup the dataset, THEN draws it once.

https://developers.google.com/chart/interactive/docs/gallery/orgchart

Answer 2

It's a SharePoint implementation of Google Charts, so I thought it would be appropriate here. I believe the chart is only drawn one, unless you enable collapsing the chart. Then it redraws whenever you click a parent.