displaying data with hours and minutes on xAxis with gwt highcharts

[Sassoum]

Hi ,
I have an Area Chart and I want to get the xAxis set to Date_Time showing hours and minutes of one single day starting from 06:00 to 23h55 with PickInterval set to 30 min . I use also a table of number to set the chart points, but, I don't get the resulat I'm looking for.

here is my code:

private Number entrees[] = {10,0,3,13,10,11,13,13,14,14,10,15,
                                20,20,21,21,25,27,45,46,48,49,51,56,
                                67,68,69,74,75,77,81,81,80,75,74,75,
                                65,54,53,54,43,34,30,32,33,36,24,27,
                               ....};

  chartArea.setMarginLeft(40)
        .setSpacingTop(5)
        .setSpacingBottom(5)
        .setToolTip(new ToolTip().setEnabled(true))
        .setExporting(new Exporting().setEnabled(false))
        .setCredits(new Credits().setEnabled(false))
        .setLegend(new Legend().setEnabled(false));

    chartArea.getYAxis().setExtremes(0, 100);
    chartArea.getXAxis(0)
    .setType(Axis.Type.DATE_TIME)
    .setMaxZoom(3600000)

    .setDateTimeLabelFormats(new DateTimeLabelFormats().setHour("%H:%M").setMinute("%H:%M")) ;

    chartArea.getXAxis()
    .setTickmarkPlacement(TickmarkPlacement.ON)
    .setOption("crosshair", "true")
        .setOption("events/setExtremes", "syncExtremes");

    final Series series3 = chartArea.createSeries();
    series3.setType(Type.AREA)
        .setName("entrees");

        series3.setPoints(entrees)
    .setPlotOptions(new AreaPlotOptions().setPointStart(DateTimeFormat.getFormat("yyyy-MM-dd").parse("2015-09-22").getTime()));
    chartArea.addSeries(series3).setColors("#8bbc21");

So, What I've missed in this code to have the result joined below

[Sassoum]

Sorry for the attachement miss, here you are

[Sassoum]

I have tested also an other solution, so instead of using the 'entrees' table, I 've entered points directly with the same method used in this example

http://www.moxiegroup.com/moxieapps/gwt-highcharts/showcase/#line-spline-irregular:

 .setPoints(    new Number[][]{
            {getTime("2015-9-22"), 0},  
            {getTime("2015-9-22"), 10},  
            {getTime("2015-9-22"), 20},  
            {getTime("2015-9-22"), 15},  
            {getTime("2015-9-22"), 14},  
            {getTime("2015-9-22"), 15},  
            {getTime("2015-9-22"), 32},  
            {getTime("2015-9-22"), 42},  
             {getTime("2015-9-22"), 25},  
                ....
            }
        )

with:

         private long getTime(String date) {  
        return dateTimeFormat.parse(date).getTime();  
    }

but without success,

Any idea please???? it's very very urgent

[Sassoum]

no one have an idea about the issue I'm facing?
if you have a trouble to understand my problem, please feel free to ask,

regards,

[Shawn Quinn]

I can't follow your code example above very well, so if you can boil your use-case down to a simple/complete example that shows the issue - that would probably help. One thing I do see that is odd in your example above is that you're creating the series from the "chartSyncArea2" variable, but then you're adding it to the "chartArea" variable. If those two variables represent different Chart instances, then that could be causing a problem.

[Sassoum]

Hi shawn,

You're right, this is just an error when I copied the code here, I changed the name of the chart for more clarity but I've missed to change this latter. So I've edited it above.
Otherwise, I've submitted all the code of my chart, only if you want to see the code of the uibinder file:

<g:HTMLPanel>
        <g:LayoutPanel width="100%" height="100%"  > 
            <g:layer top="67%" left="0px" right="0px" bottom="0px"> 
                <highcharts:Chart  ui:field="chartArea" height="100%" />
            </g:layer> 
    </g:LayoutPanel> 
</g:HTMLPanel>

and here is its corresponding java file:

public class MyAreaChart extends Composite {

private static MyAreaChartUiBinder uiBinder = GWT
        .create(MyAreaChartUiBinder.class);

interface MyAreaChartUiBinder extends
        UiBinder<Widget, MyAreaChart> {
}

@UiField 
Chart chartArea;

private Number entrees[] = {10,0,3,13,10,11,13,13,14,14,10,15,
                            20,20,21,21,25,27,45,46,48,49,51,56,
                            67,68,69,74,75,77,81,81,80,75,74,75,
                            65,54,53,54,43,34,30,32,33,36,24,27,
                           ....};

public MyAreaChart() {

        initWidget(uiBinder.createAndBindUi(this));

        ChartTitle areaChartTitle = new ChartTitle()
        .setText("entrees")
        .setAlign(Align.LEFT)
        .setMargin(0)
        .setX(30)
        .setStyle(new Style().setFontSize("14px"));

        chartArea.setTitle(areaChartTitle, null)
        .setMarginLeft(40)
        .setSpacingTop(5)
        .setSpacingBottom(5)
        .setToolTip(new ToolTip().setEnabled(true))
        .setExporting(new Exporting().setEnabled(false))
        .setCredits(new Credits().setEnabled(false))
        .setLegend(new Legend().setEnabled(false));

        chartArea.getYAxis().setExtremes(0, 100);
        chartArea.getXAxis(0)
        .setType(Axis.Type.DATE_TIME)
        .setMaxZoom(3600000)

        .setDateTimeLabelFormats(new DateTimeLabelFormats().setHour("%H:%M").setMinute("%H:%M")) ;

        chartArea.getXAxis()
        .setTickmarkPlacement(TickmarkPlacement.ON)
        .setOption("crosshair", "true")
            .setOption("events/setExtremes", "syncExtremes");

        final Series series3 = chartArea.createSeries();
        series3.setType(Type.AREA)
            .setName("entrees");

            series3.setPoints(entrees)
        .setPlotOptions(new AreaPlotOptions().setPointStart(DateTimeFormat.getFormat("yyyy-MM-dd").parse("2015-09-22").getTime()));
        chartArea.addSeries(series3).setColors("#8bbc21");
}

}

that's it all the code of my area Chart!
I wish it's more clear now

[Sassoum]

I forgot to notice that when I call 'setTickInterval(3600*1000)' on the xAxis Element like this :

chartArea.getXAxis()
    .setTickInterval(3600*1000)

instead of the setMaxZoom(3600000), all the tick values disappear completely and the data will appear (looat the attachement)

I'm very confused, and really don't understand why this is happening

[Sassoum]

Have someone an idea how to fix this issue asap, pleaaaaaaaaaase

[Shawn Quinn]

Just gave this a try, and it looks like the only thing you're missing is the "pointInterval" option on the series plot options. E.g.

series3.setPoints(entrees)
    .setPlotOptions(
        new AreaPlotOptions()
            .setPointStart(DateTimeFormat.getFormat("yyyy-MM-dd").parse("2015-09-22").getTime())
            .setPointInterval(3600 * 1000)
    );

[Sassoum]

now it seems that the situation is better, but it's not exactly what I need (take a look to the joined snapshot).
What I need to see is an interval of 30 minutes between the tick and the other beginning from 06:00am untill 23:30pm
Do you have a tip how to do this ???
thanks

[Shawn Quinn]

See the "setMinorTick...()" and "setMajorTick...()" options on the XAxis object for tighter control around how the ticks are drawn.

[Sassoum]

Thank you for you answer, I will try and put it in practice