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>
You had a few typos in your code:
if (evt && evt.data & evt.data.hasOwnProperty("data"))to
if (evt && evt.data && evt.data.hasOwnProperty("data"))
function drawchart()
function drawChart()
Full updated code:
<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>
During development - you may want to enable the developer console (F12 in chrome) - it typically shows syntax errors like these.
Hope this helps!
Falko
You had a few typos in your code:
if (evt && evt.data & evt.data.hasOwnProperty("data"))to
if (evt && evt.data && evt.data.hasOwnProperty("data"))
function drawchart()
function drawChart()
Full updated code:
<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>
During development - you may want to enable the developer console (F12 in chrome) - it typically shows syntax errors like these.
Hope this helps!
Falko
Thank You Falko. It works perfect now.
Registration is now open for SAS Innovate 2025 , our biggest and most exciting global event of the year! Join us in Orlando, FL, May 6-9.
Sign up by Dec. 31 to get the 2024 rate of just $495.
Register now!
See how to use one filter for multiple data sources by mapping your data from SAS’ Alexandria McCall.
Find more tutorials on the SAS Users YouTube channel.