I am trying to replot my jqplot chart.

$(document).ready(function(){

var dataseries = [[[10,20]]];

 var plot = $.jqplot('placeholder', dataseries ,
        { title:'<%= @question.text%>',
          axes:{
        yaxis:{min:-100, max:100, tickInterval:10, showTicks:true, label:"<%[email protected]%>"},
        xaxis:{min:-100, max:100, tickInterval:10, showTicks:true, label: "<%[email protected]%>"},
        y2axis:{min:-100, max:100, tickInterval:10, showTicks:true, label:"<%[email protected]%>", show:true},
        x2axis:{min:-100, max:100, tickInterval:10, showTicks:true, label:"<%[email protected]%>", show:true}},

          seriesDefaults:{showLine:false},
          series:<%=itemNames.html_safe%>,
          highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor}

        });
});

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    return plot.series[seriesIndex]["label"];
}


$("#placeholder").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) {

    var x = Math.round(datapos.xaxis);
        var y = Math.round(datapos.yaxis);
      var item = $('li.item_button_selected').attr('id');
      if (item > 0){
        var requestObj = {
          question_id: "<%[email protected]%>",
          user_id: "1",     
        }
        requestObj["item_id"]=item
        requestObj["x"]=x
        requestObj["y"]=y
            plot.series[0].data = [[50,50]];
            plot.replot();

BLAH BLAH BLAH...

<%=itemNames.html_safe%> typically looks like this: [{label:"Winona Ryder"},{label:"Paris Hilton"},{label:"Margaret Thatcher"},{label:"Snooki"},{label:"Natalie Portman"},]

The chart draws fine when the page loads; when I click on the chart, nothing happens. I know the click is being caught; if I put an alert in there, I see it. Help!

I am trying to replot my jqplot chart.

$(document).ready(function(){

var dataseries = [[[10,20]]];

 var plot = $.jqplot('placeholder', dataseries ,
        { title:'<%= @question.text%>',
          axes:{
        yaxis:{min:-100, max:100, tickInterval:10, showTicks:true, label:"<%[email protected]%>"},
        xaxis:{min:-100, max:100, tickInterval:10, showTicks:true, label: "<%[email protected]%>"},
        y2axis:{min:-100, max:100, tickInterval:10, showTicks:true, label:"<%[email protected]%>", show:true},
        x2axis:{min:-100, max:100, tickInterval:10, showTicks:true, label:"<%[email protected]%>", show:true}},

          seriesDefaults:{showLine:false},
          series:<%=itemNames.html_safe%>,
          highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor}

        });
});

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    return plot.series[seriesIndex]["label"];
}


$("#placeholder").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) {

    var x = Math.round(datapos.xaxis);
        var y = Math.round(datapos.yaxis);
      var item = $('li.item_button_selected').attr('id');
      if (item > 0){
        var requestObj = {
          question_id: "<%[email protected]%>",
          user_id: "1",     
        }
        requestObj["item_id"]=item
        requestObj["x"]=x
        requestObj["y"]=y
            plot.series[0].data = [[50,50]];
            plot.replot();

BLAH BLAH BLAH...

<%=itemNames.html_safe%> typically looks like this: [{label:"Winona Ryder"},{label:"Paris Hilton"},{label:"Margaret Thatcher"},{label:"Snooki"},{label:"Natalie Portman"},]

The chart draws fine when the page loads; when I click on the chart, nothing happens. I know the click is being caught; if I put an alert in there, I see it. Help!

• javascript
• jquery
• jqplot

Share Improve this question Follow asked Sep 8, 2012 at 1:27 MikeCMikeC 48066 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I suggest that you put your event handler in $(document).ready() as well -- sort of the corollary to what you posted.

By the main reason I wanted to respond was to note that since we're using jQuery why not "attach" it more directly to the jQuery element. To do this you would use:

$('placeholder').jqplot(data, options);

and now the plot bees:

$('placeholder').data('jqplot');

so you could replot this example with:

$('placeholder').data('jqplot').series[0].data = [[50,50]];    
$('placeholder').data('jqplot').replot();

OK, figured it out. I needed to declare the "plot" variable as a global variable outside of $(document).ready(function()... Now it's working!