Mapping images

JetChart supports mapping of series into an HTML formatted data stream, using the <map> tag. In conjunction with the image encoding feature, explained in the previous topics, it is possible to implement drill-down on mapped chart images. By clicking on a series data point, a browser can be directed to other HTML page displaying another chart or detailed information associated with the data point clicked.

This approach is often used with servlets demanding generation of chart images from JetChart, in which case a chart is encoded into a GIF, JPEG or PNG encoded stream concomitantly with image mapping.

The abstract method AbstractSerie.getSerieMap is implemented in subclasses of AbstractSerie, as GraphSerie, PieSerie and ScatterSerie. It returns a map of series data points using one of the available map formats. GraphSerie and PieSerie implement three variations of the method above. Please refer to the API documentation to get more information about series mapping.

The following example encodes a horizontal bar chart into a PNG file and generates an html map of the resulting image. After running the example, load the barchart.html file from your browser and click any bar to be directed to an URL associated with the bar clicked.


import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import com.jinsight.jetchart.*;

public class Main extends JFrame implements ActionListener {
    
    Graph graph;
    
    ChartEncoder chartEncoder;

    BarSerie bs;

    public Main() { 
	
	JPanel topPanel=new JPanel(new FlowLayout(FlowLayout.LEFT));
	JButton button=new JButton("Generate png file/image map");
	button.addActionListener(this);
	topPanel.add(button);
	
	Graph graph=new Graph(new String[]{"l1","l2","l3","l4","l5","l6"});

	graph.setGradientColors(Color.white,Color.yellow);
	graph.setTitle(new String[]{"The JetChart Library","Mapping images"});	
	graph.set3DEnabled(true);
	graph.setHorizontalGraphEnabled(true);
		
	chartEncoder=new ChartEncoder(graph);
	
	bs=new BarSerie(new double[]{100,70,80,90,50,60},"Bar series");
	bs.setColor(Color.blue);
	
	graph.addSerie(bs);

	
	graph.getGraphSet(0).getGrid().setEnabled(true);
	
	Container ct=getContentPane();
	
	ct.add(graph);
	ct.add("North",topPanel);
	
	setSize(450,350);
	
	setVisible(true);
	
    }
        
    public void actionPerformed(ActionEvent evt) {

	FileOutputStream out=null;
	FileWriter fw=null;

	try {

	    File f=new File("barchart.png");
	    out=new FileOutputStream(f);
	    
	    // Encodes chart image into a png file, setting the compression level to 9.
	    chartEncoder.pngEncode(out,9);

	    String serieMap="";
	    // Creates an html text to insert series map. 
	    serieMap+="<html><body bgcolor=white><br><br>\n\n"; 
	    
	    serieMap+="<map name='map'>\n"; 
	    
	    // These are the urls associated with each bar. A click on a bar directs
	    // browser to respective URL.
	    String[] urls={"http://www.javasoft.com","http://www.jinsight.com",
			   "http://www.javalobby.com","http://www.javacat.com",
			   "http://www.javashareware.com","http://www.jars.com"};
	    
	    // Gets bar series image map. Generates the map using the client-side format.
	    serieMap+=bs.getSerieMap(urls,AbstractSerie.CLIENT_SIDE,null)+"\n";
	    
	    
	    serieMap+="</map>\n"; 
	    
	    // Links barchart.png(the png image generated in this example) to the series map.
	    serieMap+="<br><br><image src=barchart.png usemap='#map' border=0>\n";  
	    
	    // Ends html code.
	    serieMap+="<br><br></body></html>"; 

	    fw=new FileWriter("barchart.html");
	    fw.write(serieMap);
	    
	}   
	catch (IOException e) {
	    e.printStackTrace();
	}
	finally {
	    try {
		if (out!=null)
		    out.close();
		if (fw!=null)
		    fw.close();
	    }
	    catch (IOException e) {
	    }
	}
	
    }
        
    public static void main(String[] args) {
	new Main();
    }
    
}