Dashboards & Visualizations

Highlight clicked bar from in a column chart and keep the selection highlighted after drilldowns are pupulated

mvishal
Explorer

Hi Splunkers..

my requirement is to keep the selection in a column chart stay highlighted unless different choice made in the same chart.

I have tried  link his approach given by @niketnilay, I unable to identify relevant component for the chart to td or tr for highlighting.

If someone already has an idea please help or aware of a chart supports these behavior selection-highlight out of the box please recommend.

Thanks 🙂

Labels (4)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

I am not sure it is possible with a column chart because I think the drawn element is the series not each individual column within the series.

mvishal
Explorer

Thanks for the response, is there any other chart you are aware of which allows this ? or way to modify the highchart? 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@mvishal 

You can create your own chart for the same purpose. I have created a POC example for you. Can you please try?

First download the chart.js from https://www.jsdelivr.com/package/npm/chart.js and place it in appserver/static folder in search app.

 

Create dashboard XML.

 

<form script="highlight_column_on_click.js"> 
  <label>highlight column on click</label>
  <row>
    <panel>
      <html>
        <div style="width:600px"><canvas id="myChart"></canvas></div>
      </html>
    </panel>
    <panel>
      <html>
        $selected_key$ <br />
        $selected_value$
      </html>
    </panel>
  </row>
</form>

 

 

highlight_column_on_click.js

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    '../app/search/chart',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, Chart, SearchManager) {
    var default_token_model = mvc.Components.get("default");
    $(document).ready(function() {
        var mySearch = new SearchManager({
            id: "mySearch",
            earliest_time: "-60m",
            latest_time: "now",
            preview: true,
            cache: false,
            search: 'index="_internal" | top 10 group | table group count'
        }, { tokens: true, tokenNamespace: "submitted" });
        mySearch.on('search:done', function(properties) {
            var myResults = mySearch.data("results"); // get the data from that search
            myResults.on("data", function() {
                // resultFields = myResults.data().fields;
                resultArray = myResults.data().rows;
                labels = []
                data = []
                $.each(resultArray, function(index, value) {
                    labels.push(value[0])
                    data.push(value[1])
                });
                console.log(labels)
                console.log(data)
                var ctx = document.getElementById("myChart");

                var backgroundColors = ['#ED561B', '#058DC7', '#50B432', '#64E572', '#FF9655', '#DDDF00', '#24CBE5', '#FFF263', '#6AF9C4', '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00'];
                var hoverBackgrounds = backgroundColors;

                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: "My Chart",
                            data: data,
                            backgroundColor: backgroundColors,
                            hoverBackgroundColor: hoverBackgrounds
                        }]
                    },
                    options: {
                        onClick: function(evt, elements) {
                            var datasetIndex;
                            var dataset;
                            // console.log(evt, elements)
                            if (elements.length) {
                                var index = elements[0].index;
                                datasetIndex = elements[0].datasetIndex;
                                console.log(index)
                                console.log(datasetIndex)
                                console.log("Selected Key", labels[index])
                                console.log("Selected Value", data[index])
                                default_token_model.set("selected_key", labels[index]);
                                default_token_model.set("selected_value", data[index]);
                                // Reset old state
                                dataset = myChart.data.datasets[datasetIndex];
                                // console.log(dataset)
                                dataset.backgroundColor = backgroundColors.slice();
                                dataset.hoverBackgroundColor = hoverBackgrounds.slice();

                                dataset.backgroundColor[index] = 'red'; // click color
                                dataset.hoverBackgroundColor[index] = 'red';
                            } else {
                                // remove hover styles
                                for (datasetIndex = 0; datasetIndex < myChart.data.datasets.length; ++datasetIndex) {
                                    dataset = myChart.data.datasets[datasetIndex];
                                    dataset.backgroundColor = backgroundColors.slice();
                                    dataset.hoverBackgroundColor = hoverBackgrounds.slice();
                                }
                            }
                            myChart.update();
                        }
                    }
                });
            });
        });
    });
});

 

 

 

Screenshot 2021-07-12 at 7.00.01 PM.png

 

Thanks
KV
▄︻̷̿┻̿═━一

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

 

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!