Dashboards & Visualizations

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

sheila48
New Member

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.

Tags (3)
0 Karma

lakromani
Builder

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 🙂

0 Karma

chimell
Motivator

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;
    }
0 Karma

chimell
Motivator

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

 <description> your  Dashboard description </description>
0 Karma

sheila48
New Member

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.

0 Karma

ngatchasandra
Builder

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

0 Karma

ngatchasandra
Builder

In which app are take your dashboard?

0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...