GWT Highcharts / Discussion / General Discussion: Alignemnt Issue in my chart

I am facing alignment issue in GWT HighCharts ,below is the link to my chart, any idea why every thing is a bit unaligned like the columns and symbols
means column bars shouldn't appear ON the vertical lines

http://kic-charting.appspot.com/

below is my code :

public Chart createChart() {
btnChart.setEnabled(false);
final Chart chart = new Chart()
.setBorderColor("#C7D5D5")
.setBorderWidth(3)
.setBorderRadius(0)

.setBackgroundColor("#FFFFFF")
.setOption(
        "#FFFFFF",
        new Color().setLinearGradient(0, 25, 0, 25.1)
        .addColorStop(0, "#C7D5D5")
        .addColorStop(1, "white"))
        .setChartTitleText("Meteogram")

        .setSpacingTop(5)
        //              .setSpacingRight(5)
        //              .setChartSubtitleText("yr.no")
        .setColumnPlotOptions(new ColumnPlotOptions())
        //              .setToolTip(new ToolTip().setFormatter(new ToolTipFormatter() {

        .setToolTip(new ToolTip()
        .setShared(false)  
        )  
        .setAreaPlotOptions(new AreaPlotOptions()  
        .setFillColor(new Color()  
        .setLinearGradient(0.0, 0.0, 0.0, 1.0)  
        .addColorStop(0, 69, 114, 167)  
        .addColorStop(1, 2, 0, 0, 0)  
        )  
        .setLineWidth(1)  
        .setMarker(new Marker()  
        .setEnabled(false)  
        .setHoverState(new Marker()  
        .setEnabled(true)  
        .setRadius(5)  
        )  
        )  
        .setShadow(false)  
        .setHoverStateLineWidth(1)  
        ) ;

final XAxis axis = chart.getXAxis();

// Primary yAxis
chart.getYAxis(0).setTickInterval(2)
.setGridLineWidth(1)
.setAxisTitleText("")
.setAxisTitle(new AxisTitle().setText(""))
.setGridLineColor("#F0F0F0")
.setMaxPadding(0.3)
.setLabels(
        new YAxisLabels()
        .setStyle(new Style().setFontSize("10px"))
        //                              .setX(-3)

        .setFormatter(new AxisLabelsFormatter() {
            public String format(
                    AxisLabelsData axisLabelsData) {
                return axisLabelsData.getValueAsLong()
                + "Â°";
            }
        })

);
chart.getYAxis(1).setTickInterval(2).createPlotLine().setColor("#C0C0C0").setWidth(1)
.setValue(0);

// Secondary yAxis
chart.getYAxis(1)
.setGridLineWidth(0)
.setAxisTitle(new AxisTitle().setText(""))
.setOpposite(true)
.setLinkedTo(0)
.setGridLineWidth(0)

.setMaxPadding(0.3)
.setLabels(
        new YAxisLabels()
        .setStyle(new Style().setFontSize("10px")

        )//.setX(3)
        // .setEnabled(false)
        .setFormatter(new AxisLabelsFormatter() {
            public String format(
                    AxisLabelsData axisLabelsData) {
                return axisLabelsData.getValueAsLong()
                + "Â°";
            }
        }));

Point p1 = new Point("2010-09-05 00", 3.5);
Marker marrow = new Marker();
marrow.setEnabled(true);
marrow.setOption("symbol", "url(E.png)");
p1.setMarker(marrow);

Marker m = new Marker();
m.setOption("symbol", "url(1.png)");
Marker m1 = new Marker();
m1.setOption("symbol", "url(10.png)");
Marker m2 = new Marker();
m2.setOption("symbol", "url(11.png)");
Marker m3 = new Marker();
m3.setOption("symbol", "url(12.png)");
Marker m4 = new Marker();
m4.setOption("symbol", "url(41.png)");
Marker m5 = new Marker();
m5.setOption("symbol", "url(12n.png)");
Label lblDay = new Label();
lblDay.setText("day");
lblDay.setStyleName("bold");
chart.getXAxis(1)

.setGridLineWidth(1)

.setType(Type.DATE_TIME)
.setDateTimeLabelFormats(
        new DateTimeLabelFormats().setOption("day","%a, %b %e"))

        .setLinkedTo(0)
        .setTickInterval(24 * 3600 * 1000)
        .setOpposite(true)
        .setTickLength(20)
        .setGridLineWidth(1)

        .setLabels(
                new XAxisLabels().setAlign(Labels.Align.LEFT).setX(3)
                .setY(-3));

chart.getXAxis(0)
.setLabels(new XAxisLabels ().setFormatter(new AxisLabelsFormatter(){

    @Override
    public String format(AxisLabelsData axisLabelsData) {
        // TODO Auto-generated method stub
        return null;
    }})

)

//      .setPlotBands(  
//              chart.getXAxis(1) .createPlotBand()
//              .setFrom(Date.parse("Sun, 05 Sep 2010 00:00:00 " ))
//              .setTo(Date.parse("Sun, 05 Sep 2010 06:00:00" ))       
//              .setLabel(new PlotBandLabel().  setY(275).setX(-5)
//                      .setText("Light")  
//                      .setStyle(new Style()  
//                      .setColor("#606060")
//                      )  ),
//                      chart.getXAxis(1).createPlotBand()  
//                      .setFrom(Date.parse("Sun, 05 Sep 2010 06:00:00 " ))
//                      .setTo(Date.parse("Sun, 05 Sep 2010 12:00:00" ))       
//                      .setLabel(new PlotBandLabel()  .setY(275).setX(-5)
//                              .setText("breeze")  
//                              .setStyle(new Style()  
//                              .setColor("#606060")  
//                              )  
//                      ))

.setGridLineWidth(1)
.setType(Axis.Type.DATE_TIME)
.setDateTimeLabelFormats(
        new DateTimeLabelFormats().setHour("%H"))
        .setTickInterval(6 * 3600 * 1000)
        .setTickPosition(TickPosition.INSIDE).setTickLength(30)
        .setGridLineWidth(1).setGridLineColor("#F0F0F0")
        .setStartOnTick(false).setEndOnTick(false).setMinPadding(0)
        .setMaxPadding(0).setOffset(30)

        .setShowLastLabel(true);

chart.addSeries(chart
        .createSeries()

        .setName("Precipitation")
        //              .setYAxis(2)

        .setType(Series.Type.COLUMN)
        .setPlotOptions(new ColumnPlotOptions().setColor("#68CFE8"))
        .setPlotOptions(
                new ColumnPlotOptions()
                .setPointPadding(0)
                .setGroupPadding(0)
                .setBorderWidth(0)
                .setDataLabels(
                        new DataLabels().setEnabled(true).setAlign(Align.CENTER)

                ))

                .setPoints(
                        new Number[][] {
                                //                               {getTime("2010-09-04 18"), 0},
                                { getTime("2010-09-05 00"), 0},
                                { getTime("2010-09-05 06"), 0 },
                                { getTime("2010-09-05 12"), 1.6 },
                                { getTime("2010-09-05 18"), 2.4 },
                                { getTime("2010-09-06 00"), 1.6 },
                                { getTime("2010-09-06 06"), 0 },
                                { getTime("2010-09-06 12"), 0 },
                                { getTime("2010-09-06 18"), 0.5 },
                                { getTime("2010-09-07 00"), 1.6 },
                                { getTime("2010-09-07 12"), 0.3 },
                                { getTime("2010-09-07 18"), 0 },
                                { getTime("2010-09-08 00"), 0 },
                                { getTime("2010-09-08 06"), 0 },
                                { getTime("2010-09-08 12"), 0 },
                                { getTime("2010-09-08 18"), 0 },

                        }).setYAxis(1));

Point[] poin;
Series ser = chart.createSeries();

chart.addSeries(ser

        .setName("Temperature")
        .setType(Series.Type.SPLINE)
        .setPoints(
                new Number[][] {

                        //                      
                        {getTime("2010-09-05 00"), 3.5},
                        {getTime("2010-09-05 06"), -3.8},  
                        {getTime("2010-09-05 12"), 3.1},  
                        {getTime("2010-09-05 18"), 2.4},  
                        {getTime("2010-09-06 00"), 2.1},
                        {getTime("2010-09-06 06"), 1},
                        {getTime("2010-09-06 12"), 2.5},  
                        {getTime("2010-09-06 18"), 2.6}, 
                        {getTime("2010-09-07 00" ), 1.8},  
                        {getTime("2010-09-07 06"), 2.5},  
                        {getTime("2010-09-07 12"), 2.9}, 
                        {getTime("2010-09-07 18"), 3.4},
                        {getTime("2010-09-08 00"), 3},  
                        {getTime("2010-09-08 06"), 2.5}, 
                        {getTime("2010-09-08 12"), 3.1},  
                        {getTime("2010-09-08 18"), 3.2},

                })

                .setPlotOptions(new ColumnPlotOptions()
                .setZIndex(1)
                //                      .setColor("#4572A7")

                .setColor("#4572A7"))

);

poin = ser.getPoints();
m.setEnabled(false);
m.setHoverState(m5);
poin[1].setMarker(m);
poin[2].setMarker(m1);
poin[3].setMarker(m);
poin[0].setMarker(m1);
poin[4].setMarker(m2);
poin[5].setMarker(m3);
poin[6].setMarker(m4);
poin[7].setMarker(m5);
poin[8].setMarker(m);
poin[9].setMarker(m1);
poin[10].setMarker(m5);
poin[11].setMarker(m4);
poin[12].setMarker(m3);
poin[14].setMarker(m2);
poin[13].setMarker(m);
poin[15].setMarker(m1);

return chart;

}

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

static final DateTimeFormat dateTimeFormat = DateTimeFormat
.getFormat("yyyy-MM-dd HH");

thanks

Last edit: junaidp 2012-02-07

Alignemnt Issue in my chart

Forums

Help

Alignemnt Issue in my chart

Alignemnt Issue in my chart

Forums

Help

Alignemnt Issue in my chart document.SUBSCRIPTION_OPTIONS = { "thing": "topic", "subscribed": false, "url": "subscribe", "icon": { "css": "fa fa-envelope-o" } };

Alignemnt Issue in my chart