Mouse events in web applications

[Neda]

Hello to all of you!

I've a SVG object

DOMImplementation domImpl = GenericDOMImplementation.getDOMImplementation();
Document document = domImpl.createDocument(null, "svg", null);
SVGGraphics2D svgGenerator = new SVGGraphics2D(document);
TblPartner partner = (TblPartner)request.getAttribute("partner");
MarketCurvesComparisonGrafik grafikManager = new MarketCurvesComparisonGrafik(inputData, fullStatistic, filteredStatistic, partner);
JFreeChart chart = grafikManager.createChart();
chart.draw(svgGenerator, new Rectangle2D.Double(0, 0, 800, 600), null);
svgGenerator.setSVGCanvasSize(new Dimension(700, 600));
request.setAttribute("svg", svgGenerator);

I use this object in my .jsp file. Then I show image:

<%
org.apache.batik.svggen.SVGGraphics2D svgGenerator = (org.apache.batik.svggen.SVGGraphics2D)request.getAttribute("svg");
boolean useCSS = true;
response.setContentType("image/svg+xml");
java.io.Writer out2 = response.getWriter();
svgGenerator.stream(out2, useCSS);
out2 = null;
%>

Maybe it's not the best way, but it works.

I want to have mouse event, when I click on SVG. Is that possible?

[david.gilbert]

There is some code in SVN (that will be included in the next release) that updates some of the renderers to put tags in the SVG elements that let you identify the chart element. The idea is described here (for Orson Charts):

http://www.object-refinery.com/blog/blog-20140509.html

As I find the time, I'm adding the same feature to JFreeChart.

[Neda]

Thank you, but then I have to code everything from scratch.

I've made ChartEntity Object:

Code: Select all

public ChartEntity getEntity(JFreeChart chart){
		XYLineAndShapeRenderer circleRenderer = (XYLineAndShapeRenderer)chart.getXYPlot().getRenderer(0);
		Shape shape = circleRenderer.getSeriesShape(0);
		ChartEntity entity = new ChartEntity(shape);
		entity.setToolTipText("http://www.compensation-online.de/");
        entity.setURLText("http://www.compensation-online.de/");
        return entity;
	}

Code: Select all

final ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
        final File file1 = new File("C:\\Users\\neda.danilovic\\workspace\\pmsg.partner\\zentrale\\pcms\\bilder\\graphic.png");
        ChartUtilities.saveChartAsPNG(file1, chart, 600, 400, info);
        StandardEntityCollection ec = new StandardEntityCollection();
        ec.add(grafikManager.getEntity(chart));
        info.setEntityCollection(ec);
        
        String htmltag = ChartUtilities.getImageMap("chart", info);

As a result I've got

Code: Select all

<area shape="poly" coords="4,0,2,2,0,4,-2,2,-4,0,-2,-2,0,-4,2,-2,4,0,4,0" title="http://www.co.de/" alt="" href="http://www.co.de/"/>

But I don't get "onMouseOver" in area tag.

Could you help me please.

Neda

[Neda]

I've tried with Image and ImageMaps and works!

BUt in SVG works not jet. I have some circles in JFreeCharts

Code: Select all

XYLineAndShapeRenderer xylineandshaperenderer = new XYLineAndShapeRenderer(false, true);
		xylineandshaperenderer.setBaseOutlineStroke(new BasicStroke(1f));
		xylineandshaperenderer.setSeriesPaint(0, green);
	    xylineandshaperenderer.setSeriesShape(0, circle, true);
	    xylineandshaperenderer.setUseFillPaint(true);

But when I translate in SVG, I become <path> tag but not <circle> tag. Do you know why?

Code: Select all

<path d="M66.125 575.877 L66.125 567.2832 L67.25 567.2832 L67.25 575.877 L66.125 575.877 ZM69.1309 575.877 L69.1309 567.2832 L70.1777 567.2832 L70.1777 570.3613 Q70.9121 569.5176 72.0371 569.5176 Q72.7402 569.5176 73.248 569.791 Q73.7559 570.0645 73.9746 570.541 Q74.1934 571.0176 74.1934 571.9395 L74.1934 575.877 L73.1465 575.877 L73.1465 571.9395 Q73.1465 571.1426 72.8027 570.7832 Q72.459 570.4238 71.834 570.4238 Q71.3652 570.4238 70.9512 570.666 Q70.5371 570.9082 70.3574 571.3223 Q70.1777 571.7363 70.1777 572.4707 L70.1777 575.877 L69.1309 575.877 ZM75.7891 575.877 L75.7891 569.6582 L76.7422 569.6582 L76.7422 570.5957 Q77.1016 569.9395 77.4062 569.7285 Q77.7109 569.5176 78.0859 569.5176 Q78.6172 569.5176 79.1641 569.8457 L78.8047 570.8301 Q78.4141 570.5957 78.0391 570.5957 Q77.6797 570.5957 77.4062 570.8066 Q77.1328 571.0176 77.0234 571.3926 Q76.8359 571.9551 76.8359 572.6113 L76.8359 575.877 L75.7891 575.877 ZM84.0508 573.877 L85.1445 574.002 Q84.8945 574.9551 84.1914 575.4863 Q83.4883 576.0176 82.4102 576.0176 Q81.0508 576.0176 80.2461 575.1738 Q79.4414 574.3301 79.4414 572.8145 Q79.4414 571.252 80.2539 570.3848 Q81.0664 569.5176 82.3477 569.5176 Q83.5977 569.5176 84.3867 570.3613 Q85.1758 571.2051 85.1758 572.752 Q85.1758 572.8457 85.1758 573.0332 L80.5352 573.0332 Q80.5977 574.0645 81.1133 574.6035 Q81.6289 575.1426 82.4102 575.1426 Q82.9883 575.1426 83.4023 574.8379 Q83.8164 574.5332 84.0508 573.877 ZM80.5977 572.1738 L84.0664 572.1738 Q84.0039 571.377 83.6758 570.9863 Q83.1602 570.377 82.3633 570.377 Q81.6289 570.377 81.1367 570.8613 Q80.6445 571.3457 80.5977 572.1738 ZM95.5742 567.2832 L96.7148 567.2832 L96.7148 572.252 Q96.7148 573.5488 96.418 574.3066 Q96.1211 575.0645 95.3555 575.541 Q94.5898 576.0176 93.3555 576.0176 Q92.1523 576.0176 91.3789 575.6035 Q90.6055 575.1895 90.2773 574.4004 Q89.9492 573.6113 89.9492 572.252 L89.9492 567.2832 L91.0898 567.2832 L91.0898 572.2363 Q91.0898 573.3613 91.3008 573.8926 Q91.5117 574.4238 92.0195 574.7129 Q92.5273 575.002 93.2617 575.002 Q94.5117 575.002 95.043 574.4316 Q95.5742 573.8613 95.5742 572.2363 L95.5742 567.2832 ZM98.4746 575.877 L98.4746 569.6582 L99.4121 569.6582 L99.4121 570.5332 Q100.0996 569.5176 101.3965 569.5176 Q101.959 569.5176 102.4355 569.7207 Q102.9121 569.9238 103.1465 570.252 Q103.3809 570.5801 103.4746 571.0176 Q103.5215 571.3145 103.5215 572.0488 L103.5215 575.877 L102.4746 575.877 L102.4746 572.0957 Q102.4746 571.4395 102.3496 571.127 Q102.2246 570.8145 101.9121 570.6191 Q101.5996 570.4238 101.1777 570.4238 Q100.5059 570.4238 100.0137 570.8535 Q99.5215 571.2832 99.5215 572.4707 L99.5215 575.877 L98.4746 575.877 ZM107.4453 574.9395 L107.6016 575.8613 Q107.1484 575.9551 106.8047 575.9551 Q106.2266 575.9551 105.9141 575.7754 Q105.6016 575.5957 105.4688 575.2988 Q105.3359 575.002 105.3359 574.0488 L105.3359 570.4707 L104.5703 570.4707 L104.5703 569.6582 L105.3359 569.6582 L105.3359 568.1113 L106.3828 567.4863 L106.3828 569.6582 L107.4453 569.6582 L107.4453 570.4707 L106.3828 570.4707 L106.3828 574.1113 Q106.3828 574.5645 106.4375 574.6895 Q106.4922 574.8145 106.6172 574.8926 Q106.7422 574.9707 106.9766 574.9707 Q107.1641 574.9707 107.4453 574.9395 ZM112.7324 573.877 L113.8262 574.002 Q113.5762 574.9551 112.873 575.4863 Q112.1699 576.0176 111.0918 576.0176 Q109.7324 576.0176 108.9277 575.1738 Q108.123 574.3301 108.123 572.8145 Q108.123 571.252 108.9355 570.3848 Q109.748 569.5176 111.0293 569.5176 Q112.2793 569.5176 113.0684 570.3613 Q113.8574 571.2051 113.8574 572.752 Q113.8574 572.8457 113.8574 573.0332 L109.2168 573.0332 Q109.2793 574.0645 109.7949 574.6035 Q110.3105 575.1426 111.0918 575.1426 Q111.6699 575.1426 112.084 574.8379 Q112.498 574.5332 112.7324 573.877 ZM109.2793 572.1738 L112.748 572.1738 Q112.6855 571.377 112.3574 570.9863 Q111.8418 570.377 111.0449 570.377 Q110.3105 570.377 109.8184 570.8613 Q109.3262 571.3457 109.2793 572.1738 ZM115.1406 575.877 L115.1406 569.6582 L116.0938 569.6582 L116.0938 570.5957 Q116.4531 569.9395 116.7578 569.7285 Q117.0625 569.5176 117.4375 569.5176 Q117.9688 569.5176 118.5156 569.8457 L118.1562 570.8301 Q117.7656 570.5957 117.3906 570.5957 Q117.0312 570.5957 116.7578 570.8066 Q116.4844 571.0176 116.375 571.3926 Q116.1875 571.9551 116.1875 572.6113 L116.1875 575.877 L115.1406 575.877 ZM119.1523 575.877 L119.1523 569.6582 L120.0898 569.6582 L120.0898 570.5332 Q120.7773 569.5176 122.0742 569.5176 Q122.6367 569.5176 123.1133 569.7207 Q123.5898 569.9238 123.8242 570.252 Q124.0586 570.5801 124.1523 571.0176 Q124.1992 571.3145 124.1992 572.0488 L124.1992 575.877 L123.1523 575.877 L123.1523 572.0957 Q123.1523 571.4395 123.0273 571.127 Q122.9023 570.8145 122.5898 570.6191 Q122.2773 570.4238 121.8555 570.4238 Q121.1836 570.4238 120.6914 570.8535 Q120.1992 571.2832 120.1992 572.4707 L120.1992 575.877 L119.1523 575.877 ZM130.0762 573.877 L131.1699 574.002 Q130.9199 574.9551 130.2168 575.4863 Q129.5137 576.0176 128.4355 576.0176 Q127.0762 576.0176 126.2715 575.1738 Q125.4668 574.3301 125.4668 572.8145 Q125.4668 571.252 126.2793 570.3848 Q127.0918 569.5176 128.373 569.5176 Q129.623 569.5176 130.4121 570.3613 Q131.2012 571.2051 131.2012 572.752 Q131.2012 572.8457 131.2012 573.0332 L126.5605 573.0332 Q126.623 574.0645 127.1387 574.6035 Q127.6543 575.1426 128.4355 575.1426 Q129.0137 575.1426 129.4277 574.8379 Q129.8418 574.5332 130.0762 573.877 ZM126.623 572.1738 L130.0918 572.1738 Q130.0293 571.377 129.7012 570.9863 Q129.1855 570.377 128.3887 570.377 Q127.6543 570.377 127.1621 570.8613 Q126.6699 571.3457 126.623 572.1738 ZM132.5 575.877 L132.5 567.2832 L133.5469 567.2832 L133.5469 570.3613 Q134.2812 569.5176 135.4062 569.5176 Q136.1094 569.5176 136.6172 569.791 Q137.125 570.0645 137.3438 570.541 Q137.5625 571.0176 137.5625 571.9395 L137.5625 575.877 L136.5156 575.877 L136.5156 571.9395 Q136.5156 571.1426 136.1719 570.7832 Q135.8281 570.4238 135.2031 570.4238 Q134.7344 570.4238 134.3203 570.666 Q133.9062 570.9082 133.7266 571.3223 Q133.5469 571.7363 133.5469 572.4707 L133.5469 575.877 L132.5 575.877 ZM139.1738 575.877 L139.1738 569.6582 L140.1113 569.6582 L140.1113 570.5332 Q140.4082 570.0645 140.8926 569.791 Q141.377 569.5176 142.002 569.5176 Q142.6895 569.5176 143.1348 569.7988 Q143.5801 570.0801 143.752 570.5957 Q144.502 569.5176 145.6738 569.5176 Q146.6113 569.5176 147.1035 570.0254 Q147.5957 570.5332 147.5957 571.6113 L147.5957 575.877 L146.5488 575.877 L146.5488 571.9551 Q146.5488 571.3301 146.4473 571.0488 Q146.3457 570.7676 146.0801 570.5957 Q145.8145 570.4238 145.4395 570.4238 Q144.7832 570.4238 144.3535 570.8613 Q143.9238 571.2988 143.9238 572.2676 L143.9238 575.877 L142.8613 575.877 L142.8613 571.8301 Q142.8613 571.127 142.6035 570.7754 Q142.3457 570.4238 141.7676 570.4238 Q141.3145 570.4238 140.9395 570.6582 Q140.5645 570.8926 140.3926 571.3457 Q140.2207 571.7988 140.2207 572.6426 L140.2207 575.877 L139.1738 575.877 ZM153.4199 573.877 L154.5137 574.002 Q154.2637 574.9551 153.5605 575.4863 Q152.8574 576.0176 151.7793 576.0176 Q150.4199 576.0176 149.6152 575.1738 Q148.8105 574.3301 148.8105 572.8145 Q148.8105 571.252 149.623 570.3848 Q150.4355 569.5176 151.7168 569.5176 Q152.9668 569.5176 153.7559 570.3613 Q154.5449 571.2051 154.5449 572.752 Q154.5449 572.8457 154.5449 573.0332 L149.9043 573.0332 Q149.9668 574.0645 150.4824 574.6035 Q150.998 575.1426 151.7793 575.1426 Q152.3574 575.1426 152.7715 574.8379 Q153.1855 574.5332 153.4199 573.877 ZM149.9668 572.1738 L153.4355 572.1738 Q153.373 571.377 153.0449 570.9863 Q152.5293 570.377 151.7324 570.377 Q150.998 570.377 150.5059 570.8613 Q150.0137 571.3457 149.9668 572.1738 ZM155.8438 575.877 L155.8438 569.6582 L156.7812 569.6582 L156.7812 570.5332 Q157.4688 569.5176 158.7656 569.5176 Q159.3281 569.5176 159.8047 569.7207 Q160.2812 569.9238 160.5156 570.252 Q160.75 570.5801 160.8438 571.0176 Q160.8906 571.3145 160.8906 572.0488 L160.8906 575.877 L159.8438 575.877 L159.8438 572.0957 Q159.8438 571.4395 159.7188 571.127 Q159.5938 570.8145 159.2812 570.6191 Q158.9688 570.4238 158.5469 570.4238 Q157.875 570.4238 157.3828 570.8535 Q156.8906 571.2832 156.8906 572.4707 L156.8906 575.877 L155.8438 575.877 ZM162.0957 574.0176 L163.127 573.8613 Q163.2207 574.4863 163.6191 574.8145 Q164.0176 575.1426 164.752 575.1426 Q165.4707 575.1426 165.8223 574.8535 Q166.1738 574.5645 166.1738 574.1582 Q166.1738 573.7988 165.8613 573.5957 Q165.6426 573.4551 164.7832 573.2363 Q163.627 572.9395 163.1816 572.7285 Q162.7363 572.5176 162.502 572.1426 Q162.2676 571.7676 162.2676 571.2988 Q162.2676 570.8926 162.4551 570.5332 Q162.6426 570.1738 162.9707 569.9395 Q163.2207 569.7676 163.6426 569.6426 Q164.0645 569.5176 164.5645 569.5176 Q165.2832 569.5176 165.8379 569.7285 Q166.3926 569.9395 166.6582 570.2988 Q166.9238 570.6582 167.0176 571.252 L165.9863 571.3926 Q165.9238 570.9238 165.5879 570.6504 Q165.252 570.377 164.627 570.377 Q163.9082 570.377 163.5957 570.6191 Q163.2832 570.8613 163.2832 571.1895 Q163.2832 571.3926 163.4082 571.5488 Q163.5488 571.7207 163.8145 571.8301 Q163.9707 571.8926 164.752 572.0957 Q165.877 572.4082 166.3145 572.5957 Q166.752 572.7832 167.002 573.1426 Q167.252 573.502 167.252 574.0488 Q167.252 574.5801 166.9473 575.041 Q166.6426 575.502 166.0645 575.7598 Q165.4863 576.0176 164.752 576.0176 Q163.5332 576.0176 162.9004 575.5098 Q162.2676 575.002 162.0957 574.0176 ZM168.5176 575.877 L168.5176 567.2832 L169.5801 567.2832 L169.5801 572.1895 L172.0645 569.6582 L173.4395 569.6582 L171.0488 571.9551 L173.6738 575.877 L172.377 575.877 L170.3145 572.6895 L169.5801 573.4082 L169.5801 575.877 L168.5176 575.877 ZM178.5957 575.877 L178.5957 574.9551 Q177.8613 576.0176 176.6113 576.0176 Q176.0645 576.0176 175.5879 575.8066 Q175.1113 575.5957 174.877 575.2754 Q174.6426 574.9551 174.5488 574.4863 Q174.4863 574.1895 174.4863 573.502 L174.4863 569.6582 L175.5488 569.6582 L175.5488 573.1113 Q175.5488 573.9238 175.6113 574.2207 Q175.7051 574.627 176.0254 574.8691 Q176.3457 575.1113 176.8301 575.1113 Q177.2988 575.1113 177.7129 574.8691 Q178.127 574.627 178.3066 574.2051 Q178.4863 573.7832 178.4863 572.9863 L178.4863 569.6582 L179.5332 569.6582 L179.5332 575.877 L178.5957 575.877 ZM181.1758 575.877 L181.1758 569.6582 L182.1289 569.6582 L182.1289 570.5957 Q182.4883 569.9395 182.793 569.7285 Q183.0977 569.5176 183.4727 569.5176 Q184.0039 569.5176 184.5508 569.8457 L184.1914 570.8301 Q183.8008 570.5957 183.4258 570.5957 Q183.0664 570.5957 182.793 570.8066 Q182.5195 571.0176 182.4102 571.3926 Q182.2227 571.9551 182.2227 572.6113 L182.2227 575.877 L181.1758 575.877 ZM186.9062 575.877 L184.5469 569.6582 L185.6562 569.6582 L187 573.377 Q187.2031 573.9863 187.3906 574.627 Q187.5312 574.1426 187.7812 573.4551 L189.1719 569.6582 L190.25 569.6582 L187.8906 575.877 L186.9062 575.877 ZM195.4375 573.877 L196.5312 574.002 Q196.2812 574.9551 195.5781 575.4863 Q194.875 576.0176 193.7969 576.0176 Q192.4375 576.0176 191.6328 575.1738 Q190.8281 574.3301 190.8281 572.8145 Q190.8281 571.252 191.6406 570.3848 Q192.4531 569.5176 193.7344 569.5176 Q194.9844 569.5176 195.7734 570.3613 Q196.5625 571.2051 196.5625 572.752 Q196.5625 572.8457 196.5625 573.0332 L191.9219 573.0332 Q191.9844 574.0645 192.5 574.6035 Q193.0156 575.1426 193.7969 575.1426 Q194.375 575.1426 194.7891 574.8379 Q195.2031 574.5332 195.4375 573.877 ZM191.9844 572.1738 L195.4531 572.1738 Q195.3906 571.377 195.0625 570.9863 Q194.5469 570.377 193.75 570.377 Q193.0156 570.377 192.5234 570.8613 Q192.0312 571.3457 191.9844 572.1738 Z" style="fill:black; clip-path:url(#clipPath1); stroke:none;" />

[remiohead]

Documentation for the draw() method in SVGGraphics2D.

Code: Select all

Draws the specified shape with the current {@code paint} and 
@code stroke}.  There is direct handling for {@code Line2D}, 
@code Rectangle2D} and {@code Path2D}. All other shapes are
mapped to a {@code GeneralPath} and then drawn (effectively as 
{@code Path2D} objects).

[Neda]

Thank you that helped a lot!

I've overriden draw() Method and I've got mouse over Event. The only question is how to connect XYDataset with coordinates?

public class SVGGraphics2DCustom extends SVGGraphics2D {

private XYDataset xYDataset;

public SVGGraphics2DCustom(Document arg0, XYDataset xYDataset) {
super(arg0);
this.xYDataset = xYDataset;
}

@Override
public void draw(Shape shape)
{
Stroke stroke = gc.getStroke();
if ( stroke instanceof BasicStroke ){
Element element = getShapeConverter().toSVG(shape);
if(!(shape instanceof Line2D || shape instanceof Rectangle2D)){
Rectangle2D rect = shape.getBounds2D();
element.setAttributeNS(null, "onmouseover", "showWindow(" + (int)rect.getMaxX() + "," + (int)rect.getMaxY() + ")");
}
if ( element != null ){
getDOMGroupManager().addElement(element, (short)1);
}
} else {
// Shape shape1 = stroke.createStrokedShape(shape);
// fill(shape1);
}
}

}

For example, I've a graphic http://prntscr.com/5h2qsm with green dots. I've got here

element.setAttributeNS(null, "onmouseover", "showWindow(" + (int)rect.getMaxX() + "," + (int)rect.getMaxY() + ")");

coordinates, but I don't know which data element is that?

Thanks a lot!
Neda