topic Re: How do I get results from Splunk searchmanager JavaScript into Google JavaScript API to draw charts? in Splunk Search

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

pedromvieira — Wed, 24 Jun 2015 21:11:03 GMT

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

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

vganjare — Thu, 25 Jun 2015 10:41:12 GMT

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!!

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

pedromvieira — Thu, 25 Jun 2015 12:25:53 GMT

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

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

vganjare — Thu, 25 Jun 2015 12:36:05 GMT

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!!

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

pedromvieira — Thu, 25 Jun 2015 14:14:04 GMT

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.

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

vganjare — Fri, 26 Jun 2015 06:25:45 GMT

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.
}