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.

Answer 2

Try this.

Add this function:

function addButton() {
    $('div.jqplot-target').each(function () {
        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('<div class="header">Right Click to Save Image As...');

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

        $(this).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: $(this) }, 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;
        });

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

Then add a call to it at the end of the "$(document).ready(..." script that draws your chart/graph, just before the last '});'

I took the code from the example.js that is included in the download of jqPlot and made it a function.

Its not quite right, the header could do with some CSS to pretty-fy it a bit but it works.

CSS Edit.

The css needed to correct the 'Save as..' plot is below.

    .jqplot-image-button {
        margin-bottom: 15px;
        margin-top: 15px;
    }

   div.jqplot-image-container {
        position: relative;
        z-index: 11;
        margin: auto;
        display: none;
        background-color: #ffffff;
        border: 1px solid #999;
        display: inline-block;
        margin-top: 25px;
   }

   div.jqplot-image-container-header {
       font-size: 1.0em;
       font-weight: bold;
       padding: 5px 15px;
       background-color: #eee;
    }

    div.jqplot-image-container-content {
        padding: 15px;
        background-color: #ffffff;
    }

    a.jqplot-image-container-close {
        float: right;
    }