search

tel8618217223380 / jsflot

Automatically exported from code.google.com/p/jsflot
1 stars 1 forks source link

mode "time" - don't display date on x-axis #46

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
After reading tutorial (live demo site) I've set mode to "time" (with long for 
X value, rapresenting the millisecond), the "date label" isn't displayed.

I've tryed with multiple time format (default, "%d",..), same result.

What is the expected output? What do you see instead?
I'expect the same result of tutorial: correct date label on x axis.

What version of the product are you using? On what operating system?
jsf 1.2 + richfaces 3.3.3final + portlet bridge 2.1.0FINAL + jsflot-0.7 
modified for portlet: gatein 3.1 (jboss 5.1GA) with jsf portlet. I've modified 
2 java sources for use PortletRequest and PortletSession instead of 
HttpServletRequest and HttpServeletSession. Also I've modified XYDataZZZ with 
"implements java.io.Serializable" for use with richFaces a4j keepAlive 
annotation (bean scope Page), to prevent "no serializable exception" when I put 
my jsf bean in request/page scope.

Please provide any additional information below.

All is displayed correctly, but no date label (x axis).
Attachment: output with mode="time" and timeFormat="%d". In upper left corner I 
see a "date label" (90.0 rotation setted) with "NON" value (if I use timeformat 
%d/%m/%y I see NON/NON/NON).

what's the problem??

This is my code:

-------------XHTML (PARTIAL)---------------------
<script language="javascript" type="text/javascript" 
src="../js/excanvas.js"></script>
    <jsflot:resources />
    <a4j:keepAlive beanName="AwpStoricoContatore" />

<a4j:form id="graphFormId">
                <jsflot:flotChart 
                    rendered="#{AwpStoricoContatore.listaContatoriAwpSize > 0}"
                    id="valueTimeChart"
                    value="#{AwpStoricoContatore.chartSeries}"
                    showLines="#{AwpStoricoContatore.chartData.showLines}"
                    fillLines="#{AwpStoricoContatore.chartData.fillLines}"
                    showDataPoints="#{AwpStoricoContatore.chartData.showDataPoints}"
                    legendColumns="#{AwpStoricoContatore.chartData.legendColumns}"
                    legendOpacity="#{AwpStoricoContatore.chartData.legendOpacity}"
                    legendPosition="#{AwpStoricoContatore.chartData.legendPosition}"
                    legendColor="#{AwpStoricoContatore.chartData.legendColor}"
                    height="#{AwpStoricoContatore.chartData.height}"
                    width="#{AwpStoricoContatore.chartData.width}"
                    showTooltip="#{AwpStoricoContatore.chartData.showTooltip}"
                    tooltipPosition="#{AwpStoricoContatore.chartData.tooltipPosition}"
                    tooltipFollowMouse="#{AwpStoricoContatore.chartData.tooltipFollowMouse}"
                    mode="#{AwpStoricoContatore.chartData.mode}"
                    timeFormat="#{AwpStoricoContatore.chartData.timeFormat}"
                    title="#{AwpStoricoContatore.chartData.title}"
                    subtitle="#{AwpStoricoContatore.chartData.subtitle}"
                    chartType="#{AwpStoricoContatore.chartData.chartType}"
                    showXaxisLabels="#{AwpStoricoContatore.chartData.showXaxisLabels}"
                    xaxisTitle="#{AwpStoricoContatore.chartData.xaxisTitle}"
                    xaxisTitleRotation="#{AwpStoricoContatore.chartData.xaxisTitleRotation}"
                    xaxisLabelRotation="#{AwpStoricoContatore.chartData.xaxisLabelRotation}"
                    showYaxisLabels="#{AwpStoricoContatore.chartData.showYaxisLabels}"
                    yaxisTitle="#{AwpStoricoContatore.chartData.yaxisTitle}"
                    yaxisTitleRotation="#{AwpStoricoContatore.chartData.yaxisTitleRotation}"
                    yaxisLabelRotation="#{AwpStoricoContatore.chartData.yaxisLabelRotation}"
                    numberOfXAxisTicks="#{AwpStoricoContatore.chartData.numberOfXAxisTicks}"
                    xaxisMinValue="#{AwpStoricoContatore.chartData.xaxisMinValue}"
                    xaxisMaxValue="#{AwpStoricoContatore.chartData.xaxisMaxValue}"
                    numberOfYAxisTicks="#{AwpStoricoContatore.chartData.numberOfYAxisTicks}"
                    yaxisMinValue="#{AwpStoricoContatore.chartData.yaxisMinValue}"
                    markers="#{AwpStoricoContatore.chartData.markers}"
                    markerPosition="#{AwpStoricoContatore.chartData.markerPosition}"
                    yaxisMaxValue="#{AwpStoricoContatore.chartData.yaxisMaxValue}"
                    crosshair="#{AwpStoricoContatore.chartData.crosshair}">
                </jsflot:flotChart>
        </a4j:form>

-------RICH FACES/JSF PAGE SCOPED BEAN --------------------

    //start graph

    private XYDataList series1DataList = new XYDataList();
    private int minX = 0;
    private int maxX = 500;
    private FlotChartRendererData chartData;

    public FlotChartRendererData getChartData() {
        return chartData;
    }

    public void setChartData(FlotChartRendererData chartData) {
        this.chartData = chartData;
    }

    public XYDataSetCollection getChartSeries() {

        //dati grafo

        XYDataSetCollection collection = new XYDataSetCollection();
        XYDataList currentSeries1DataList = new XYDataList();

        int size = series1DataList.size();
        logger.debug("quanti elementi sulle X ? "+size);
        maxX = size-1;

        for (int i = minX; i <= maxX; i++) {
            long startTime = 1196463600000l;
            if (chartData.getMode().equalsIgnoreCase("Time")) {
                XYDataPoint p1 = new XYDataPoint(series1DataList.get(i).getX(), series1DataList.get(i).getY(), series1DataList.get(i).getPointLabel());
                p1.setX(startTime + (p1.getX().doubleValue() * 1000 * 60));

                currentSeries1DataList.addDataPoint(p1);

            } else {
                currentSeries1DataList.addDataPoint(series1DataList.get(i));
            }

        }
        //Copy over the meta data for each series to the current viewed-series
        currentSeries1DataList.setLabel(series1DataList.getLabel());
        currentSeries1DataList.setFillLines(series1DataList.isFillLines());
        currentSeries1DataList.setMarkerPosition(series1DataList.getMarkerPosition());
        currentSeries1DataList.setMarkers(series1DataList.isMarkers());
        currentSeries1DataList.setShowDataPoints(series1DataList.isShowDataPoints());
        currentSeries1DataList.setShowLines(series1DataList.isShowLines());

        collection.addDataList(currentSeries1DataList);

        return collection;
    }

    //end graph

//constructor:
    //init grafo: sulle X la data; sulle Y il valore (euro) di CNTTOTIN
        chartData = new FlotChartRendererData();
        chartData.setTitle("Grafico Contatori");
        //if"time": JSFlot expects the data points for the X-axis to contain a number representing the number of millisconds since January 1st 1970. Based on the data values shown in the chart, JSFlot will attempt to format the date with a suitable time format. This can be overridden via the timeFormat Attribute.
        chartData.setMode("Time");//default is "series"
        chartData.setXaxisTitle("Data");
        chartData.setYaxisTitle("Contatori");
        chartData.setShowXaxisLabels(true);
        chartData.setShowYaxisLabels(true);
        chartData.setShowDataPoints(true);
        chartData.setTimeFormat("%d/%m/%y");
        chartData.setXaxisLabelRotation(90.0);
        chartData.setXaxisMinValue(5.0);
        chartData.setXaxisMaxValue(10.0);
        chartData.setYaxisMinValue(5.0);
        chartData.setYaxisMaxValue(10.0);
        chartData.setHeight("500");
        chartData.setWidth("800");
        chartData.setMarkers(true);

        series1DataList.setLabel("Andamento Contatori");
        series1DataList.setShowDataPoints(true);
        series1DataList.setShowLines(true);

        //setting valori
        int i = 0;
        if(listaContatoriAwp!=null && !listaContatoriAwp.isEmpty()){
         for (ContatoriAWPBean bean : listaContatoriAwp) {
             int y = bean.getCnttotin();
             String dataStr = bean.getDataLettura();
             if(dataStr!=null && !dataStr.equals("")){
                 long x = DateUtil.getDate(dataStr, DateUtil.DATE_FORMAT_D).getTime();

                 //sulle X la data; sulle Y il valore (euro) di CNTTOTIN
                 series1DataList.addDataPoint(new XYDataPoint(x, y, "Point: " + i));
                 i++;
             }

        }

Original issue reported on code.google.com by mario.de...@gmail.com on 19 Jul 2011 at 2:03

Attachments:

GoogleCodeExporter commented 9 years ago 
attachment: new output with this settings:

chartData.setNumberOfXAxisTicks(10);//is ok/recognized
chartData.setNumberOfYAxisTicks(10);//is irrilevant!!!
chartData.setXaxisMaxValue(100.0);//what is?

Now I see "6date label": why not 10? All is 1980?! And I don't see any point.

help, thanks

Original comment by mario.de...@gmail.com on 19 Jul 2011 at 3:07

Attachments:

GoogleCodeExporter commented 9 years ago 
SOLVED
Sorry, but this code (from tutorial) doesn't work (because I have already 
millisecond for date, from date.getTime() and it is unnecessary):
//p1.setX(startTime + (p1.getX().doubleValue() * 1000 * 60));//MUST BE 
COMMENTED!!

So, for use jsflot-0.7 with JBoss 5.1+gate 3.1+richfaces 3.3.3+ jsf1.2 (portlet 
environment):
-change src to use PortletSession and PortletRequest (instead 
HttpServletSession and HttpServletRequest): 
src\main\java\org\jsflot\components\ResourcesRenderer.java and 
FlotChartRenderer.java
-if you want to use richfaces page scoped bean (a4j:keepAlive) change src 
(src\main\java\org\jsflot\xydata) to implements java.io.Serializable
-in the xhtml: 
        <script language="javascript" type="text/javascript" src="../js/excanvas.js"/> <!-- for IE7 and IE8: you can find it under META-INF -->
    <jsflot:resources />

<!-- FORM ID MUST BE PRESENT!!!! -->
<a4j:form id="graphFormId">
<jsflot:flotChart 

    id="valueTimeChart"
    value="#{AwpStoricoContatore.chartSeries}"
        showLines="#{AwpStoricoContatore.chartData.showLines}"
        fillLines="#{AwpStoricoContatore.chartData.fillLines}"
    showDataPoints="#{AwpStoricoContatore.chartData.showDataPoints}"
    legendColumns="#{AwpStoricoContatore.chartData.legendColumns}"
    legendOpacity="#{AwpStoricoContatore.chartData.legendOpacity}"
    legendPosition="#{AwpStoricoContatore.chartData.legendPosition}"
    legendColor="#{AwpStoricoContatore.chartData.legendColor}"
    height="#{AwpStoricoContatore.chartData.height}"
    width="#{AwpStoricoContatore.chartData.width}"
    showTooltip="#{AwpStoricoContatore.chartData.showTooltip}"
    tooltipPosition="#{AwpStoricoContatore.chartData.tooltipPosition}"
    tooltipFollowMouse="#{AwpStoricoContatore.chartData.tooltipFollowMouse}"
    mode="#{AwpStoricoContatore.chartData.mode}"
    timeFormat="#{AwpStoricoContatore.chartData.timeFormat}"
    title="#{AwpStoricoContatore.chartData.title}"
    subtitle="#{AwpStoricoContatore.chartData.subtitle}"
    chartType="#{AwpStoricoContatore.chartData.chartType}"
    showXaxisLabels="#{AwpStoricoContatore.chartData.showXaxisLabels}"
    xaxisTitle="#{AwpStoricoContatore.chartData.xaxisTitle}"
    xaxisTitleRotation="#{AwpStoricoContatore.chartData.xaxisTitleRotation}"
    xaxisLabelRotation="#{AwpStoricoContatore.chartData.xaxisLabelRotation}"
    showYaxisLabels="#{AwpStoricoContatore.chartData.showYaxisLabels}"
    yaxisTitle="#{AwpStoricoContatore.chartData.yaxisTitle}"
    yaxisTitleRotation="#{AwpStoricoContatore.chartData.yaxisTitleRotation}"
    yaxisLabelRotation="#{AwpStoricoContatore.chartData.yaxisLabelRotation}"
    numberOfXAxisTicks="#{AwpStoricoContatore.chartData.numberOfXAxisTicks}"
    xaxisMinValue="#{AwpStoricoContatore.chartData.xaxisMinValue}"
    xaxisMaxValue="#{AwpStoricoContatore.chartData.xaxisMaxValue}"
    numberOfYAxisTicks="#{AwpStoricoContatore.chartData.numberOfYAxisTicks}"
    yaxisMinValue="#{AwpStoricoContatore.chartData.yaxisMinValue}"
    markers="#{AwpStoricoContatore.chartData.markers}"
    markerPosition="#{AwpStoricoContatore.chartData.markerPosition}"
    yaxisMaxValue="#{AwpStoricoContatore.chartData.yaxisMaxValue}"
    crosshair="#{AwpStoricoContatore.chartData.crosshair}">
</jsflot:flotChart>
</a4j:form>

-in the jsf bean FOR A GRAPH WITH Y=EURO AND X=DATE (page scoped with 
a4j:keepAlive but session scoped is ok):
//start graph

    private XYDataList series1DataList = new XYDataList();
    private int minX = 0;
    private int maxX = 500;
    private FlotChartRendererData chartData;

    public FlotChartRendererData getChartData() {
        return chartData;
    }

    public void setChartData(FlotChartRendererData chartData) {
        this.chartData = chartData;
    }

    public XYDataSetCollection getChartSeries() {

        //dati grafo

        XYDataSetCollection collection = new XYDataSetCollection();
        XYDataList currentSeries1DataList = new XYDataList();

        int size = series1DataList.size();
        logger.debug("quanti elementi sulle X ? "+size);
        maxX = size-1;

        for (int i = minX; i <= maxX; i++) {
            long startTime = 1196463600000l;
            if (chartData.getMode().equalsIgnoreCase("Time")) {
                XYDataPoint p1 = new XYDataPoint(series1DataList.get(i).getX(), series1DataList.get(i).getY(), series1DataList.get(i).getPointLabel());
//              p1.setX(startTime + (p1.getX().doubleValue() * 1000 * 60));

                currentSeries1DataList.addDataPoint(p1);

            } else {
                currentSeries1DataList.addDataPoint(series1DataList.get(i));
            }

        }
        //Copy over the meta data for each series to the current viewed-series
        currentSeries1DataList.setLabel(series1DataList.getLabel());
        currentSeries1DataList.setFillLines(series1DataList.isFillLines());
        currentSeries1DataList.setMarkerPosition(series1DataList.getMarkerPosition());
        currentSeries1DataList.setMarkers(series1DataList.isMarkers());
        currentSeries1DataList.setShowDataPoints(series1DataList.isShowDataPoints());
        currentSeries1DataList.setShowLines(series1DataList.isShowLines());

        collection.addDataList(currentSeries1DataList);

        return collection;
    }

    //end graph

    //***

    //*** costruttore

    public AwpStoricoContatore() {

            _init();

    }

private void _init() {
    logger.info(">>_init");     
    //init graph
    chartData = new FlotChartRendererData();
    chartData.setTitle("Grafico Contatori");
    //if"time": JSFlot expects the data points for the X-axis to contain a number representing the number of millisconds since January 1st 1970. Based on the data values shown in the chart, JSFlot will attempt to format the date with a suitable time format. This can be overridden via the timeFormat Attribute.
        chartData.setMode("Time");//default is "series"
//      chartData.setSubtitle("sottotitolo");
        chartData.setXaxisTitle("Data");
        chartData.setYaxisTitle("Contatori");
        chartData.setShowXaxisLabels(true);
        chartData.setShowYaxisLabels(true);
        chartData.setShowDataPoints(true);
        chartData.setTimeFormat("%d/%m/%y");
        chartData.setXaxisLabelRotation(90.0);
        chartData.setNumberOfXAxisTicks(20);//numero di label sulle X
        chartData.setNumberOfYAxisTicks(20);//numero di label sulle Y
//      chartData.setXaxisMaxValue(100.0);//definisce il range di valori visibili: 
"tutti i punti che sulla X valgono massimo ..."
//      chartData.setYaxisMinValue(5.0);
//      chartData.setYaxisMaxValue(10.0);
        chartData.setHeight("500");
        chartData.setWidth("800");
        chartData.setMarkers(false);//valore del punto direttamente sul punto (no se hai una miriade di punti)
    chartData.setShowTooltip(true);//valore del punto come tooltip
    chartData.setTooltipFollowMouse(true);

    series1DataList.setLabel("Andamento Contatori");//nome nella leggenda
    series1DataList.setShowDataPoints(true);//il cerchietto che indica ogni punto
    series1DataList.setShowLines(true);//linee che collegano i vari punti

        //setting values
        int i = 0;

    for (ContatoriAWPBean bean : listaContatoriAwp) {
    int y = bean.getCnttotin();
    String dataStr = bean.getDataLettura();
     if(dataStr!=null && !dataStr.equals("")){
        //millisecond for date
    long x = DateUtil.getDate(dataStr, DateUtil.DATE_FORMAT_D).getTime();

       series1DataList.addDataPoint(new XYDataPoint(x, y, "Point: " + i));
    i++;
}

        }
        }
        logger.info("<<_init");
    }

Original comment by mario.de...@gmail.com on 19 Jul 2011 at 3:54

GoogleCodeExporter commented 9 years ago 
hello can you help me 

how cant y display  line from graphe on clik and see it afeter with simple 
click ?? thank you ?

Original comment by abb.wa...@gmail.com on 2 Mar 2013 at 11:35

GoogleCodeExporter commented 9 years ago 
I have the same problem.

But I tracked it down to a "bug" in the flotr.js.jsf file:

Instead of:

else if(axis.tickUnit=="year"){
    d.setUTCFullYear(d.getUTCFullYear()+axis.tickSize);
    }

there should be something like:

else if(axis.tickUnit=="year"){
    if (axis.tickSize < 1) {
        d.setUTCDate(0);
        d.setUTCMonth(d.getUTCMonth() + 1);
        d.setTime(v + tu.year * axis.tickSize);
        d.setUTCHours(0);
    } 
    else
        d.setUTCFullYear(d.getUTCFullYear()+axis.tickSize);
    }

This is only a draft, because the dates on the x-axis are not the first day of 
the month.

Original comment by thomas.k...@googlemail.com on 15 Oct 2013 at 11:55