GWT:creat a simple meteogram in GWTHighCharts - gwt

Question

i am trying to build a meteogram as this
In this chart there's xaxis below with values like 00,06,12,18
These are fine but how can i add the above values like satNov14, sunNov15, MonNov16
as there's multiple Yaxis but no multiple xaxis.
I am trying this , but after that am not getting the above dates in proper order
final Chart chart = new Chart()
.setBorderColor("#C7D5D5")
.setBorderWidth(3)
.setBorderRadius(0)
.setBackgroundColor("#FFFFFF")
.setChartTitleText("Meteogram")
.setSpacingTop(5)
.setChartSubtitleText("yr.no")
.setColumnPlotOptions(new ColumnPlotOptions()
.setDataLabels(new DataLabels()
.setEnabled(true)
) )
.setToolTip(new ToolTip()
.setFormatter(new ToolTipFormatter() {
public String format(ToolTipData toolTipData) {
String s;
if (toolTipData.getPointName() != null) {
s = toolTipData.getPointName() + ": " +
toolTipData.getYAsLong() + " ,";
} else {
s = toolTipData.getXAsString() + ": " +
toolTipData.getYAsLong();
}
return s;
}
})
)
.setLabelItems(
new LabelItem()
.setHtml("")
.setStyle(new Style()
.setLeft("40px")
.setTop("8px")
.setColor("black")
)
);
// Primary yAxis
chart.getYAxis(0).setGridLineWidth(1).setAxisTitleText("test")
.setAxisTitle(new AxisTitle()
.setText("")
)
.setLabels(new YAxisLabels()
//// .setStyle(new Style()
//// .setColor("#89A54E")
// )
.setFormatter(new AxisLabelsFormatter() {
public String format(AxisLabelsData axisLabelsData) {
return axisLabelsData.getValueAsLong() + "°";
}
})
);
// Secondary yAxis
chart.getYAxis(1).setGridLineWidth(2)
.setAxisTitle(new AxisTitle()
.setText("")
)
.setOpposite(true)
.setLabels(new YAxisLabels()
.setFormatter(new AxisLabelsFormatter() {
public String format(AxisLabelsData axisLabelsData) {
return axisLabelsData.getValueAsLong() + "°";
}
})
);
Point p1 = new Point(5, 5);
Marker m = new Marker();
m.setEnabled(true);
m.setOption("symbol", "url(41.png)");
p1.setMarker(m);
Point p2 = new Point(4.5, 4.5);
p2.setMarker(m);
Point p3 = new Point(4, 4);
Marker m1 = new Marker();
m1.setEnabled(true);
m1.setOption("symbol", "url(41.png)");
p3.setMarker(m1);
chart.getXAxis(1).setGridLineWidth(1).setLinkedTo(0)
.setOpposite(true)
.setCategories("Sat Nov13", "Sat Nov14", "Sat Nov15", "Sat Nov16");
chart.getXAxis(0).setGridLineWidth(1)
.setCategories("18","00","06","12","18","00","06","12","18","00","06","12","18","00","06","12","18") ;
chart.addSeries(chart.createSeries()
.setName("")
.setType(Series.Type.COLUMN)
.setPlotOptions(new ColumnPlotOptions()
.setColor("#24CBE5"))
.setPoints(new Number[]{
0,0,0,3,5,3,0,1,3,1,0,0,0,0}
)
.setYAxis(1)
);
chart.addSeries(chart.createSeries()
.setName("")
.setType(Series.Type.SPLINE)
.setPoints(new Number[]{
5,4.5,4,5,1,0,0,0,3,5,6,3,7,2 })
.setPlotOptions(new ColumnPlotOptions()
.setMarker(m1)
.setColor("#4572A7"))
);
return chart;
}
Attached is my output
Any Suggestions
Thanks

Answer 1

Like #Strelok said, the code is in the <script> tag if you right click the page and view source.
xAxis: [
{
type: 'datetime',
tickInterval: 6 * 3600 * 1000,
tickPosition: 'inside',
tickLength: 30,
gridLineWidth: 1,
gridLineColor: '#F0F0F0',
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
offset: 30,
showLastLabel: true,
labels: {
formatter: function(){
return Highcharts.dateFormat('%H', this.value);
}
}
},
{
linkedTo: 0,
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function(){
return Highcharts.dateFormat(
'<span style="font-size: 12px; font-weight: bold">%a</span>, %b %e', this.value);
},
align: 'left',
x: 3
},
opposite: true,
tickLength: 20,
gridLineWidth: 1
}],
Top part is for bottom labels, bottom part is for top labels from the looks of it.
edit:
Give this a shot.
chart.getXAxis(1)
.setLinkedTo(0)
.setGridLineWidth(1)
.setOpposite(true)
.setTickInterval(24 * 3600 * 1000) // 24 hour tick intervals
.setCategories("Sat Nov13", "Sat Nov14", "Sat Nov15", "Sat Nov16");
chart.getXAxis(0)
.setGridLineWidth(1)
.setCategories("18","00","06","12","18","00","06","12","18","00","06","12","18","00","06","12","18");
.setTickInterval(6 * 3600 * 1000) // 6 hour tick intervals
.setTickPosition("inside")
.setStartOnTick(false)
.setEndOnTick(false)
.setOffset(30)
.setShowLastLabel(true)

Answer 2

in case you use unix epoch timestamps for your dates and if you need it the timestamp to be displayed in date format - just set the type of the axis to datetime
for example:
xAxis: {
type: 'datetime'
}
});
check this fiddle: http://jsfiddle.net/HnwbQ/1/
reference: http://www.highcharts.com/ref/#xAxis--type