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(); } }