Hi I am using a Google pie chart as a stored procedure in SAS VA.
I can get the JS to run fine but I am trying to determine how to add sas values in place of the JS addrows data. I tried using SAS macros but it doesn't work. Is there a way to automatically add the data values from SAS into the data.addRows in JS?
I want to replace the below with SAS values not the hand entered text.
Thanks in advance. I have been all over Google search.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Created Cards', 7],
['Cards Printed', 1],
['Sent Emails', 1],
['Unique HCPs', 1],
['Engaged', 2]
]);
/* create the sas table */
Data work.toppings;
topping='Mushrooms'; output;
topping='Onions'; output;
topping='Olives'; output;
topping='Zucchini';output;
topping='Pepperoni';output;
run;
/* sort the data */
proc sort data = toppings;
by topping;
run;
data _null_;
file _webout;
set work.toppings end=eof;
by topping;
if _N_ = 1 then
do; /* first row */
put " <html> ";
put " <head> ";
put " <!--Load the AJAX API--> ";
put ' <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ';
put ' <script type="text/javascript"> ';
put " // Load the Visualization API and the corechart package. ";
put " google.charts.load('current', {'packages':['corechart']}); ";
put " // Set a callback to run when the Google Visualization API is loaded. ";
put " google.charts.setOnLoadCallback(drawChart); ";
put " // Callback that creates and populates a data table, ";
put " // instantiates the pie chart, passes in the data and ";
put " // draws it. ";
put " function drawChart() { ";
put " // Create the data table. ";
put " var data = new google.visualization.DataTable(); ";
put " data.addColumn('string', 'Topping'); ";
put " data.addColumn('number', 'Slices'); ";
put " data.addRows([ ";
put "['" topping "',1],"; /* output the first topping since it is first row. */
end; /* first row */
else
do; /* Not first row */
put "['" topping "',1],";
if eof then
do; /* eof */
put "['" topping "',2]";
put " ]); ";
put " // Set chart options ";
put " var options = {'title':'How Much Pizza I Ate Last Night', ";
put " 'width':400, ";
put " 'height':300}; ";
put " // Instantiate and draw our chart, passing in some options. ";
put " var chart = new google.visualization.PieChart(document.getElementById('chart_div')); ";
put " chart.draw(data, options); ";
put " } ";
put " </script> ";
put " </head> ";
put " <body> ";
put " <!--Div that will hold the pie chart--> ";
put ' <div id="chart_div"></div> ';
put " </body> ";
put " </html> ";
end; /* eof */
end; /* Not first row */
run;
Have you looked at Data Driven Content Objects in SAS Visual Analytics? Seems tailor-made for the thing you want to do: drive a 3rd-party visualization but with your SAS report data.
Thank you for the quick response. Unfortunately I do not have SAS Viya yet. I should have added I am on SAS 9.4.
That looks like a great approach, once we have it.
/* create the sas table */
Data work.toppings;
topping='Mushrooms'; output;
topping='Onions'; output;
topping='Olives'; output;
topping='Zucchini';output;
topping='Pepperoni';output;
run;
/* sort the data */
proc sort data = toppings;
by topping;
run;
data _null_;
file _webout;
set work.toppings end=eof;
by topping;
if _N_ = 1 then
do; /* first row */
put " <html> ";
put " <head> ";
put " <!--Load the AJAX API--> ";
put ' <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ';
put ' <script type="text/javascript"> ';
put " // Load the Visualization API and the corechart package. ";
put " google.charts.load('current', {'packages':['corechart']}); ";
put " // Set a callback to run when the Google Visualization API is loaded. ";
put " google.charts.setOnLoadCallback(drawChart); ";
put " // Callback that creates and populates a data table, ";
put " // instantiates the pie chart, passes in the data and ";
put " // draws it. ";
put " function drawChart() { ";
put " // Create the data table. ";
put " var data = new google.visualization.DataTable(); ";
put " data.addColumn('string', 'Topping'); ";
put " data.addColumn('number', 'Slices'); ";
put " data.addRows([ ";
put "['" topping "',1],"; /* output the first topping since it is first row. */
end; /* first row */
else
do; /* Not first row */
put "['" topping "',1],";
if eof then
do; /* eof */
put "['" topping "',2]";
put " ]); ";
put " // Set chart options ";
put " var options = {'title':'How Much Pizza I Ate Last Night', ";
put " 'width':400, ";
put " 'height':300}; ";
put " // Instantiate and draw our chart, passing in some options. ";
put " var chart = new google.visualization.PieChart(document.getElementById('chart_div')); ";
put " chart.draw(data, options); ";
put " } ";
put " </script> ";
put " </head> ";
put " <body> ";
put " <!--Div that will hold the pie chart--> ";
put ' <div id="chart_div"></div> ';
put " </body> ";
put " </html> ";
end; /* eof */
end; /* Not first row */
run;
Thanks Keith. This helped a lot.
Are you ready for the spotlight? We're accepting content ideas for SAS Innovate 2025 to be held May 6-9 in Orlando, FL. The call is open until September 25. Read more here about why you should contribute and what is in it for you!
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.