How do I get results from Splunk searchmanager JavaScript into Google JavaScript API to draw charts?

[pedromvieira]

How to get data results from a searchmanager javascript into google jsapi to draw charts?

• All My Searches and PostProcess are working.
• I can draw charts with Splunk Components.

• I can get results to my console

          var Data1 = splunkjs.mvc.Components.getInstance("SEARCH_1");
          var Data1_Results = Data1.data("results") ;
          Data1_Results.on("data", function() {
              console.log("Has data? ", Data1_Results.hasData());
              console.log("Data (rows): ", Data1_Results.data().rows);
              console.log("Backbone collection: (rows) ", Data1_Results.collection().raw.rows);
          });
  

  Also can test Google JS API inside my site:

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = google.visualization.arrayToDataTable([
              ['OPTION', '#'],
              ['YES', 4],
              ['NO', 7]
          ]);
          var options = {
              // title: 'Clicked',
              is3D: true,
              legend: 'none',
              pieHole: 0.4,
              pieSliceText: 'label',
              slices: {
                  0: { color: 'red', offset: 0.6 }, // YES
                  1: { color: 'gray', offset: 0.0 } // NO
              },
          };
          var chart = new google.visualization.PieChart(document.getElementById('g_chart_1'));
          chart.draw(data, options);
      }
  </script>
  

  How can I use my Search Results (Data1_Results) to populate my Google Chart data?

Thanks

[vganjare]

Hi,

You can validate if the Google API visualization is working for a dummy data or not. This dummy data should be an array and should be passed externally.

Once this is working, then simply replace the dummy array with Data1_Results.data().rows. Basically, pass this data to Google API as if you are passing a JSON object to API.

Thanks!!

[pedromvieira]

My current code that works only for Tables:

                data.addColumn('string', 'OPTION');
                data.addColumn('string', '#');
                var rows = Data5.data().rows;
                data.addRows(rows);

My Data is like:

[
['Option', '#'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]

Is there a way to parseInt the return of Splunk data().rows?
Thanks.

[vganjare]

You will have to write new function to create data in expected format. Something like:

var parseSplunkData = function(rows){
    var parsedData = [];
    for(var i in rows){
        if(i && rows[i]){
            var row = rows[i];
            var data = {
                'Option' : row.option, //Validate is row.option is available or not
                'Count' : parseInt(row.count) //Validate is row.count is available or not
            }
            parsedData.push(data);
        }
    }
    //Use the parsedData and pass it to Google API.
}

[pedromvieira]

Thanks for the input.
There are two problems with this approach.
First row with data is assigned to fields and Splunk returns all data as string (even numbers), so Google API can`t draw charts (but can show it as a table).

[]'s

[vganjare]

Not sure if your comment is trimmed.

For the data type issues, you can create a parser module. Depending on the column name, it can return the number or string or boolean from the module (or function) itself.

Again, this is just an approach and not a complete solution.

Thanks!!