Dashboards & Visualizations

Web Framework - django and 3dchart - Modifying default chart settings and options

SplunkTrust
SplunkTrust

Hi All,

I have generated a view in html that uses Django and the all new (and very cool) Web framework.

I have some issue to apply custom settings to my chart (actually a discretebar d3chart) using django...

The doc (http://docs.splunk.com/Documentation/WebFramework) says how to modify chart settings (like activating the option showvalue=true) when using JS but not when using Django.

Based on an example taken in the Web Framework Toolkit (essentially the view d3chart), my view generates my charts as follows:

  • The django block that sets the chart itself (based on a postprocess search):

{% block chart %}

{% d3chart 
    id="d3chart1"
    managerid="post1"
            type="discreteBarChart"
    valueField="conso"
    labelField="LPAR"
    categoryField="LPAR"
%}

{% endblock chart %}
- The block managers thats sets associated searches (based it self on various dropdown):

{% block managers %}

{% searchmanager 
id="search1"
search='index=nmon_lpar sourcetype=nmon_lpar PSERIES=$valuespsearies$ earliest="$earlyval$" latest="$lateval$" | eval conso=((EC_User_PCT+EC_Sys_PCT+EC_Wait_PCT+EC_Idle_PCT)*entitled/100) | $filtertime$ | stats $statmode$ by LPAR | eval conso=round(conso,2)'|token_safe 
preview=True    
%}  

{% postprocessmanager 
id="post1" 
managerid="search1" 
search="| sort - conso | head 8" 
%}

{% searchmanager 
id="single1"
search='index=nmon_lpar sourcetype=nmon_lpar PSERIES=$valuespsearies$ earliest="$earlyval$" latest="$lateval$" | head 1 | fields PSERIES | dedup PSERIES'|token_safe 
preview=True    
%}  

{% searchmanager
id="pseriessearch"
search="| inputlookup sysplan_pseries_config | fields PSERIES | dedup PSERIES | sort PSERIES" 
preview=True
%}

{% endblock managers %}

This works as expected and generates that kind of views (a bubblechart associated with a discretebarchart):

alt text

I have 2 related problem, the first one is to be able to set various custom chart settings.

As mentioned in the Framework doc, i've tried to adapt the JS section:

exemple of the doc:

donut_chart.settings.set("setup", function(chart){
    chart.color(d3.scale.category10().range());
    chart.staggerLabels(true);
    chart.showValues(true);
});

To things like:

 var d3chart = mvc.Components.getInstance("d3chart1");          

    d3chart.settings.set("setup", function(chart){
       chart.color(d3.scale.category10().range());
      chart.staggerLabels(true);
         chart.showValues(true);
        });

With no results... (i'm taken for example the activation of show values which is currently off)

And tried others things but still with no results.

Does anyone knows how to deal with it ? I would greatly appreciate ! 🙂

I guess that my main issue comes from the fact that i use django to iniate both the search and the graph (and not JS) but the Framework components reference doc does not specify how to do it when using django and not JS for this... (i would have to rewrite all the view using JS...)

The second question is related to the search itself, is there any JobProgressIndicator like module for django and JS views ? The search (based on TimeRange and other pulldown) may require time to be fully executed, the only for the user to know when the search is terminated is when charts stop to move! (sic!)

Many thanks in advance for any help !

The Web Framework is very interesting and i'm dealing to globalize it to my views...

0 Karma
1 Solution

SplunkTrust
SplunkTrust

Hi,

Many many thanks ! You actually solved my issue and i took control over chart settings.

It seems i am in the case you mentionned, i had to move the JS code that sets the chart option from bottom to top of JS Block for it to work successfully (can't get to understand why in fact ?)

Here is my complete view:

{% extends "BubbleCharts_PSeriesAll_common.html" %}

{% load splunkmvc %}
{% load splunk_wftoolkit %}


{% block css %}
{{block.super}}
<style type="text/css">
#bubble1{
   height: 600px;
}
#d3chart1{
   height: 400px;
}
</style>
{% endblock css %}

    {% block heading %}Analyse de la consommation CPU Global du parc Pseries {% endblock heading %}

    {% block example %}

      <div class="panel-body">
        <h3><p><p>Consommation CPU PSeries (Pourcentage ConsoPool/CPU Activés)</h3>
        </div>

        {% bubblechart 
            id="bubble1" 
            managerid="post1"
            valueField="percent_conso"
            labelField="PSERIES"
            categoryField="PSERIES"
        %}

    {% endblock example %}

    {% block chart %}

      <div class="panel-body">
        <h3><p><p>Top 15 Consommation CPU PSeries (En valeurs CPU - Top Pourcentage ConsoPool/CPU Activés)</h3>
        </div>

        {% d3chart 
            id="d3chart1"
            managerid="post2"
                type="discreteBarChart"
            valueField="conso"
            labelField="PSERIES"
            categoryField="PSERIES"
        %}

    {% endblock chart %}    



    {% block table %}   

        {% table id="table1" managerid="post3" pageSize="100" %}

    {% endblock table %}    




    {% block usage%}

        <p>Sélectionner les critères souhaités pour démarrer le traitement:</p>
        <p> </p>


        <table class="table table-striped table-bordered">


            <tr>
                <td>
                     <p></p>
                <b>Sélection de la période:</b>.
                </td>
                <td>
                    <p></p>
                        {% timerange id="example-timerange" 
                        managerid="example-search" 
                        preset="J-2"
                        earliest_time="$earlyval$"|token_safe
                        latest_time="$lateval$"|token_safe %}                
                        <p></p>                
                </td>
            </tr>               

            <tr>
                <td>
                <b>Critères de statistiques:</b>.
                </td>
                <td>
                     <p> </p>
                {% radiogroup id="statmode-radiogroup" default="max(consopool) As conso" value="$statmode$"|token_safe %}
                </td>
            </tr>

            <tr>
                <td>
                <b>Filtrage Horaire:</b>.
                </td>
                <td>
                     <p> </p>
                {% radiogroup id="filtertime-radiogroup" default="`No_Filter`" value="$filtertime$"|token_safe %}
                </td>
            </tr>           

        </table>

                {% searchcontrols id="searchcontrol1" managerid="search1" %}

    {% endblock usage%}

{% block managers %}

    {% searchmanager 
    id="search1"
    search='index=myindex sourcetype=mysourcetype ( PSERIES=* ) earliest="$earlyval$" latest="$lateval$" | $filtertime$ | eval consopool=(RPI_NUM_POOL-RPI_NUM_APP) | search curr_shared_proc_pool_name="DefaultPool" OR "Not_Applicable" | search RPI_NUM_APP>0 | stats $statmode$ , max(cpu_active) as CPU_active, max(cpu_installed) as CPU_installed by PSERIES,LPAR | eval conso=round(conso,2) | eval percent_conso=(conso/CPU_active)*100 | eval percent_conso=round(percent_conso,2) | eval percent_conso_installed=(conso/CPU_installed)*100 | eval percent_conso_installed=round(percent_conso_installed,2) |sort - percent_conso,PSERIES,LPAR | dedup PSERIES | fields PSERIES,LPAR,percent_conso,percent_conso_installed,conso,CPU_active,CPU_installed'|token_safe 
    preview=True    
    %}

    {% postprocessmanager 
    id="post1" 
    managerid="search1" 
    search='| fields PSERIES,percent_conso'
    %}

    {% postprocessmanager 
    id="post2" 
    managerid="search1" 
    search="| sort - percent_conso | fields PSERIES,conso | head 15" 
    %}  

    {% postprocessmanager 
    id="post3" 
    managerid="search1" 
    search='| sort - percent_conso | rename LPAR As LPAR_referent |  strcat conso " cpu" conso | eval CPU_active=round(CPU_active,0) | eval CPU_installed=round(CPU_installed,0) | strcat CPU_active " cpu" CPU_active | strcat CPU_installed " cpu" CPU_installed | strcat percent_conso " %" percent_conso | strcat percent_conso_installed " %" percent_conso_installed | fields PSERIES,LPAR_referent,conso,percent_conso,percent_conso_installed,CPU_active,CPU_installed'
    %}  

{% endblock managers %}

{% block js %}
{{ block.super }}
<script type="text/javascript">
    require([
        "splunkjs/ready!", 
        "splunkjs/mvc/utils",
        "underscore",
        "jquery",
        "splunkjs/mvc/dropdownview"
        ], 
        function(
            mvc, 
            utils,
            _, 
            $,
            DropdownView
                ){

                var chart = mvc.Components.getInstance('d3chart1');
                chart.settings.set("setup", function(chart){
                chart.color(d3.scale.category10().range());
                chart.staggerLabels(true);
                chart.showValues(true);
                });


                var choices = [
                {label: " Pics de consommation CPU", value: "max(consopool) As conso"},
                {label: " Moyenne de consommation CPU", value: "avg(consopool) As conso"}] 

                // Assign them to the button group
                splunkjs.mvc.Components.getInstance("statmode-radiogroup").settings.set("choices", choices);        

                var choices = [
                {label: " Pas de filtrage (24/24 7/7)", value: "`No_Filter`"},
                {label: " Période TP Semaine (Lundi-Vendredi 08h à 20h)", value: "`TP_BusinessDays_8h-20h`"},
                {label: " Période TP WeekEnd (Samedi-Dimanche 08h à 20h)", value: "`TP_WeekEnd_8h-20h`"},
                {label: " Période TP (Lundi-Dimanche 08h à 20h)", value: "`TP_AllDays_8h-20h`"},
                {label: " Période Batch Semaine (Lundi-Vendredi 20h à 08h)", value: "`Batch_BusinessDays_20h-8h`"},
                {label: " Période Batch WeekEnd (Samedi-Dimanche 20h à 08h)", value: "`Batch_WeekEnd_20h-8h`"},
                {label: " Période Batch (Lundi-Dimanche 20h à 08h)", value: "`Batch_AllDays_20h-8h`"},
                ] 

                // Assign them to the button group
                splunkjs.mvc.Components.getInstance("filtertime-radiogroup").settings.set("choices", choices);              


            var bubbles = mvc.Components.getInstance("bubble1");
            var valuedd = mvc.Components.getInstance("value-dropdown");
            var categorydd = mvc.Components.getInstance("category-dropdown");
            var namedd = mvc.Components.getInstance("name-dropdown");

                // Set Value field

            statmode-radiogroup.on("change", function(){
                bubbles.settings.set("valueField", statmode-radiogroup.val());
            });


            var nameChoices = categoryChoices;
            namedd.settings.set("choices", nameChoices);
            namedd.on("change", function(){
                bubbles.settings.set("labelField", namedd.val());
            });

            bubbles.on("click", function(e){
                console.log("Click Event");
                console.log(e);
            });

        });


</script>

{% endblock js %}

Everything works now and i can set chart option but only in the portion of JS Code in on top on JS block section, if this is moved down (i haven't tried every position, only bottom and top) then settings are not being applied on the chart.

I haven't tried the JS code for searches because i like django syntax that i feel being more clean and simple than its JS version, very cool 🙂

Keep on this excellent work !

Perhaps that lack shall be integrated into the component reference in Splunk Dev under the d3chart section which only covers d3charting options when the search is being run using JS

Again thanks.

View solution in original post

SplunkTrust
SplunkTrust

Hi,

Many many thanks ! You actually solved my issue and i took control over chart settings.

It seems i am in the case you mentionned, i had to move the JS code that sets the chart option from bottom to top of JS Block for it to work successfully (can't get to understand why in fact ?)

Here is my complete view:

{% extends "BubbleCharts_PSeriesAll_common.html" %}

{% load splunkmvc %}
{% load splunk_wftoolkit %}


{% block css %}
{{block.super}}
<style type="text/css">
#bubble1{
   height: 600px;
}
#d3chart1{
   height: 400px;
}
</style>
{% endblock css %}

    {% block heading %}Analyse de la consommation CPU Global du parc Pseries {% endblock heading %}

    {% block example %}

      <div class="panel-body">
        <h3><p><p>Consommation CPU PSeries (Pourcentage ConsoPool/CPU Activés)</h3>
        </div>

        {% bubblechart 
            id="bubble1" 
            managerid="post1"
            valueField="percent_conso"
            labelField="PSERIES"
            categoryField="PSERIES"
        %}

    {% endblock example %}

    {% block chart %}

      <div class="panel-body">
        <h3><p><p>Top 15 Consommation CPU PSeries (En valeurs CPU - Top Pourcentage ConsoPool/CPU Activés)</h3>
        </div>

        {% d3chart 
            id="d3chart1"
            managerid="post2"
                type="discreteBarChart"
            valueField="conso"
            labelField="PSERIES"
            categoryField="PSERIES"
        %}

    {% endblock chart %}    



    {% block table %}   

        {% table id="table1" managerid="post3" pageSize="100" %}

    {% endblock table %}    




    {% block usage%}

        <p>Sélectionner les critères souhaités pour démarrer le traitement:</p>
        <p> </p>


        <table class="table table-striped table-bordered">


            <tr>
                <td>
                     <p></p>
                <b>Sélection de la période:</b>.
                </td>
                <td>
                    <p></p>
                        {% timerange id="example-timerange" 
                        managerid="example-search" 
                        preset="J-2"
                        earliest_time="$earlyval$"|token_safe
                        latest_time="$lateval$"|token_safe %}                
                        <p></p>                
                </td>
            </tr>               

            <tr>
                <td>
                <b>Critères de statistiques:</b>.
                </td>
                <td>
                     <p> </p>
                {% radiogroup id="statmode-radiogroup" default="max(consopool) As conso" value="$statmode$"|token_safe %}
                </td>
            </tr>

            <tr>
                <td>
                <b>Filtrage Horaire:</b>.
                </td>
                <td>
                     <p> </p>
                {% radiogroup id="filtertime-radiogroup" default="`No_Filter`" value="$filtertime$"|token_safe %}
                </td>
            </tr>           

        </table>

                {% searchcontrols id="searchcontrol1" managerid="search1" %}

    {% endblock usage%}

{% block managers %}

    {% searchmanager 
    id="search1"
    search='index=myindex sourcetype=mysourcetype ( PSERIES=* ) earliest="$earlyval$" latest="$lateval$" | $filtertime$ | eval consopool=(RPI_NUM_POOL-RPI_NUM_APP) | search curr_shared_proc_pool_name="DefaultPool" OR "Not_Applicable" | search RPI_NUM_APP>0 | stats $statmode$ , max(cpu_active) as CPU_active, max(cpu_installed) as CPU_installed by PSERIES,LPAR | eval conso=round(conso,2) | eval percent_conso=(conso/CPU_active)*100 | eval percent_conso=round(percent_conso,2) | eval percent_conso_installed=(conso/CPU_installed)*100 | eval percent_conso_installed=round(percent_conso_installed,2) |sort - percent_conso,PSERIES,LPAR | dedup PSERIES | fields PSERIES,LPAR,percent_conso,percent_conso_installed,conso,CPU_active,CPU_installed'|token_safe 
    preview=True    
    %}

    {% postprocessmanager 
    id="post1" 
    managerid="search1" 
    search='| fields PSERIES,percent_conso'
    %}

    {% postprocessmanager 
    id="post2" 
    managerid="search1" 
    search="| sort - percent_conso | fields PSERIES,conso | head 15" 
    %}  

    {% postprocessmanager 
    id="post3" 
    managerid="search1" 
    search='| sort - percent_conso | rename LPAR As LPAR_referent |  strcat conso " cpu" conso | eval CPU_active=round(CPU_active,0) | eval CPU_installed=round(CPU_installed,0) | strcat CPU_active " cpu" CPU_active | strcat CPU_installed " cpu" CPU_installed | strcat percent_conso " %" percent_conso | strcat percent_conso_installed " %" percent_conso_installed | fields PSERIES,LPAR_referent,conso,percent_conso,percent_conso_installed,CPU_active,CPU_installed'
    %}  

{% endblock managers %}

{% block js %}
{{ block.super }}
<script type="text/javascript">
    require([
        "splunkjs/ready!", 
        "splunkjs/mvc/utils",
        "underscore",
        "jquery",
        "splunkjs/mvc/dropdownview"
        ], 
        function(
            mvc, 
            utils,
            _, 
            $,
            DropdownView
                ){

                var chart = mvc.Components.getInstance('d3chart1');
                chart.settings.set("setup", function(chart){
                chart.color(d3.scale.category10().range());
                chart.staggerLabels(true);
                chart.showValues(true);
                });


                var choices = [
                {label: " Pics de consommation CPU", value: "max(consopool) As conso"},
                {label: " Moyenne de consommation CPU", value: "avg(consopool) As conso"}] 

                // Assign them to the button group
                splunkjs.mvc.Components.getInstance("statmode-radiogroup").settings.set("choices", choices);        

                var choices = [
                {label: " Pas de filtrage (24/24 7/7)", value: "`No_Filter`"},
                {label: " Période TP Semaine (Lundi-Vendredi 08h à 20h)", value: "`TP_BusinessDays_8h-20h`"},
                {label: " Période TP WeekEnd (Samedi-Dimanche 08h à 20h)", value: "`TP_WeekEnd_8h-20h`"},
                {label: " Période TP (Lundi-Dimanche 08h à 20h)", value: "`TP_AllDays_8h-20h`"},
                {label: " Période Batch Semaine (Lundi-Vendredi 20h à 08h)", value: "`Batch_BusinessDays_20h-8h`"},
                {label: " Période Batch WeekEnd (Samedi-Dimanche 20h à 08h)", value: "`Batch_WeekEnd_20h-8h`"},
                {label: " Période Batch (Lundi-Dimanche 20h à 08h)", value: "`Batch_AllDays_20h-8h`"},
                ] 

                // Assign them to the button group
                splunkjs.mvc.Components.getInstance("filtertime-radiogroup").settings.set("choices", choices);              


            var bubbles = mvc.Components.getInstance("bubble1");
            var valuedd = mvc.Components.getInstance("value-dropdown");
            var categorydd = mvc.Components.getInstance("category-dropdown");
            var namedd = mvc.Components.getInstance("name-dropdown");

                // Set Value field

            statmode-radiogroup.on("change", function(){
                bubbles.settings.set("valueField", statmode-radiogroup.val());
            });


            var nameChoices = categoryChoices;
            namedd.settings.set("choices", nameChoices);
            namedd.on("change", function(){
                bubbles.settings.set("labelField", namedd.val());
            });

            bubbles.on("click", function(e){
                console.log("Click Event");
                console.log(e);
            });

        });


</script>

{% endblock js %}

Everything works now and i can set chart option but only in the portion of JS Code in on top on JS block section, if this is moved down (i haven't tried every position, only bottom and top) then settings are not being applied on the chart.

I haven't tried the JS code for searches because i like django syntax that i feel being more clean and simple than its JS version, very cool 🙂

Keep on this excellent work !

Perhaps that lack shall be integrated into the component reference in Splunk Dev under the d3chart section which only covers d3charting options when the search is being run using JS

Again thanks.

View solution in original post

SplunkTrust
SplunkTrust

Hi, I'll redo some test and will let you know, but yes i mean that when applying the d3chart part js code after the bubbles.on ... then this wasn't being applied (as far an example activating show values within the chart)

But i agree it shouldn't, maybe a mistake of mine

Yes with pleasure, (to accept the answer), but a stupid question how do you achieve this ? i've looked everywhere but couldn't find how !

0 Karma

Splunk Employee
Splunk Employee

Also, if you can accept the answer that'd be great, so others can find this.

0 Karma

Splunk Employee
Splunk Employee

When you say the bottom, do you mean below the bubbles.on("click", ...) code? If so, that is odd, as it shouldn't make a difference. If you have an example I can run (e.g. using the _internal index) and reproduces the issue, post it here and I can take a look.

Splunk Employee
Splunk Employee

Here is a simple example that you should be able to run that shows you can
modify the chart setup function in JS:

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block title %}{% endblock title %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css">

    <style>
        #chart1{
            height: 500px;
        }
    </style>
{% endblock css %}

{% block content %}

<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="row">
        <div class="span12 dashboard-header clearfix">
            <h2></h2>
        </div>
    </div>
    <div class="row">
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                    </div>
                    <div class="panel-body chart-box">
                        {% d3chart id="chart1" managerid="search1" type="discreteBarChart" %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content%}

{% block managers %}

    {% searchmanager id="search1" 
        search='index=_internal | head 10000 | stats count by sourcetype'
    %}

{% endblock managers %}

{% block js %}
<script>
    require(["splunkjs/ready!", "underscore"], function(mvc, _) {            
        var chart = mvc.Components.getInstance('chart1');
        chart.settings.set("setup", function(chart){
             chart.color(d3.scale.category10().range());
             chart.staggerLabels(true);
             chart.showValues(true);
        });           
    });
</script>

{% endblock js %}

That said, there seems to be an issue if you change the setup function after the
chart is already rendered. In that case, it may not pick up your update. We'll
be fixing this in an upcoming maintenance release.

If you change the setup function immediately though, that shouldn't affect you,
so please let us know if your code looks like the above and you're still running
into the issue.

Finally, you can also create the D3ChartView directly in JavaScript. Here is
a sample showing how:

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block title %}{% endblock title %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css">

    <style>
        #chart1{
            height: 500px;
        }
    </style>
{% endblock css %}

{% block content %}

<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="row">
        <div class="span12 dashboard-header clearfix">
            <h2></h2>
        </div>
    </div>
    <div class="row">
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                    </div>
                    <div class="panel-body chart-box">
                        <div id="chart1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content%}

{% block managers %}

    {% searchmanager id="search1" 
        search='index=_internal | head 10000 | stats count by sourcetype'
    %}

{% endblock managers %}

{% block js %}
<script>
    require(["splunkjs/ready!", "underscore", "splunkjs/mvc/d3chart/d3chartview"], function(mvc, _, D3ChartView) {
        var chart = new D3ChartView({
            id: "chart1",
            el: $("#chart1"),
            managerid: "search1",
            type: "discreteBarChart",
            setup: function(chart) {
                chart.color(d3.scale.category10().range());
                chart.staggerLabels(true);
                chart.showValues(true); 
            }
        });
    });
</script>

{% endblock js %}

SplunkTrust
SplunkTrust

I found the solution to show search evolution by simply adding a search control within my view:

{% searchcontrols id="searchcontrol1" managerid="search1" %}

Still i can't get the control over the discretebarchart 😞

0 Karma