JqPlot As Image

Question

In the latest JqPlot examples (see here, there are buttons underneath some charts that you can click, and a div slides down with the chart as an image, allowing you to right click and save as.

I've checked the source and I just can't see myself where this is happening. I've seen various discussions about this (see here however my javascript is basic at best. This is however something I would like to implement in my current project.

Is anyone aware of a complete tutorial as to how to do this, i.e. from the actual jquery code right down to implementation in html code.

Answer 1

Here's the simplest example I can code up:

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // append the img to the DOM

Fiddle here.

Answer 2

Mark thanks for your contribution ,Just an Addition sometimes you may have mixed in(included) the cursor and Zoom functionality and you may need to create an image of a section of the graph, hoping to revert back to zoom back to create images of other sections. this may not be easy since jqPlot will not revert the graph for you to the original plot,so you have to this for yourself manually.

My Remedy

1. Enrich your $.jqplot options with

   cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false, dblClickReset:true, }

   this allows users to be in a position to revert back to the graphs initial look. if you choose this approach remember to advice your users on how to revert back via an advice note such as

   Double click on the Graph to Reset Zoom back to 100% for usability purposes.

For Those more inclined to Coding Here is a remedy , it includes Some of the code introduced by Mark(Thanks Again)

1. Create a button right below the graph, furnish it with an id attribute and attach an even handler to its click function,

           <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>
   

2. attach an event listener and implement/register a handler like this

$('#show_revert_graph_btn').click(function(){
  // simulating a double click on the  canvas
  // not that the selecting expression includes 
  // the div id of where i chose to plot the chart "chart104" and the default class
  // provided to the canvas holding my chart i.e "canvas.jqplot-event-canvas"
  // then i double click it
        $('#chart104 canvas.jqplot-event-canvas').dblclick();
    });

Image Creation after zoom In my application i needed to create multiple images, out of different portions of the chart, so zoom allows me to magnify this parts, and the canvas to image functionality allows me to save the current data being shown in the canvas after i have zoomed in on a point. challenge was,how to reload my new zoom point as a new image for copying Remedy

1. Create your button for plot Image
2. attach a listener, to jquery's toggle event allow for you to show and hide the image
3. Handle the image to manage the zoom events, i.e when i zoom in generate a new image, so that when i click i see the image of the zoomed-in part and not the old image of the whole chart

 $('#show_plotted_image_btn').toggle(
        function(){
            console.log('showing graph');
            // get the image
            function genImg(){
            var imgData = $('#chart104').jqplotToImageStr({});
       // given the div       id of your plot, get the img data
            var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
            $('#plotted_image_div').empty(); // remove the old graph
            $('#plotted_image_div').append(imgElem);
            };
            genImg();
            // show the image
            $('#plotted_image_div').css('display','block');

        },
        function(){
            // hide the image
            console.log('hiding graph');
            $('#plotted_image_div').css('display','none');
        }
    );

*In My implementation i only wanted to show the latest image,hence every time i ask for a new image i get rid of the old one via $('#plotted_image_div').empty();, which is simply emptying the old image and then appending the new one. *

*Here is my HTML for those who may need further clarity *

<div id="chart104" class=""></div>

            <button id="show_plotted_image_btn" class="jqplot-image-button">View Plot Image</button>
            <span style="font-weight: bold; color:#FC2896;"> Double click on the Graph to Reset Zoom back to 100%</span>
            <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>
            <div id="plotted_image_div" class="" style="display: none;"></div>

Good Luck

Answer 3

It looks like they're using a feature of Canvas to render to an image:

https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js

Answer 4

When you got problems with the image output you have to change the jquery.jqplot.js. On some browsers the script stops of infinte loop (Chrome and Firefox).

change this code:

for (var i=0; i<wl; i++) {
    w += words[i];
    if (context.measureText(w).width > tagwidth) {
        breaks.push(i);
        w = '';
        i--;
    }   
}

to this:

for (var i=0; i<wl; i++) {
    w += words[i];
    if (context.measureText(w).width > tagwidth && w.length > words[i].length) {
        breaks.push(i);
        w = '';
        i--;
    }   
}

add this to your html:

<div id="chart"></div>
<div id="imgChart"></div>

and this to jquery after your jqplot-code:

$(document).ready(function(){
    //after creating your plot do
    var imgData = $('#chart').jqplotToImageStr({}); // given the div id of your plot, get the img data
    var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
    $('#imgChart').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //
});

See a demo here

Answer 5

This solution worked well for me. Simple and quick.

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //

I am using primefaces 3.2 and hence dont have the ability to use the new feature available in primefaces