highcharts, json data: line and column: II now with plugin draggable and next previows button

问题

I'm understanding perfectly this part, but now I have more and different doubts:

How to implement draggable plugin? via json or building first the whole chart and parsing then data?

Here is how I'm using this plugin with a blank page as result:

 $.getJSON("data.php", function(data) {
    var chart;
    $(document).ready(function() {


            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',

                    marginRight: 130,
                    marginBottom: 25

                },
                title: {
                    text: '<?php echo strftime("%A %d de %B del %Y"); ?><?php echo " Turno:" . $turno; ?>  ',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                  //  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },         
        credits: {
            text: 'powered by restaurax.com',
            href: 'http://www.restaurax.com'
        },          
        labels: {
                items: [{
                    html: 'PAX/TURNO',
                    style: {
                        left: '40px',
                        top: '8px',
                        color: 'black'
                    }
                }]
            },
        tooltip: {
            formatter: function() {
                return Math.round(this.y);
            }       
        },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },      
                plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },  
               series: data
            });



    });

    });

With the above code draggable works fine, but I need also to set this code:

{
type: 'spline',
name: 'Max Pax',
data: [],
draggableY: true,
dragMinY: 0,
dragMaxY: 200,  
cursor: 'ns-resize',
            point: {
        events: {

            drag: function(e) {
                // Returning false stops the drag and drops. Example:
                /*
                if (e.newY > 300) {
                    this.y = 300;
                    return false;
                }
                */
            $('#guardar').html(' <b> GUARDAR CAMBIOS </b>');

            $('#guardar').css({ "backgroundColor":"red", "color": "black"});

                $('#drag').html(
                    'Dragging <b>' + this.series.name + '</b>, <b>' +
                    this.category + '</b> to <b>' + 
                    Highcharts.numberFormat(e.newY, 2) + '</b>'
                );



            },
            drop: function() {
                $('#drop').html(
                    'In <b>' + this.series.name + '</b>, <b>' +
                    this.category + '</b> was set to <b>' + 
                    Highcharts.numberFormat(this.y, 2) + '</b>'
                );
            }

Should I set it up in json file? if not, where or how should I set up this pice of code?

Prev/next button:

Let's say previous part is finally working, then I need to be able to send to the php file a parameter to retrieve next or prev day and, of course, redraw the chart. It will look something like:

$('#next').click(function() {
$.getJSON("data.php$MYPARAMETER", function(data) {
    options.series[0].data = data;
    var chart = new Highcharts.Chart(options);
}

来源：https://stackoverflow.com/questions/21234760/highcharts-json-data-line-and-column-ii-now-with-plugin-draggable-and-next-pr