| Sourcecode [link_switch.js] [simple_chart.xml]

sheila48 · ‎04-05-2015

I want to remove description of source code (xml, js...) in main display of dashboard.
how can I remove it?
I don't know why it is added.

lakromani · ‎03-11-2016

This is an answer to an old topic. But I did get inn to same problem my self.
For some reason my dashboard started showing it code in the bottom of my dashboards.
Not sure how it got there, but I could not get rid of it.

Then I guessed it was som sort of debugging.
So I just closed my Splunk, and open a new window.
When I the went back to the same view, the source code was gone.

So I guess its for debugging, and goes away when you close the window 🙂

chimell · ‎04-06-2015

Hi sheila
Just follow these instructions
1- create a view dashboard using your dashboard source code xml
2- copy your source code js and css , go to $SPLUNK_HOME/etc/apps//appserver/static/ paste them .
3-Go to Settings > User Interface >Navigation menu choose your app , click on default and add

 <view name="yourview-name" />

Let test with the following xml , js,and css source code extract from dashboard example 6.x app

   xml source code 



<dashboard script="custom_chart.js, autodiscover.js" stylesheet="custom_chart.css">
        <label>Custom Chart Overlay</label>
        <row grouping="2">
        <html>
        <h2>Line + Bar Chart</h2>
        <div id="chart1" />
        </html>
        <table id="table1">
        <searchString>index=_internal | timechart span=1h count as total | appendcols [ search index=_internal (sourcetype=splunk_web_access OR sourcetype=splunkd_access) | timechart span=1h count by sourcetype ] | table _time splunk_web_access splunkd_access total</searchString>
        <earliestTime>-1d@d</earliestTime>
        <latestTime>@d</latestTime>
        </table>
        </row>
        <row>
        <html>
        <h2>With Auto-Discovery</h2>
        <div id="chart-search2"
        class="splunk-manager"
        data-require="splunkjs/mvc/searchmanager"
        data-options='{
        "earliest_time": "-1d@d",
        "latest_time": "@d",
        "search": "index=_internal | timechart span=1h count as total | appendcols [ search index=_internal NOT (sourcetype=splunk_web_access OR sourcetype=splunkd_access) | timechart span=1h count by sourcetype ] | eval time=strftime(_time, \"%H\") | table time * total"
        }'>
        </div>
        <div id="chart2"
        class="splunk-view"
        data-require="splunkjs/mvc/d3chart/d3chartview"
        data-options='{
        "managerid": "chart-search2",
        "type": "linePlusBarChart"
        }'>
        </div>
        </html>
        </row>
        </dashboard>

this is custom_chart.js

    `/*
     * A custom chart example based on the d3chartview of the web framework.
     * The component is initialized in Javascript which provides more flexibility and formatting options.
     */
    require([
        'underscore',
        'jquery',
        'splunkjs/mvc/utils',
        'splunkjs/mvc',
        'splunkjs/mvc/d3chart/d3chartview',
        'util/moment',
        'splunkjs/mvc/simplexml/ready!'
    ], function(_, $, utils, mvc, D3ChartView, moment) {

        // Re-use the search manager of the results table
        var tableManagerid = mvc.Components.get('table1').settings.get('managerid');

        // Create the D3 chart view
        var chart = new D3ChartView({
            "id": "chart1",
            "managerid": tableManagerid,
            "type": "linePlusBarChart",
            "el": $('#chart1')
        }).render();

        chart.settings.set("setup", function(chart) {
            // Configure chart formatting
            chart.color(d3.scale.category10().range());
            chart.margin({right: 100, left: 80, top: 70, bottom: 70 });

            // Set labels for Y axis on the left and on the right hand side
            chart.y1Axis.axisLabel("Access Events");
            chart.y2Axis.axisLabel("Total Events");


            // Format the X-Axis labels
            var start = moment().startOf('day').subtract(1, 'day').toDate(), end = moment().startOf('day').toDate();
            var xScale = d3.time.scale.utc().domain([start, end]);
            chart.xAxis.scale(xScale);
            chart.xAxis.tickValues(xScale.ticks(d3.time.hours.utc, 1));
            chart.xAxis.tickFormat(function(d) {
                var format = d3.time.format("%I %p");
                return format(new Date(d));
            });
            chart.xAxis.rotateLabels(45);
            chart.xAxis.axisLabel("Time of Day");
        });

    });

this is autodiscover.js

    require.config({
    paths: {
    "app": "../app"
    }
    });
    require(['splunkjs/mvc/simplexml/ready!'], function(){
    require(['splunkjs/ready!'], function(){
    // The splunkjs/ready loader script will automatically instantiate all elements
    // declared in the dashboard's HTML.
    });
    });

This custom_chart.css

    #chart1, #chart2 {
    height: 450px;
    }

chimell · ‎04-06-2015

Hi sheila48
open your dashboard source code XML and delete this:

 <description> your  Dashboard description </description>

sheila48 · ‎04-06-2015

I don't mean the description.

======================== website view in dashboard =======================
------------------ ---------------------------------my implementation (XML) ---------------------------------------
| CHART XXX
| TABLE OOO
| ......
--------------------- from here, I don't implement in XML but show detail as below ---------------------
| description

| Sourcecode [link_switch.js] [simple_chart.xml]

<<=== I want to remove here.

ngatchasandra · ‎04-06-2015

Please provide me the app name where you taked your dashboard!

ngatchasandra · ‎04-05-2015

In which app are take your dashboard?

How to removed source code (xml, js..) that is displaying in my dashboard?

| Sourcecode [link_switch.js] [simple_chart.xml]

Out of the Box to Up And Running - Streamlined Observability for Your Cloud ...

Splunk Smartness with Brandon Sternfield | Episode 3

Monitoring Postgres with OpenTelemetry