Change y-axis format of GWT Visualization from milliseconds to hr:min:sec - gwt

Question

I am currently generating LineChart graphs with the GWT Visualization library that show the run time of a set of jobs. The time values are in milliseconds and I would like the graph to display the y-axis labels in hr:min:sec format instead of milliseconds. I have used the setFormattedValue method to make this conversion, but unfortunately, only the tooltip values display the formatted value while the y-axis continues to display in milliseconds.
Here's my code:
import java.util.Collection;
import java.util.HashMap;
import java.util.Iterator;
import com.electriccloud.commander.gwt.client.util.CommanderUrlBuilder;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.visualizations.Table;
import com.google.gwt.visualization.client.visualizations.corechart.HorizontalAxisOptions;
import com.google.gwt.visualization.client.visualizations.corechart.LineChart;
public class ScheduledJobMonitorFancyChartPanel extends HorizontalPanel{
protected static final int MS = 0;
protected static final int HR_MIN_SEC = 1;
private String scheduleName;
private HashMap<String, AverageElapsedTime> elapsedTimeData;
private Table dataTable;
private LineChart lineChart;
private boolean graphIsVisible = true;
private int displayStyle;
public ScheduledJobMonitorFancyChartPanel(){
super();
this.setStyleName("hidden");
}
public ScheduledJobMonitorFancyChartPanel(String schedName, HashMap<String, AverageElapsedTime> data, int displayType){
this();
this.scheduleName = schedName;
this.elapsedTimeData = data;
this.displayStyle = displayType;
createTableAndChart();
this.setVisible(graphIsVisible);
}
private void createTableAndChart(){
// this block defines the table and chart
Runnable onLoadCallback = new Runnable() {
public void run() {
VerticalPanel outterPanel = new VerticalPanel();
Label chartTitle = new Label("ElapsedTime Data for " + scheduleName);
chartTitle.setStylePrimaryName("chartTitle");
outterPanel.add(chartTitle);
HorizontalPanel allChartGroups = new HorizontalPanel();
allChartGroups.setStylePrimaryName("allChartGroupsStyle");
// Since a single Job may have multiple steps being monitored, this creates the charts
// for each step, but groups them all (horizontally) under the same job
Collection<String> c = elapsedTimeData.keySet();
Iterator<String> itr = c.iterator();
while(itr.hasNext()){
String stepName = itr.next();
AverageElapsedTime aet = elapsedTimeData.get(stepName);
AbstractDataTable linkableTable = createTableWithLinks(aet);
AbstractDataTable table = createTable(aet);
dataTable = new Table(linkableTable, createDataTableOptions());
dataTable.setStylePrimaryName("dataTableStyle");
lineChart = new LineChart(table, createLineChartOptions(stepName));
lineChart.setStylePrimaryName("lineChartStyle");
HorizontalPanel tableAndChartGroup = new HorizontalPanel();
tableAndChartGroup.setStylePrimaryName("tableAndChartGroup");
tableAndChartGroup.add(dataTable);
tableAndChartGroup.add(lineChart);
allChartGroups.add(tableAndChartGroup);
}
outterPanel.add(allChartGroups);
addToPanel(outterPanel);
}
};
// this line gets the table/chart defined above displayed on the screen
VisualizationUtils.loadVisualizationApi(onLoadCallback, LineChart.PACKAGE, Table.PACKAGE);
}
// Because the table/chart is created inside an annonymous Runnable object, this method
// exposes it to being added to "this"
private void addToPanel(Widget widget){
this.add(widget);
}
// set up the table used by the LineChart
private AbstractDataTable createTable(AverageElapsedTime aet){
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "JobId");
data.addColumn(ColumnType.NUMBER, "ElapsedTime");
data.addRows(aet.getSize());
HashMap<Long, Long> jobIdElapsedTimeHash = aet.getListOfTimes();
Collection<Long> c = jobIdElapsedTimeHash.keySet();
Iterator<Long> itr = c.iterator();
int row = 0;
while(itr.hasNext()){
Long jobId = itr.next();
data.setValue(row, 0, jobId.toString());
if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.MS)
data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId));
else if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.HR_MIN_SEC){
data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId));
String formattedValue = AverageElapsedTime.getDisplayTime(jobIdElapsedTimeHash.get(jobId));
data.setFormattedValue(row, 1, formattedValue);
}
row++;
}
return data;
}
// set up the table used by the DataTable - It embeds links to the jobId listed
private AbstractDataTable createTableWithLinks(AverageElapsedTime aet){
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "JobId");
data.addColumn(ColumnType.NUMBER, "ElapsedTime");
data.addRows(aet.getSize());
HashMap<Long, Long> jobIdElapsedTimeHash = aet.getListOfTimes();
Collection<Long> c = jobIdElapsedTimeHash.keySet();
Iterator<Long> itr = c.iterator();
String urlBase = CommanderUrlBuilder.getBase();
int row = 0;
while(itr.hasNext()){
Long jobId = itr.next();
data.setValue(row, 0, "<a href='" + urlBase + "link/jobDetails/jobs/" + jobId + "' target='_blank'>" + jobId + "</a>");
// data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId));
if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.MS)
data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId));
else if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.HR_MIN_SEC){
data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId));
String formattedValue = AverageElapsedTime.getDisplayTime(jobIdElapsedTimeHash.get(jobId));
data.setFormattedValue(row, 1, formattedValue);
}
row++;
}
return data;
}
// set the options for the DataTable
private Table.Options createDataTableOptions(){
Table.Options options = Table.Options.create();
options.setHeight("300");
options.setWidth("190");
options.setAllowHtml(true);
return options;
}
// set the options for the LineChart
private com.google.gwt.visualization.client.visualizations.corechart.Options createLineChartOptions(String stepName){
com.google.gwt.visualization.client.visualizations.corechart.Options options = com.google.gwt.visualization.client.visualizations.corechart.Options.create();
options.setWidth(500);
options.setHeight(300);
options.setCurveType("function");
options.setColors("#336E95");
options.setTitle(stepName);
HorizontalAxisOptions hao = HorizontalAxisOptions.create();
hao.setSlantedText(true);
hao.setSlantedTextAngle(45);
options.setHAxisOptions(hao);
return options;
}
public void setTimeDisplay(int displayType) {
switch(displayType){
case 0:
break;
case 1:
this.displayStyle = ScheduledJobMonitorFancyChartPanel.HR_MIN_SEC;
}
}
}

Answer 1

I don't have the code at hand.
Only, I remember that the documentation for Google Graphs API for GWT is far from completed. You only need to know that it's a wrapper over Google Graphs, the javascript library.
This means that some options you can set directly with setters, for some others you'll have to look into the JS library parameters and inject them somehow with the generic option setter (there's a method to set options on axis on a "string -> value" basis).
Here you can find a description of the JS library parameters:
https://developers.google.com/chart/interactive/docs/gallery/areachart#Data_Format
If you look at "hAxis.format", you'll probably find what you are looking for.
EDIT:
To complete my answer, you'll have to use the HorizontalAxisOptions class and its set method.
Beware that the format you send is tricky and not firing an error if it's wrong, but I would bet on set("hAxis.format", "{format:'HH:mm:ss'}");