javascript - how do you create custom buttons with highcharts that each data buttons calls anather php script for its data -

i trying create custom selectors highcharts. based on buttons on top right clicked, need call different php file outputs different data sets. example, following script reads 1 file , zooms in/out based on 1 file data. have 6 different files, 1) 5 minute data 1 day 2) hourly data 1 month, 3) daily data 3 months 4) weekly data 6 months etc. based on buttons clicked on top left corner need issue soemthing this:

i trying create own buttons jsfiddle in each button need call external file graph chart: http://jsfiddle.net/yqnjm/4/

i have tried this:

    (function() {      var genoptions = function(data) {         return {             chart : {                 renderto : 'container'             },             rangeselector : {                 enabled:false             },             series : data         };     } $.getjson('db.php', function(data) {           var options = genoptions(data);         var chart = new highcharts.stockchart(options);         normalstate = new object();         normalstate.stroke_width = null;         normalstate.stroke = null;         normalstate.fill = null;         normalstate.padding = null;         normalstate.style = hash('text-decoration', 'underline');          hoverstate = new object();         hoverstate = normalstate;           pressedstate = new object();         pressedstate = normalstate;         chart_1dbutton = chart.renderer.button('1d', 52, 10, function() {         var date = date.now();         var date2 = new date();         date2.sethours(0);         date2.setminutes(0);         date2.setseconds(0);         date2.setmilliseconds(0);         chart.xaxis[0].setextremes(date2, date, true);                 $.ajaxsetup({ cache: false });                 $.getjson('db_cpu_1_day.php', function(data1) {                 options.series[0].setdata(data1);              });         unselectbuttons();         chart_1dbutton.setstate(2);         }, normalstate, hoverstate, pressedstate);          chart_1dbutton.add(); function unselectbuttons() {             chart_1dbutton.setstate(0); } }); }); 

in setextremes can check button selected code:

xaxis: {     events: {         setextremes: function(e) {             console.log(this);             if(typeof(e.rangeselectorbutton)!== 'undefined')             {               alert('count: '+e.rangeselectorbutton.count + 'text: ' +e.rangeselectorbutton.text + ' type:' + e.rangeselectorbutton.type);             }         }     } } 

you can render own buttons by:

normalstate = new object();         normalstate.stroke_width = null;         normalstate.stroke = null;         normalstate.fill = null;         normalstate.padding = null;         //normalstate.r = null;         normalstate.style = hash('text-decoration', 'underline');          hoverstate = new object();         hoverstate = normalstate;           pressedstate = new object();         pressedstate = normalstate;  chart_1mbutton = chart.renderer.button('1m', 96, 10, function() {         chart.xaxis[0].setextremes(1344527940000, 1346342400000, true);         unselectbuttons();         chart_1mbutton.setstate(2);     }, normalstate, hoverstate, pressedstate);      chart_1mbutton.add();   function unselectbuttons() {             chart_1mbutton.setstate(0); }