tooltip and drill down chart in SVG

[meodows92]

Hi everyone, i am new here and also i am new to jfreesvg to make chart, hope the community will guide me and give more sample codes here because i am on the rush for the dead line for a project. I am doing a web application for using their data. What does this system do is to take their raw data and do some counting and display to the user, this is where user query the certain period and it will display the chart it accordingly. But on my previous post on the tooltip image map problem which one it's being resize the image map will be out of position, so there is a person suggest me to use SVG. But i have no ideal how to start even do my drill down chart. Will your help me by posting some drill down samples for the Servlet side and the JSP side. For the post i just mention is this link: http://www.jfree.org/phpBB2/viewtopic.php?f=3&t=117128 if your could help me on that issue i will be very glade too. Hope could receive your reply and thanks for reading.

[meodows92]

hi has anyone can give me an answer?

[david.gilbert]

I don't have any good example in JFreeChart, because the code isn't finished. A number of renderers have been updated in SVN so you would have to get the code direct from the repo.

The general approach is described for Orson Charts (more or less JFreeChart3D but not free):

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

It works the same for JFreeChart, or will once the next release is done (I don't know when that will be).

[essday]

Meodows92, I've been working on something similar using the 1.0.20 top-of-tree code. You may want to follow this post for updates.

However, even without switching to SVG, the image map resizing problem is not intractable. When writing out the <img> tag, we add a "data-original-(height/width)" attribute to record the original size of the image. We then attach a resize handler to the window, and whenever we get a (debounced!) resize event, we resize the coordinates in all of the elements in the image map. The following code works at least for "rect" areas (ie. for bar charts and such).

Code: Select all

    resizeImageMap: function() {
        jQuery('.chartDataViewImage').each(function(idx, chartDiv) {
            var $chartDiv = jQuery(chartDiv);
            var $img = $chartDiv.find('img');
            var $map = $chartDiv.find('map');

            var origHeight = $img.attr('data-original-height');
            var origWidth = $img.attr('data-original-width');

            var heightScale = $img.height() / origHeight;
            var widthScale = $img.width() / origWidth;

            if (typeof $map.attr('data-current-scale-width') === 'undefined') {
                $map.attr('data-current-scale-width', 1);
            }

            if (typeof $map.attr('data-current-scale-height') === 'undefined') {
                $map.attr('data-current-scale-height', 1);
            }

            // If the scale has changed since we last looped through
            // the map, go fix the offsets now.

            if (widthScale != $map.attr('data-current-scale-width') ||
                heightScale != $map.attr('data-current-scale-height')) {

                $map.attr('data-current-scale-width', widthScale);
                $map.attr('data-current-scale-height', heightScale);

                $map.find("area[shape='rect']").each(function(idx, area) {
                    var $area = jQuery(area);

                    var origCoords = $area.attr('data-original-coords');

                    if (typeof origCoords==='undefined') {
                        origCoords = $area.attr('coords');
                        $area.attr('data-original-coords', origCoords);
                    }

                    var coords = origCoords.split(','); // left, top, right, bottom
                    coords[0] *= widthScale;
                    coords[1] *= heightScale;
                    coords[2] *= widthScale;
                    coords[3] *= heightScale;
                    $area.attr('coords', coords.join(','));
                });
            }
        });
    },