just started using jsflot and I love it, have one issue I need resolved by thursday though‏

[Matt Kohanek]

Joachim Skeie recommended jsflot to me on javaranch forums back in early april, and I am very glad he saw my post:

http://www.coderanch.com/t/443829/JSF/java/needing-tips-developing-line-chart#2042380

But anyway, I finally got done with my pieces of the project far enough to where I can start on my other teammates parts, and in a matter of 3 hours work (that includes time setting up classes for xml parsing) I was able to convert my data points stored on my web service to a line chart.  This code is great, I have to tell you.

I have one issue I cant seem to find anything about though.  I would just try to figure it out myself (and still will do that), but I need to have this ready by thursday morning, so I could really use a little help. 

Every time I generate a line chart, it comes out like it is supposed to, but there is always a line that cuts back across the chart, connecting the first and last data points.  In other words, the initial line is there, that is usually jagged and going from left to right, but there is also a straight line that goes from right to left connecting the last point back to the first point.  I really need to get rid of this, and no matter how I look I cannot find anything about this on the livedemo.

Here is my java code and the chart tag if it is needed to help resolve this, I just hope this is seen in time for me to do it within 30 hours or so.

<jsflot:flotChart id="chart" value="#{chartBean.chartSeries}" chartType="line"
                    crosshair="xy" showTooltip="true" showDataPoints="true" xaxisTitle="Time Past T0(in seconds)"
                    yaxisTitle="Value"/>


package actionBean;

public class Chart {
   
   
    private String channelId;
    private String t0;
    private double xValue;
    private double yValue;
    private List<DataPoint> dataPoints;
    private XYDataList series1DataList = new XYDataList();
    XYDataSetCollection chartSeries;
   
    public void channelSelection(NodeSelectedEvent event){       
        Channel channel = null;
        HtmlTree tree = (HtmlTree) event.getComponent();
        channel = (Channel) tree.getRowData();
       
        String dataUrl = channel.getChannelId();
        System.out.println("dataUrl: "+dataUrl);
       
        ChannelData channelData = null;
        ChannelDataXMLAO accessChannelData = new ChannelDataXMLAO();
        ChannelHttpClient channelHttpMethod = new ChannelHttpClient();
       
       
        try {
            channelData = accessChannelData.readXML(channelHttpMethod.GetChannelData(dataUrl));
        } catch (Exception e) {
            // TODO Auto-generated catch block
            //e.printStackTrace();
        }
       
       
        System.out.println("ChannelData Object: "+channelData);
       
        if(channelData!=null){
        channelId=channelData.getChannelId();
        t0=channelData.getT0();
        dataPoints=channelData.getDataPoints();
        System.out.println("channelId: "+channelId+" t0: "+t0+" dataPoints: "+dataPoints.iterator().toString());
       
        XYDataSetCollection collection = new XYDataSetCollection();
            for(DataPoint dataPoint : dataPoints){
                String xString=dataPoint.getDt();
                String yString=dataPoint.getValue();
               
                xValue=Double.parseDouble(xString);
                yValue=Double.parseDouble(yString);
               
                series1DataList.addDataPoint(xValue, yValue);
               
                System.out.println("xValue: "+xValue+" yValue: "+yValue);
            }
        collection.addDataList(series1DataList);
       
        }else{System.out.println("No Data Points Exist");}
    }

    public XYDataSetCollection getChartSeries() {
        XYDataSetCollection collection = new XYDataSetCollection();
       
        int xValue=0;
        int yValue=0;
       
        series1DataList.addDataPoint(xValue, yValue);
       
        collection.addDataList(series1DataList);
       
        return collection;
       
    }
   
   
    //setters and getters
   
}




Thanks
Matt Kohanek

"True wisdom is in knowing you know nothing." - Socrates

--
True wisdom is in knowing you know nothing - Socrates

[Joachim H. Skeie]

Hello,

Are you able to post your output HTML ? I dont need the whole thing,
just the part equivalent to the following on you end. I am the most
interested in the data point that will reside in the JavaScript
function function chart_jsflotdrawGraph(opts).

<div id="yourForm:chart"><div id="chart" height="300" width="600"
style="width:600px;height:300px;"></div>
<script id="yourForm:chart_source" language="javascript" type="text/
javascript">
//<![CDATA[
document.observe('dom:loaded', function() {
drawJSFlotChart();
});

function drawJSFlotChart() {
var options = {
HtmlText: false,
legend: {
backgroundColor: '#D2E8FF',
backgroundOpacity: 0.85,
noColumns: 1,
position: 'ne',
show: true
},
lines: {
fill: false,
show: true
},
points: {show: false},
xaxis: {
labelsAngle: 45,
showLabels: true
},
yaxis: {
showLabels: true,
tickFormatter: function(n){ return yaxisConverter(n); },
titleAngle: 90
}
};
function valueTimeChart_jsflotdrawGraph(opts){
var o = Object.extend(Object.clone(options), opts || {});
return Flotr.draw($('valueTimeChart'), [ {
data: [[0,6.783, 'Point: 0'], [1,9.175, 'Point: 1'], [2,5.09,
'Point: 2'], [3,2.382, 'Point: 3'], [4,2.468, 'Point: 4'], [5,2.778,
'Point: 5'], [6,6.435, 'Point: 6'], [7,0.991, 'Point: 7'], [8,9.728,
'Point: 8'], [9,7.182, 'Point: 9'], [10,2.46, 'Point: 10']],
label: 'Series 1'
},{
data: [[0,6.107, 'Point: 0'], [1,2.673, 'Point: 1'], [2,7.881,
'Point: 2'], [3,9.265, 'Point: 3'], [4,4.858, 'Point: 4'], [5,6.198,
'Point: 5'], [6,3.696, 'Point: 6'], [7,7.096, 'Point: 7'], [8,4.243,
'Point: 8'], [9,4.69, 'Point: 9'], [10,6.157, 'Point: 10']],
label: 'Series 2'
},{
data: [[0,1.153], [1,4.985], [2,7.823], [3,5.005], [4,3.683],
[5,9.583], [6,0.281], [7,8.515], [8,7.214], [9,2.978], [10,4.268]],
label: 'Series 3'
} ],o);
}
var valueTimeChart_jsflot = valueTimeChart_jsflotdrawGraph();
var startingx = valueTimeChart_jsflot.axes.x.min;
var endingx = startingx;
var dragstart;
var dragend;
}

//]]>
</script>

On Aug 12, 4:04 am, Matt Kohanek <meghi...@gmail.com> wrote:
> Joachim Skeie recommended jsflot to me on javaranch forums back in early
> april, and I am very glad he saw my post:
>

> http://www.coderanch.com/t/443829/JSF/java/needing-tips-developing-li...

[Matt Kohanek]

I am at work right now so don't have access to this project, I am doing this for another company so it is at my home.  But I thought about it while getting ready this morning and I am wondering if it has something to do with this.  In my getChartSeries method, which is what I have bound as the value to my chart, I first do this just to have a chart show up with only a point at 0, 0:

 

public void getChartSeries(){

> >         int xValue=0;
> >         int yValue=0;
> >
> >         series1DataList.addDataPoint(xValue, yValue);
> >
> >         collection.addDataList(series1DataList);
> >
> >         return collection;

}

 

Then when a user clicks on a rich:tree node, it generates some new x and yValues, and then reRenders the chart.  But that 0, 0 value is still there as well.  So I usually end up with a chart that starts at 0, 0, then goes through the new numbers I load in, then connects back to 0, 0.  Maybe I need to clear out the 0, 0 value before I add the new values, then add the new values and have the chart reRendered with the new values only.  I'm not sure what the command would be, but I'm guessing something like series1DataList.clear() or collection.clear() will be what I need to try.

 

I will try this when I get home in about 7 hours, and if this doesn't work I will still send the html output today.

 

Thanks for your help

[Joachim H. Skeie]

Hello again,

I would assume that series1DataList.clear() will be sufficient.

On Aug 12, 3:10 pm, Matt Kohanek <meghi...@gmail.com> wrote:
>  I am at work right now so don't have access to this project, I am doing
> this for another company so it is at my home.  But I thought about it while
> getting ready this morning and I am wondering if it has something to do with
> this.  In my getChartSeries method, which is what I have bound as the value
> to my chart, I first do this just to have a chart show up with only a point
> at 0, 0:
>
> public void getChartSeries(){
>
> > >         int xValue=0;
> > >         int yValue=0;
>
> > >         series1DataList.addDataPoint(xValue, yValue);
>
> > >         collection.addDataList(series1DataList);
>
> > >         return collection;
> }
>
> Then when a user clicks on a rich:tree node, it generates some new x and
> yValues, and then reRenders the chart.  But that 0, 0 value is still there
> as well.  So I usually end up with a chart that starts at 0, 0, then goes
> through the new numbers I load in, then connects back to 0, 0.  Maybe I need
> to clear out the 0, 0 value before I add the new values, then add the new
> values and have the chart reRendered with the new values only.  I'm not sure
> what the command would be, but I'm guessing something like
> series1DataList.clear() or collection.clear() will be what I need to try.
>
> I will try this when I get home in about 7 hours, and if this doesn't work I
> will still send the html output today.
>
> Thanks for your help
>

[Matt Kohanek]

I got it working now.  I just needed more time to study it.  I just had to set the variable and getMethods like this:

XYDataSetCollection chartSeries = new XYDataSetCollection();
public XYDataSetCollection getChartSeries() {
        return chartSeries;
    }

This would load the page with a blank chart instead of one with 0, 0 data points.  Then when a node was selected I loaded the chartSeries with new variables:

        for(DataPoint dataPoint : dataPoints){
                String xString=dataPoint.getDt();
                String yString=dataPoint.getValue();
               
                xValue=Double.parseDouble(xString);
                yValue=Double.parseDouble(yString);
               
                series1DataList.addDataPoint(xValue, yValue);
               
                System.out.println("xValue: "+xValue+" yValue: "+yValue);
            }

        chartSeries.addDataList(series1DataList);

This does the trick, thanks for your help.  Also by the way, I couldn't try series1DataList.clear(); because XYDataCollection does not have a pre defined .clear() method.  You must have though I was meaning to use that on some other data type.
Here was the old html output if you still want to see it:

<script id="chartForm:chart_source" language="javascript" type="text/javascript">document.observe('dom:loaded', function() {

drawJSFlotChart();
});

function drawJSFlotChart() {
var options = {
   HtmlText: false,

   crosshair: {mode: 'xy'},

   legend: {
      backgroundColor: '#D2E8FF',
      backgroundOpacity: 0.85,

      noColumns: 1,
      position: 'ne',
      show: true
   },
   lines: {
      fill: false,
      show: true
   },

   mouse: {
      relative: false,
      track: true,
      trackFormatter: function(obj) { return JSFlot.AJAX.pointLabelFormatter(obj); }

   },
   points: {show: true},

   xaxis: {
      labelsAngle: 45,
      showLabels: true,

      title: 'Time Past T0(in seconds)'

   },
   yaxis: {
      showLabels: true,
      tickFormatter: function(n){ return yaxisConverter(n); },

      title: 'Value',
      titleAngle: 90
   }
};
function chart_jsflotdrawGraph(opts){

var o = Object.extend(Object.clone(options), opts || {});

return Flotr.draw($('chart'), [ {
   data:  [[0,0]],

   label: ''
} ],o);
}
var chart_jsflot = chart_jsflotdrawGraph();
var startingx = chart_jsflot.axes.x.min;

var endingx = startingx;
var dragstart;
var dragend;
}

Now if the problem is that I am first putting in a data point at 0, 0

</script>

[Joachim H. Skeie]

Hello again,

I am glad you got it working!

To clear the list, though, you could use the following:

series1DataList.getDataPointList().clear();

> ...
>
> read more »

[Matt Kohanek]

Wow! I was just about to come here with another issue and that solved
it! Every time I would click from one node to the next, the previous
chart would remain there and the new chart would overlay on top of
it. This of course was problematic, but
series1DataList.getDataPointList().clear(); is exactly what was needed
to fix it.

Thanks so much, you read my mind

> ...
>
> read more »