JQPlot Legend outside of graph

Question

I am using JQPlot and I have many graphs on one HTML page. Each of the graphs has the same legend.

My question is this: Is it possible to display a legend totally outside of the graph with its own position on the HTML page or in its own div?

Answer 1

Maybe you could hide the legend of the 2nd to the last graph, like this:

legend: { show:false}

and in the 1st graph, put something like:

 legend:{
        show:true, 
        placement: 'outside', 
        rendererOptions: {
            numberRows: 1
        }, 
        location:'n'

This way you will only show one legend at the top of the graphs.

Answer 2

Are you looking for title? You can style .jqplot-title to appear differently. It appears outside of the graph by default.

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});

You could also restyle the legend. See table.jqplot-table-legend at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html

Answer 3

legend:{ 
                show:true,
                    renderer: $.jqplot.EnhancedLegendRenderer,
                    location: 's' ,
                    placement : "outside",
                    marginTop : "30px",
                    rendererOptions: {
                        numberRows: 1
                    }
                 },

You can use placement : "outside" like in the above code. And you can move it using marginTop,marginBottom,marginRight,marginLeft properties.