jqPlot display button

Question

I am using jqPlot to create and display charts.

Can I please have some help to display a button on the same page as the graph that will enable an image to be created of the chart so that the image can be saved to file.

Here is my code:

<script class="code" type="text/javascript">
$(document).ready(function(){
var cosPoints = []; 
for (var i=0; i<2*Math.PI; i+=0.1){ 
 cosPoints.push([i, Math.cos(i)]); 
} 
  var plot1 = $.jqplot('chart1', [cosPoints], {  
  series:[{showMarker:false}],
  axes:{
    xaxis:{
      label:'Angle (radians)'
    },
    yaxis:{
      label:'Cosine'
    }
  }
});

var c = $(document.createElement("button"));
c.text("View Plot Image test");
c.addClass("jqplot-image-button");
c.bind("click", {
    chart: $(this)
}, function (h) {
    var j = h.data.chart.jqplotToImageElem();
    var i = $(this).nextAll("div.jqplot-image-container").first();
    i.children("div.jqplot-image-container-content").empty();
    i.children("div.jqplot-image-container-content").append(j);
    i.show(500);
    i = null
    });

var c = $("<button type='button'></button>")
.text('View Plot Image test')
.addClass('jqplot-image-button')
.insertAfter($('#chart1'));

});

The graph and button are shown. However, if I click on the button, no graph is shown to be saved. Can I please have some help to fix this?

Answer 1

Your problem is that you aren't actually adding the button into the DOM. Try this:

var c = $("<button type='button'></button>")
    .text('View Plot Image test')
    .addClass('jqplot-image-button')
    .insertAfter($('#chart1'));

What this will do is add a button as a sibling element to the chart1 div, so that it will appear below the plot.

Edit:

Looking at the problem, there is actually a bit more to it than that. The following code is adapted from here:

if (!$.jqplot.use_excanvas) {
    var outerDiv = $(document.createElement('div'));
    var header = $(document.createElement('div'));
    var div = $(document.createElement('div'));

    outerDiv.append(header);
    outerDiv.append(div);

    outerDiv.addClass('jqplot-image-container');
    header.addClass('jqplot-image-container-header');
    div.addClass('jqplot-image-container-content');

    header.html('Right Click to Save Image As...');

    var close = $(document.createElement('a'));
    close.addClass('jqplot-image-container-close');
    close.html('Close');
    close.attr('href', '#');
    close.click(function() {
        $(this).parents('div.jqplot-image-container').hide(500);
    })
    header.append(close);

    $('#chart1').after(outerDiv);
    outerDiv.hide();

    outerDiv = header = div = close = null;

    var btn = $(document.createElement('button'));
    btn.text('View Plot Image');
    btn.addClass('jqplot-image-button');
    btn.bind('click', {chart: $('#chart1')}, function(evt) {
        var imgelem = evt.data.chart.jqplotToImageElem();
        var div = $(this).nextAll('div.jqplot-image-container').first();
        div.children('div.jqplot-image-container-content').empty();
        div.children('div.jqplot-image-container-content').append(imgelem);
        div.show(500);
        div = null;
    });

    $('#chart1').after(btn);
    btn.after('<br />');
    btn = null;
}

Using this I was able to show the button and have it produce the downloadable image.

Note also that your current code is creating the button twice - just replace that code with code above.