jqPlot target that doesn't have a static id

Question

I'm just playing with jqplot for a few hours but I couldn't find how to specify the target in a more specific jquery way. for example if I have the html code:

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

I can create the chart using

 $.jqplot("chart", [], {});

and it will create a chart on the element with id: chart.

What I want is to use something like this:

$("#chart").jqplot([], {});

or

 $(".multiple_charts").jqplot([], {});

or

var myChart=$("<div></div>");
myChart.jqplot([], {});

I saw that this problem was already proposed in 2009 here: https://bitbucket.org/cleonello/jqplot/issue/114/jqplot-target-should-accept-any-element

Is there a solution to what I'm looking for? Thanks

Answer 1

From looking at the code, you could indeed see that $.jqplot only accepts the target element's id as first argument, so you're right about that.

However $.fn.jqplot is also defined, which means that you can use $(".multiple_charts").jqplot(); or $("<div></div>").jqplot();. Note that jqplot creates a unique id for each element in the jquery object if it doesn't already exist.

Oh, it looks like the version I looked at is not out yet, but you could just grab the latest code and make a workaround.

Answer 2

Just to follow up

HTML

 <div id="chart2" class="test2" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>

Data

var data1 = [
            ['Verwerkende industrie', 9], 
            ['Retail', 3], 
            ['Primaire producent', 4], 
            ['Out of home', 2], 
            ['Groothandel', 7], 
            ['Grondstof', 9], 
            ['Consument', 3], 
            ['Bewerkende industrie', 2]
        ];

so instead of doing this

var plot2 = $.jqplot($('chart2'), [ data1 ], {
            title: ' ', 
            seriesDefaults: {
                shadow: false, 
                renderer: jQuery.jqplot.PieRenderer, 
                rendererOptions: { 
                    startAngle: 180, 
                    sliceMargin: 4, 
                    showDataLabels: true
                } 
            }, 
            legend: { 
                show:true, location: 'w' 
            }
        }
    );

You can do this

$(".test2").jqplot( [data1] , {
            title: ' ', 
            seriesDefaults: {
                shadow: false, 
                renderer: jQuery.jqplot.PieRenderer, 
                rendererOptions: { 
                    startAngle: 180, 
                    sliceMargin: 4, 
                    showDataLabels: true
                } 
            }, 
            legend: { 
                show:true, location: 'w' 
            }
        }
    );