Click here to Skip to main content
15,895,084 members
Articles / Web Development / HTML

Dynamic JQPlot

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
12 Feb 2013CPOL8 min read 40.5K   1K   9  
How to dynamically build a JQPlot graph through the code behind.
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package BusinessLogic.Page;

import BusinessLogic.GraphDefinition.Graph;
import BusinessLogic.Objects.DataPoint;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.GregorianCalendar;


/**
 *
 * @author vincentm
 */
public class PageBuilder {
    private String datatoplot = "";
    
    private ArrayList<DataPoint> seriesa;
    private ArrayList<DataPoint> seriesb;
    private GregorianCalendar start;
    private GregorianCalendar end;
    private GraphBuilder graphbuilder;
    private Graph graph;
    
    public PageBuilder(){
	//Build the dataset.  This is where you would have fetched data from a datasource.
	seriesa = new ArrayList<DataPoint>();
	seriesb = new ArrayList<DataPoint>();

	
	start = (GregorianCalendar)Calendar.getInstance();
	end = (GregorianCalendar)Calendar.getInstance();
	GregorianCalendar gc_tmp = (GregorianCalendar)Calendar.getInstance();
	gc_tmp.add(Calendar.HOUR, -5);
	start.add(Calendar.HOUR, -10);
	for(int i = 0; i < 100; i++){
	    DataPoint a = new DataPoint();
	    DataPoint b = new DataPoint();
	    
	    a.setDateTimeStamp(gc_tmp);
	    double aval = Math.pow(i, 1.0/2.0);
	    a.setPointValue(aval);
	    b.setDateTimeStamp(gc_tmp);
	    double bval = i*(1.0/7.0);
	    b.setPointValue(bval);
	    seriesa.add(a);
	    seriesb.add(b);
	    gc_tmp.add(Calendar.HOUR, 1);

	}
	end.setTimeInMillis(gc_tmp.getTimeInMillis());
	
	//Here the graph gets built.
	graphbuilder = new GraphBuilder();
	graph = graphbuilder.Build(seriesa, seriesb, start, end);
	
	
    }

    /** write the javascript arrays to the page so it can be used by JQPlot. */
    public String WritePlotData(){
	StringBuilder builder2 = new StringBuilder("");	    //defines the legend labels
	StringBuilder builder3 = new StringBuilder("");    //object names
	StringBuilder builder = new StringBuilder("");	    //datapoints array

	builder2.append("var legendlabels = ['Series A', 'Series B']");
	builder3.append("[series_a, series_b]");
	builder.append("var series_a = [");
	for(int i = 0; i < seriesa.size(); i++){
	    if(i != 0){
		builder.append(",");
	    }			
	    GregorianCalendar gc_tmp = seriesa.get(i).getDateTimeStamp();
	    builder.append("[");		    
	    builder.append("(new Date(");
	    builder.append(gc_tmp.get(Calendar.YEAR));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.MONTH));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.DAY_OF_MONTH));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.HOUR_OF_DAY));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.MINUTE));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.SECOND));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.MILLISECOND));
	    builder.append(")).getTime()");

	    builder.append(",");
	    builder.append(seriesa.get(i).getPointValue());
	    builder.append("]");
	}
	builder.append("];");

	builder.append("var series_b = [");
	for(int i = 0; i < seriesb.size(); i++){
	    if(i != 0){
		builder.append(",");
	    }			
	    GregorianCalendar gc_tmp = seriesb.get(i).getDateTimeStamp();
	    builder.append("[");		    
	    builder.append("(new Date(");
	    builder.append(gc_tmp.get(Calendar.YEAR));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.MONTH));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.DAY_OF_MONTH));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.HOUR_OF_DAY));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.MINUTE));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.SECOND));
	    builder.append(",");
	    builder.append(gc_tmp.get(Calendar.MILLISECOND));
	    builder.append(")).getTime()");

	    builder.append(",");
	    builder.append(seriesb.get(i).getPointValue());
	    builder.append("]");
	}
	builder.append("];");
	builder.append(builder2.toString());
	datatoplot = builder3.toString();
	return builder.toString();
    }

    /**
     * This is where you write the graph definition.  
     * An asynchronous call was used to let the page load, while JQPlot is generating the graph.
     */
    public String WriteGraphDefinition(){
	StringBuilder builder = new StringBuilder("");
	StringBuilder builder_graphfunction = new StringBuilder("");
	StringBuilder builder_asyncfunction = new StringBuilder("");
	StringBuilder builder_zoom = new StringBuilder("");		

	builder_asyncfunction.append("var asynctimer;");
	builder_asyncfunction.append("function CreateGraphAsync(){ asynctimer=setInterval('CreateGraph()', 500);}");
	builder_graphfunction.append("function CreateGraph(){ clearInterval(asynctimer);");
	builder_graphfunction.append("try{");
	builder_graphfunction.append(graph.toString());
	builder_graphfunction.append("plot = $.jqplot('chart', ").append(datatoplot).append(", optionsObj);");
	builder_graphfunction.append("}catch(ex){alert(ex.stack);}");
	builder_graphfunction.append("}");


	builder.append(builder_asyncfunction).append(builder_zoom).append(builder_graphfunction);

	return builder.toString();
    }
	 
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
V.
Software Developer
Belgium Belgium
Graduate Computer Sciences.
My interests go out to music and movies.
Author of the infamous MQOTD
Creator of this video

Comments and Discussions