How do I upload a csv file and then it will generate a separate chart instead of adding to an existing chart?

[LMN007]

I want to upload several csv files and I hope that each csv file can be a separate chart instead of adding to an existing chart.  Maybe I will upload more csv files later, and I want that each of them can be a separate chart, too. But I can't work out.

[kamlesh_vaghela]

@LMN007 

 Can you please try below approach for your requirement?

XML

<form script="dynamic_panels.js">
  <label>Dynamic Panels</label>
</form>

dynamic_panels.js

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, mvc, SearchManager, ChartView) {

    console.log("Hiee");
    $(document).ready(function() {
        String.prototype.format = function() {
            var args = arguments;
            return this.replace(/{(\d+)}/g, function(match, number) {
                return typeof args[number] != 'undefined' ?
                    args[number] :
                    match;
            });
        };

        var _template = `<!-- A row with one cell -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Data from <%- title %></h3>
                    </div>
                    <div class="panel-body">
                        <!-- Panel contents here -->
                        <div id="viewid_<%- id %>"></div> 
                    </div>
                </div>
            </div>
        </div>`;

        $(".dashboard-layout-row-column.dashboard-layout-rowcolumn-rowcolumnlayout").html("")
        console.log("Hiee 111");

        var mySearch = new SearchManager({
            id: "mySearch",
            earliest_time: "-48h@h",
            latest_time: "now",
            preview: true,
            cache: false,
            search: "index=sample_csv | dedup source | table source"
        }, { tokens: true, tokenNamespace: "submitted" });

        mySearch.on('search:done', function(properties) {
            // Print the search job properties
            // console.log("DONE!\nSearch job properties:", properties.content);
            // document.getElementById("container").innerHTML = "Done!";

            var myResults = mySearch.data("results"); // get the data from that search

            myResults.on("data", function() {

                resultArray = myResults.data().rows;

                $.each(resultArray, function(index, value) {
                    _id = Math.floor(Math.random() * 10000) + 1;
                    var data = { title: value, id: _id };
                    temp = _.template(_template)
                    $(".dashboard.view-mode").append(temp(data));
                    _search_qry = 'index=sample_csv source="' + value + '" | timechart count span=1h ';
                    console.log(_search_qry)
                    _search = new SearchManager({
                        id: "search_" + _id,
                        earliest_time: "-48h@h",
                        latest_time: "now",
                        preview: false,
                        cache: false,
                        search: _search_qry
                    }, { tokens: true, tokenNamespace: "submitted" });
                    _barchart = new ChartView({
                        id: "search_manager_" + _id,
                        managerid: "search_" + _id,
                        type: "line",
                        el: $('#viewid_' + _id)
                    }).render();
                    _search.startSearch();
                });
            });
        });
    });
});

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

[kamlesh_vaghela]

You need to create an index to index uploaded csv data. Here I've use sample_csv index. You can change it as per your requirement. The search query is used in JS.

search: "index=sample_csv | dedup source | table source"

Here I have created line chart as per the source. You can use any chart from below link.

https://docs.splunk.com/DocumentationStatic/WebFramework/1.0/ . this link has required examples.

_barchart = new ChartView({
    id: "search_manager_" + _id,
    managerid: "search_" + _id,
    type: "line",
    el: $('#viewid_' + _id)
}).render();

You need to change panel search as well as per your requirement.

_search_qry = 'index=sample_csv source="' + value + '" | timechart count span=1h '; 

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

[gcusello]

Hi @LMN007,

let me understand, do you want an help on:

1. how to index csv files,
2. how to display a csv file in a dashboard panel?

If th first, you have to create an input (local or on the forwarder where csv files are stored) that read the files, assigning index and sourcetype, eventually Splunk is able to recognize the csv and automatically assign the csv sourcetype to it.

If the second, you have to create a drilldown input in a dashboard to choose the csv to display in a panel.

So if the index containing the csv files is "my_csv", you could try something like this:

<form>
  <label>test</label>
  <fieldset submitButton="false">
    <input type="time" token="Time">
      <label>Time</label>
      <default>
        <earliest>-24h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="source">
      <label>Source</label>
      <choice value="*">All</choice>
      <default>*</default>
      <prefix>source="</prefix>
      <suffix>"</suffix>
      <fieldForLabel>source</fieldForLabel>
      <fieldForValue>source</fieldForValue>
      <search>
        <query>
          index=my_csv
          | dedup source
          | sort source
          | table source
          </query>
        <earliest>$Time.earliest$</earliest>
        <latest>$Time.latest$</latest>
      </search>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Table</title>
      <table>
        <search>
          <query>
            index=my_csv $source$
            | table _time field1 field2 fieldn
            </query>
          <earliest>$Time.earliest$</earliest>
          <latest>$Time.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

Ciao.

Giuseppe