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 @niketn, 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 🙂
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.
Thanks for the response, is there any other chart you are aware of which allows this ? or way to modify the highchart?
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();
}
}
});
});
});
});
});
Thanks
KV
▄︻̷̿┻̿═━一
If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.