Override drilldown values of a timeline chart with javascript

[cafissimo]

Hello,
I have a quite simple timechart that has values like "AAA (xxx_bbb)", "BBB (ccc_ddd)", "CCC (eee_fff)".

I am trying to override the click function whenever a user clicks on a barchart, so that the values that I am passing to the form are not "AAA (xxx_bbb)", "BBB (ccc_ddd)", "CCC (eee_fff)" but "AAA","BBB","CCC".

I also would like to modify earliest and latest value that are passed to the target form.
How is it possible to do that in javascript?

I ended up with a js file included in simplexml that gets the chart object, but the only data I was able to see is name, name2, value and value2 and this is not enough to change tokens that are passed to the target form when the user clicks.

My chart object does not have .data values in the chart onclick listener...

Do I have to use tokens functions and set tokens agains?
Also, when I click on the chart bar, the target form is immediately called, without waiting the listener to "finish".

Could somebody give me an example of how to do that?

Thanks and best regards.
Luca Caldiero.

[cafissimo]

My simple xml code is:

<form stylesheet="table_hide.css" script="main_panel.js">
  <label>Pannello principale Change</label>
  <description>Pannello principale change configurazioni</description>
  <fieldset autorun="0" submitButton="true">
    <input type="time" token="orario">
      <label>Selezionare orario</label>
      <default>
        <earliestTime>-24h@h</earliestTime>
        <latestTime>now</latestTime>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart id="main_change_chart">
        <title>Timeline change per host/tipologia</title>
        <searchString><![CDATA[ tag=change_sum | eval host_eventtype=host . " (" . eventtype . ")" 
                      | rex field=host_eventtype "(?<HOST>^.*) \((?<EVENTTYPE>.*)\)"
                      | timechart count by host_eventtype ]]></searchString>
        <earliestTime>$orario.earliest$</earliestTime>
        <latestTime>$orario.latest$</latestTime>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-90</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">false</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.data.fieldListMode">show_hide</option>
        <!--<option name="charting.data.fieldHideList">[field_to_hide]</option>-->
        <option name="height">400</option>
        <drilldown target="_blank">
          <set token="clicked_earliest">$earliest$</set>
          <set token="clicked_latest">$latest$</set>
          <set token="clicked_eventtype">$click.name2$</set>
          <link>
            <![CDATA[/app/cgt/detail_panel_$click.name2$?host=$click.name2&orario.earliest=$clicked_earliest$&orario.latest=$clicked_latest$]]>
          </link>
        </drilldown>
      </chart>
    </panel>
  </row>
</form>

What I want to do is to split $click.name2$ into two variables.
For example, if tha value of $click.name2$ is "AAA (xxx_bbb)", I want it to split in "AAA" and "xxx_bbb". The first value "AAA" would be the drilldown host parameter, the second one would be the name of the drilldown destination form.

The only I found to do this was to convert the form to HTML and then edit the chart onclick function this way:

        main_change_chart.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                setToken("clicked_earliest", TokenUtils.replaceTokenNames("$earliest$", _.extend(submittedTokenModel.toJSON(), e.data)));
                setToken("clicked_latest", TokenUtils.replaceTokenNames("$latest$", _.extend(submittedTokenModel.toJSON(), e.data)));
                setToken("clicked_eventtype", TokenUtils.replaceTokenNames("$click.name2$", _.extend(submittedTokenModel.toJSON(), e.data)));
                var tempurl = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/skylogic_cgt/detail_panel_$click.name2$?host=$click.name2$&orario.earliest=$clicked_earliest$&orario.latest=$clicked_latest$", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'));
                // regex per impostare il nome host senza eventtype
                var tempurl_dest = tempurl.replace(/(.+)%20\(([a-zA-Z0-9_]+)\)/, "$1_$2")
                tempurl_dest = tempurl_dest.replace(/(.+)%20\(([a-zA-Z0-9_]+)\)/, "$1_$2");
                tempurl_dest = tempurl_dest.replace(/panel_[a-zA-Z0-9]+_change/g, "panel_change");
                var url = tempurl_dest.replace(/host=(\w+)_\w+_\w+/, "host=$1")
                // debug a video
                // window.alert(url);
                utils.redirect(url, false, "_blank");
            }
        });

I was wondering if it was possible to change tokens in an external javascript, but since I am a newbie with js and jquery the only script I was able to write is this:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, ChartView) {

        // Get the table view by id
    //mvc.Components.get('main_change_chart').getVisualization(function(chartView){
    mychart = mvc.Components.getInstance("main_change_chart");
    mychart.on("click:chart", function (e) {
            e.preventDefault();
            // To do: respond to events
            console.log("Clicked chart: ", e.name);
            console.log("Clicked chart: ", e.name2);
            console.log("Clicked chart: ", e.value);
            console.log("Clicked chart: ", e.value2);
            console.log("Clicked chart: ", e.earliest);
            console.log("Clicked chart: ", e.latest);
            var newValue = e.data['click.name2'];
            console.log(newValue);
            });
});

Note that values like e.earliest, e.latest and e.data seems to be "undefined" in javascript log console.

Any help would be appreciated.
Many thanks in advance!