We are trying to use a third-party Pie-chart in SAS VA 8.2 using Data Driven Control. We have added the event handlers in the code, still we are able to see only the sample data. No changes are seen in the pie chart when i add roles. Basic pie chart with sample data is seen.
Following code is used:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script src="../jquery.csv.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);
var initialized = true;
var _chartData = null;
var data = null;
var bar = null;
var options = {
is3D: true,
chartArea: {
left: 80,
bottom: 100,
width: '100%',
height: '100%'
},
piesliceText: 'label',
legend: {
position: 'bottom'
},
width: '100%',
height: '100%'
};
function onMessage (evt) {
if (evt && evt.data & evt.data.hasOwnProperty("data"))
updateData (evt.data);
}
if (window.addEventListener) {
//For standards-compliant web browsers
window.addEventListener("message", onMessage, false);
}
else {
window.attachEvent("onmessage", onMessage);
}
//create trigger to resizeEnd event
$(window).resize(function() {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger ('resizeEnd');
}, 25);
});
//redraw graph when window resize is complete
$(window).on('resize End', function() {
drawChart();
});
function drawchart()
{
if (bar)
bar.draw(data,options);
}
function updateData(chartData)
{
if (!initialized)
{
_chartData = chartData;
return;
}
if (chartData) {
var arrayData;
var columnInfo = chartData.columns;
if (chartData.data)
{
arrayData = chartData.data;
if (columnInfo)
{
arrayData.splice(0, 0, columnInfo);
}
}
data = google.visualization.arrayToDataTable(arrayData);
}
else {
data = google.visualization.arrayToDataTable([
]);
}
bar = new google.visualization.PieChart(document.getElementById('piechart'));
drawChart();
}
function drawBasic() {
var _data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7],
['Relax TV', 1],
['Exercise', 1.5],
['Read', 1],
['Meditate', .5]
]);
var _options = {
title: 'My Daily Activities',
is3D: true,
width: '900px',
height: '500px',
piesliceText: 'label',
};
var bar = new google.visualization.PieChart(document.getElementById('piechart'));
bar.draw(_data, _options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
