Custom JavaScript to update charts properties in Watson Explorer Application Builder

Content

Here is an example to update the xdateFormat property of a Highcharts tooltip.
xDateFormat is the format for the date in the tooltip header if the X axis is a datetime axis.

Steps

First identify the correct Highcharts property to be updated to give the desired result.

• Refer to http://api.highcharts.com/highcharts to understand the options available.
• Place your code in the custom JavaScript code box in the admin tool.

• Write the JavaScript to update the identified Highcharts property.
• Using this widget, add the script to update the property, and make sure that display for this widget is turned off.

Sample:

Here is a refinement widget with a time display.

The tooltip of the chart is showing the complete date by default. You can change this to display just the year.

• The tooltip function is responsible for the display of this information. The property to be modified is xDateFormat.
• The default for this property is a best guess based on the smallest distance between points in the chart.

• To modify the date to show just the year, you need to set it as xDateFormat: "%Y"
• On the Application Builder admin tool, go to the Administrative menu in the top right corner of the application and click "Custom Javascript" or navigate to it by going to the admin tool (<host>:<port>/<virtual_path_to_appbuilder>/admin/settings) and clicking on the "Display" link at the top.

Add this JavaScript
$(document).ready( function() { Highcharts.charts[0].series[0].update( { tooltip: { xDateFormat: "%Y" } } ); });


OR

• On the Application Builder admin tool, create a custom widget of any name, such as xxx, and add this code.
<script>
$(document).ready( function() { Highcharts.charts[0].series[0].update( { tooltip: { xDateFormat: "%Y" } } ); });
</script>
<style>
.widget.xxx {
display: none;
}
</style>
• Now test the refinement.
• The tooltip should show only the year in the date area.