javascript - Highcharts doesn't display bars properly -
my highchart doesn't display bars scattered if have different values. what's going wrong?
my json data:
[ { "name":"finwts_main -1", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":1431160907000, "to":1431160955000, "label":"completed", "color":"#63ca00" } ] }, { "name":"finwts_main -2", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":1431160966000, "to":1431160984000, "label":"completed", "color":"#63ca00" } ] }, { "name":"finwts_main -3", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":1431160994000, "to":1431161314000, "label":"completed", "color":"#63ca00" } ] }, { "name":"impr_main -prod", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":1431161334000, "to":1431171728000, "label":"completed", "color":"#63ca00" } ] }, { "name":"taxupdt_th -p", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431174835000, "to":1431175557000, "label":"completed", "color":"#63ca00" } ] }, { "name":"sp_basic_entities_driver -prod", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431177337000, "to":1431177818000, "label":"completed", "color":"#63ca00" } ] }, { "name":"basic_main -hybr", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431177830000, "to":1431178155000, "label":"completed", "color":"#63ca00" } ] }, { "name":"basic_main -supr", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431178163000, "to":1431178341000, "label":"completed", "color":"#63ca00" } ] }, { "name":"basic_main -cescpi", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431178348000, "to":1431178484000, "label":"completed", "color":"#63ca00" } ] }, { "name":"agg_main -hybr", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431180464000, "to":1431181001000, "label":"completed", "color":"#63ca00" } ] }, { "name":"agg_main -cescpi", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431181008000, "to":1431181247000, "label":"completed", "color":"#63ca00" } ] }, { "name":"supr_agg_main -supr", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431182033000, "to":1431183111000, "label":"completed", "color":"#63ca00" } ] }, { "name":"msa_main -prod", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431181253000, "to":1431182027000, "label":"completed", "color":"#63ca00" } ] }, { "name":"sp_est_pop_mars_indx ", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" pm", "ed_time_am_pm":" pm", "intervals":[ { "from":1431183115000, "to":1431183135000, "label":"completed", "color":"#63ca00" } ] }, { "name":"cellrelpr_main -pricing", "st_date":"04/9/2015", "ed_date":"", "st_time_am_pm":" pm", "ed_time_am_pm":"", "intervals":[ { "from":1431184142000, "to":1431184142000, "label":"<b>**processing**</b>", "color":"#00bfff" } ] }, { "name":"avgpr_main -f", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":107, "to":108, "label":" ", "color":"#999999" } ] }, { "name":"avgpr_main -u", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":107, "to":108, "label":" ", "color":"#999999" } ] }, { "name":"avgpr_main -m", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":107, "to":108, "label":" ", "color":"#999999" } ] }, { "name":"compstat_main -prod", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":107, "to":108, "label":" ", "color":"#999999" } ] }, { "name":"sp_est_pop_mars_calc - ", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":107, "to":108, "label":" ", "color":"#999999" } ] }, { "name":"sp_est_pop_effect_dissem - ", "st_date":"04/9/2015", "ed_date":"04/9/2015", "st_time_am_pm":" am", "ed_time_am_pm":" am", "intervals":[ { "from":107, "to":108, "label":" ", "color":"#999999" } ] } ] demonstration below:
$(function() { //split time record yaxsis var timeforchartandgrid = ''; function timsesubstringforxaxis(timechart) { var res = timechart; // var dateres = timechart.substring(0, 10); var timearray = res.split(':'); var hours = timearray[0]; var minutes = timearray[1]; var secnds = timearray[2]; if (hours == 12) { hours = 12; } else if (hours > 12) { hours = '0' + hours % 12; } else { hours = hours; } timeforchartandgrid = hours + ':' + minutes + ':' + secnds; return timeforchartandgrid; } //,{"name" :"avgpr_main -f","st_date" :"10/1/2014","ed_date" :"10/1/2014","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 53865000,"to": 54006000,"label": "completed","color" : "#63ca00"}]} var arraylist = '[{"name" :"finwts_main -1","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431160907000,"to": 1431160955000,"label": "completed","color" : "#63ca00"}]},{"name" :"finwts_main -2","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431160966000,"to": 1431160984000,"label": "completed","color" : "#63ca00"}]},{"name" :"finwts_main -3","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431160994000,"to": 1431161314000,"label": "completed","color" : "#63ca00"}]},{"name" :"impr_main -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431161334000,"to": 1431171728000,"label": "completed","color" : "#63ca00"}]},{"name" :"taxupdt_th -p","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431174835000,"to": 1431175557000,"label": "completed","color" : "#63ca00"}]},{"name" :"sp_basic_entities_driver -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431177337000,"to": 1431177818000,"label": "completed","color" : "#63ca00"}]},{"name" :"basic_main -hybr","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431177830000,"to": 1431178155000,"label": "completed","color" : "#63ca00"}]},{"name" :"basic_main -supr","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431178163000,"to": 1431178341000,"label": "completed","color" : "#63ca00"}]},{"name" :"basic_main -cescpi","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431178348000,"to": 1431178484000,"label": "completed","color" : "#63ca00"}]},{"name" :"agg_main -hybr","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431180464000,"to": 1431181001000,"label": "completed","color" : "#63ca00"}]},{"name" :"agg_main -cescpi","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431181008000,"to": 1431181247000,"label": "completed","color" : "#63ca00"}]},{"name" :"supr_agg_main -supr","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431182033000,"to": 1431183111000,"label": "completed","color" : "#63ca00"}]},{"name" :"msa_main -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431181253000,"to": 1431182027000,"label": "completed","color" : "#63ca00"}]},{"name" :"sp_est_pop_mars_indx ","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431183115000,"to": 1431183135000,"label": "completed","color" : "#63ca00"}]},{"name" :"cellrelpr_main -pricing","st_date" :"04/9/2015","ed_date" :"","st_time_am_pm" :" pm","ed_time_am_pm" :"","intervals": [{ "from": 1431184142000,"to": 1431184142000,"label": "<b>**processing**</b>","color" : "#00bfff"}]},{"name" :"avgpr_main -f","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"avgpr_main -u","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"avgpr_main -m","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"compstat_main -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"sp_est_pop_mars_calc - ","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"sp_est_pop_effect_dissem - ","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]}]'; var tasks = jquery.parsejson(arraylist); var series = []; var categories = []; //alert(tasks[i].st_time_am_pm); $.each(tasks.reverse(), function(i, task) { var item = { name: task.name, data: [] }; $.each(task.intervals, function(j, interval) { item.data.push({ x: interval.from, y: i, label: interval.label, color: interval.color, from: interval.from, to: interval.to }, { x: interval.to, y: i, from: interval.from, to: interval.to }); // add null value between intervals if (task.intervals[j + 1]) { item.data.push( [(interval.to + task.intervals[j + 1].from) / 2, null]); } }); series.push(item); }); //try catch block 2 // // restructure milestones // $.each(milestones, function (i, milestone) { // var item = highcharts.extend(milestone, { // data: [[ // milestone.time, // milestone.task // ]], // type: 'scatter' // }); // series.push(item); // }); // create chart var chart = new highcharts.chart({ chart: { renderto: 'container' }, title: { //message_for_expected_finish_time }, subtitle: { }, credits: { enabled: false }, xaxis: { type: 'datetime', //type: 'timepicker', tickinterval: 1000 * 60 * 60 * 12, labels: { style: { color: '#525151', font: '14px arial', fontweight: 'bold' }, formatter: function() { var mycharttime = highcharts.dateformat('%h:%m:%p', this.value); return timsesubstringforxaxis(mycharttime); } }, maxpadding: 0.2, //min: start_chart_scale_dt, // max: end_chart_scale_dt, // mintickinterval:200 title: { // text: displaymonthxaxiestitle, align: 'low' } }, yaxis: { tickinterval: 1, labels: { style: { color: '#525151', font: '14px arial', fontweight: 'bold' }, formatter: function() { if (tasks[this.value]) { return tasks[this.value].name; } } }, startontick: false, endontick: false, title: { text: 'job task names' }, maxpadding: 0.1 }, legend: { enabled: false }, txooltip: { crosshairs: [false, true], formatter: function() { //if label undefined //if (isnan(this.point.options.label)) { // return ; //}; // if (this.series.data[0].label == "not started") { // return '<b>job name: </b>' + tasks[this.y].name + '<br/>' + // '<b>job status: </b>' + this.point.options.label + '<br/>'; // }; //tool tip processing job if (this.series.data[0].label == "not started") { return '<b>job name: </b>' + tasks[this.y].name + '<br/>' + '<b>job status: </b>' + this.series.data[0].label + '<br/>'; }; if (this.series.data[0].label == "<b>**processing**</b>") { return '<b>job name: </b>' + tasks[this.y].name + '<br/>' + '<b>job status: </b>' + this.series.data[0].label + '<br/>'; }; //tool tip completed job if (this.series.data[0].label == "completed") { var testgridst = highcharts.dateformat('%h:%m', this.point.options.from) + ' ' + tasks[this.y].st_time_am_pm; var testgrided = highcharts.dateformat('%h:%m', this.point.options.to) + ' ' + tasks[this.y].ed_time_am_pm;; return '<b>job name: </b>' + tasks[this.y].name + '<br/>' + '<b>job status: </b>' + this.series.data[0].label + '<br/>' + '<b>job start time: </b>' + testgridst + '<br/>' + '<b>job end time: </b>' + testgrided; // +' ' + tasks[this.y].ed_time_am_pm; }; } }, plotoptions: { line: { turbothreshold: 6000000, linewidth: 8, //color: jb_selected_color, marker: { enabled: false }, datalabels: { enabled: true, align: 'left', borderradius: 5, backgroundcolor: 'rgba(252, 255, 197, 0.7)', borderwidth: 1, bordercolor: '#aaa', y: -6, formatter: function() { return this.point.options && this.point.options.label; } } } }, exporting: { enabled: false }, series: series, animation: { duration: 6000 } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//code.highcharts.com/highcharts.js"></script> <script src="//code.highcharts.com/highcharts-more.js"></script> <script src="//code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>here jsfiddle.