Jqplot - click a point to remove it from database

70 views Asked by At

I have an example of jqplot with working onclick event on the buttons (JqPlot add click event on data points).

My goal is this: click on a point to get it's database id. Then I plan to run ajax in order to delete it from db. Problems: how to put id into graph (without changing it's looks), and then get this id via point onClick on the graph.

<script class="code" type="text/javascript">

//START - GRAPH ITSELF
    $(document).ready(function () {
        var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
      ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
      ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
        var plot1 = $.jqplot('chart1', [line1], {
            title: 'Does not really matter :) ',
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                yaxis: {
                    tickOptions: {
                        formatString: '€%.2f'
                    }
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 9.5
            },
            cursor: {
                show: false
            }
        });
//END - GRAPH    


    
//START - CLICK ON THE POINT EVENT

        $('#chart1').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) {                
                //if I could get point ID here I would run some ajax
            }
        );
//END

    });

</script>
1

There are 1 answers

0
baron_bartek On

Got an idea. It is workaround, but works just fine:

var array_with_id_from_database = [1,4,7,9]; //order of id's the same as on graph... obviously

$('#chart').bind('jqplotDataClick',
    function (ev, seriesIndex, pointIndex, data) {                
        alert(array_with_id_from_database[pointIndex]);
//and when you have id you can ajax it from database, reload chart, and so on
    }
);

Proud of myself :P