jquery - How to add Highcharts low and high data series using javascript -

i trying create graph represents schedule of our store using highcharts. that, use columnrange start , end time store open.

but i'm stuck on how can push data using array , json. here's want achieve. made mock-up hard coded data;

jsfiddle: http://jsfiddle.net/rds_a/lscqugbp/3/  code:     $(function () {      window.chart1 = new highcharts.chart({          chart: {             renderto: 'container1',             type: 'columnrange',             inverted: false         },          title: {             text: "store schedule"         },          xaxis: {             categories: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'yesterday','today']         },          yaxis: {             min: 0,             max: 24,             categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],             title: {                 text: 'time'             }         },          legend: {             enabled: true         },          plotoptions: {             columnrange: {                 grouping: false             }         },          series: [{             name: 'open',             stack: 'onsite',             color: 'orange',             data: [{                 x: 0,                 low: 7,                 high: 10             },{                 x: 0,                 low: 11,                 high: 16             },{                 x: 1,                 low: 6,                 high: 12             },{                 x: 1,                 low: 17,                 high: 21             }]         },             {             name: 'close',             stack: 'onsite',             color: 'black',             data: [                 {                 x: 0,                 low: 01,                 high: 07             },{                 x: 0,                 low: 10,                 high: 11             },                 ,{                 x: 0,                 low: 15,                 high: 24             },             {                 x: 1,                 low: 1,                 high: 7             },             {                 x: 1,                 low: 12,                 high: 17             },                  {                 x: 1,                 low: 21,                 high: 24             }]                  }]      });     }); 

while here's i'am have;

jsfiddle: http://jsfiddle.net/rds_a/9p5fc/485/  code:   $(function () {     var jdata = {         "open": {         "y": [4,8],         "name": "open",         "n": [0]         },         "closed": {         "y": [9,12],         "name": "closed",         "n": [1]         }     };      var seriesarr = [];     $.each(jdata, function (key, data) {         var series = {             name: key,             data: []         };          $.each(data.y, function (index, value) {             series.data.push({                 y: value             });         });          $.each(data.n, function (index, value) {             series.data[index].n = value;         });         seriesarr.push(series);     });      var options = {         chart: {             renderto: 'container',             type: 'column',             inverted: false         },         title: {             text: 'store schedule'         },         xaxis: {             categories: ['monday', 'tuesday']         },         yaxis: {             min: 0,             max: 24,             categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],             title: {                 text: 'time'             }         },          legend: {             enabled: true         },             plotoptions: {             columnrange: {                 stacking: 'percent'             }         },          series: seriesarr     };       var chart = new highcharts.chart(options);  }); 

thanks in advance can give inputs.