Solved: Re: SAS data into JavaScript

dstephens22 · Posted 09-22-2021 01:22 PM

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]

]);

KeithM · Posted 09-22-2021 02:48 PM

/* 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;

View solution in original post

ChrisHemedinger · Posted 09-22-2021 01:45 PM

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.

Check out SAS Innovate on-demand content! Watch the main stage sessions, keynotes, and over 20 technical breakout sessions!

dstephens22 · Posted 09-22-2021 01:51 PM

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.

KeithM · Posted 09-22-2021 02:48 PM

/* 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;

dstephens22 · Posted 09-22-2021 05:01 PM

Thanks Keith. This helped a lot.