Solved: 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.

SAS For Dummies 3rd Edition! Check out the new edition, covering SAS 9.4, SAS Viya, and all of the modern ways to use SAS!

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.

SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Re: SAS data into JavaScript

Registration is open