HighCharts : Multiple Charts resulting in multiple export button - javascript
This is my first time using High Charts library, great stuff.
Anyway, i am facing a strange problem that i don't understand the reason behind it or how to solve it.
When i display one chart in my page everything is good as soon as i add more charts in the same page the added charts have two export buttons.
here is my JS code :
$(function() {
Highcharts.setOptions({
colors : [ '#e74c3c', '#66b354', '#DDDF00', '#24CBE5',
'#64E572', '#FF9655', '#FFF263', '#6AF9C4' ]
});
/* Pie Chart */
$('#pie-chart-1')
.highcharts(
{
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : '#{msg['DB_graph_title1']}'
},
tooltip : {
pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
format : '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series : [ {
type : 'pie',
name : 'Etat',
data : [
//'#{msg['DB_graph_ND']}'
[ '#{msg['DB_graph_ND']}',
#{homeSupBean.nonDemarre} ],
[ '#{msg['DB_graph_CL']}',
#{homeSupBean.complete} ],
[ '#{msg['DB_graph_EC']}',
#{homeSupBean.enCours} ], ]
} ]
});
});
$(function() {
Highcharts.setOptions({
colors : [ '#95ceff', '#66b354', '#DDDF00', '#24CBE5',
'#64E572', '#FF9655', '#FFF263', '#6AF9C4' ]
});
$('#container-1')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '#{msg['DB_graph_title2']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '#{msg['DB_graph_lib']} (%)'
}
},
legend : {
enabled : false
},
tooltip : {
pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
},
series : [ {
name : '#{msg['DB_graph_lib']}',
data : [
<ui:repeat value="#{homeSupBean.profils}" var="prfl">[
'#{prfl.profileName}',
#{homeSupBean.profilProg[prfl.id.toString()]}],
</ui:repeat> ],
dataLabels : {
enabled : true,
rotation : -90,
color : '#FFFFFF',
align : 'right',
format : '{point.y:.1f}', // one decimal
y : 10, // 10 pixels down from the top
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
});
$(function() {
try {
Highcharts.setOptions({
colors : [ '#95ceff', '#66b354', '#DDDF00',
'#24CBE5', '#64E572', '#FF9655', '#FFF263',
'#6AF9C4' ]
});
$('#container-2')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '#{msg['DB_graph_title3']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '#{msg['DB_graph_lib']} (%)'
}
},
legend : {
enabled : false
},
tooltip : {
pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
},
series : [ {
name : '#{msg['DB_graph_lib']}',
data : [
<ui:repeat value="#{homeSupBean.campagnes}" var="camp">[
'#{camp.name}',
#{homeSupBean.campagneProg[camp.id.toString()]}],
</ui:repeat> ],
dataLabels : {
enabled : true,
rotation : -90,
color : '#FFFFFF',
align : 'right',
format : '{point.y:.1f}', // one decimal
y : 10, // 10 pixels down from the top
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
} catch (e) {
alert(e.message);
}
});
$(function() {
try {
Highcharts.setOptions({
colors : [ '#95ceff', '#66b354', '#DDDF00',
'#24CBE5', '#64E572', '#FF9655', '#FFF263',
'#6AF9C4' ]
});
$('#container-3')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '#{msg['DB_graph_title4']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '#{msg['DB_graph_lib']} (%)'
}
},
legend : {
enabled : false
},
tooltip : {
pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
},
series : [ {
name : '#{msg['DB_graph_lib']}',
data : [
<ui:repeat value="#{homeSupBean.sectionsHC}" var="sect">[
'#{sect.name}',
#{homeSupBean.sectionProg[sect.id.toString()]}],
</ui:repeat> ],
dataLabels : {
enabled : true,
rotation : -90,
color : '#FFFFFF',
align : 'right',
format : '{point.y:.1f}', // one decimal
y : 10, // 10 pixels down from the top
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
} catch (e) {
alert(e.message);
}
});
I tried this :
exporting : {
buttons : {
contextButtons : {
enabled : false,
menuItems : null
}
},
enabled : true
},
but without success :(, if anybody can help please don't hesitate, thanks.
Related
Uncaught TypeError: Cannot read property 'hidden' of undefined(Chart.js)
I'm trying to draw a lineChart and the Errormessage, Uncaught TypeError: Cannot read property 'hidden' of undefined, occurs and I really don't know what am I missing. Make canvas with id,'chart' get the 'JsonObject' from DB using controller (In the JsonObject, I put the chart type, 'line', and also put the JsonArray, the data) move the data from JsonArray to Array using function 'getArray' to remove the index set the chart configuration and make a chart. function makeChart(year,month,name){ var chart = $('#chart'); // var valueArray = new Array(); $.ajax({ dataType : 'json', url : '/individual/makeChart', data : { 'year': year, 'month': month, 'name' : name }, async : false, success : function(json) { valueArray = getArray(json); var config = { type : json.type, data : { datasets : [{ borderColor : "#3e95cd", data : ['1','2','3','4','5','6','7','8','9','10','11','12'], label : 'region' }, { borderColor : "#c45850", data : ['1','2','3','4','5','6','7','8','9','10','11','12'], label : 'country' }], }, options:{ showLines:true, legend:{ display:true, labels:{ fontSize:15, fontColor:"#000000", fontStyle:"bold" } }, responsive : true, scales : { yAxes : [{ ticks : { beginAtZero : true, fontSize : 15, fontColor : "#000000", fontStyle : "bold" } }], xAxes : [{ ticks : { fontSize : 15, fontColor : "#000000", fontStyle : "bold" } }] } } } new Chart(chart,config); // the problem occurs here! } }); } function getArray(json){ var a = new Array(); a = json.Data[0]; return a; }
HighChart Stacked chart overlapping smaller data size
I'm using Jugal's workspace editor, http://jsfiddle.net/jugal/bgNBG/ In JS section I applied my own JS and facing one issue. Large amount of data will overlapped whole data points. Can anyone help in that ? var chartingOptions = { chart : { type : "bar", renderTo : 'container', inverted : true }, title : { text : "Bunny Chart" }, xAxis : { title : { text : "" }, type : "category", categories : ["DIP", "C", "Can", "Sch", "DC"] }, yAxis : { title : { text : "" }, min : 0.0, max : 503.0 }, column : { stacking : "normal" }, legend : { enabled : true, align : "center", floating : false, itemMarginBottom : 0, itemMarginTop : 0, layout : "horizontal", lineHeight : 0, verticalAlign : "bottom", x : 0, y : 0 }, credits : { enabled : false }, plotOptions : { area : {}, bar : {}, pie : { dataLabels : {} }, series : { cursor : 'pointer', // stacking : 'normal', point : { events : { click : {} } } }, column: { grouping: false, shadow: false } }, series : [{ data : [{ y : 74.0, name : "A", color : "#CCFF90", ddlRecordIds : [243496, 243496, 243501, 243501, 243506, 243506], }, { y : 2.0, name : "A", color : "#CCFF90", ddlRecordIds : [243641, 243641, 243676, 243676] } ], name : "A", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#CCFF90" }, { data : [{ y : 28.0, name : "B", color : "#FFFF90", ddlRecordIds : [243881, 243881, 243886, 243886] }, { y : 3.0, name : "B", color : "#FFFF90", ddlRecordIds : [243926, 243926, 243961, 243961, 243981, 243981] } ], name : "B", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#FFFF90" }, { data : [{ y : 25.0, name : "C", color : "#FFCCFF", ddlRecordIds : [244726, 244726, 244731, 244731] } ], name : "C", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#FFCCFF" }, { data : [{ y : 62.0, name : "E", color : "#CC6699", ddlRecordIds : [244036, 244036, 244041, 244041] }, { y : 2.0, name : "E", color : "#CC6699", ddlRecordIds : [244211, 244211, 244296, 244296] } ], name : "E", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#CC6699" }, { data : [{ y : 8.0, name : "F", color : "#FF3300", ddlRecordIds : [244851, 244851, 244856, 244856] } ], name : "F", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#FF3300" }, { data : [{ y : 174.0, name : "G", color : "#6666CC", ddlRecordIds : [244891, 244891, 244896, 244896] } ], name : "G", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#6666CC" }, { data : [{ y : 85.0, name : "H", color : "#666666", ddlRecordIds : [245761, 245761, 245766, 245766] } ], name : "H", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#666666" }, { data : [{ y : 161.0, name : "I", color : "#669999", ddlRecordIds : [234731, 234731, 234751, 234751] }, { y : 503.0, name : "I", color : "#669999", ddlRecordIds : [234736, 234736, 234741, 234741] }, { y : 355.0, name : "I", color : "#669999", ddlRecordIds : [234771, 234771, 234776, 234776] }, { y : 35.0, name : "I", color : "#669999", ddlRecordIds : [234936, 234936, 235186, 235186] } ], name : "I", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#669999" }, { data : [{ y : 232.0, name : "J", color : "#009999", ddlRecordIds : [237406, 237406, 237411, 237411] }, { y : 20.0, name : "J", color : "#009999", ddlRecordIds : [237466, 237466, 237471, 237471] } ], name : "J", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#009999" }, { data : [{ y : 61.0, name : "K", color : "#CCFF99", ddlRecordIds : [244416, 244416, 244421, 244421] }, { y : 1.0, name : "K", color : "#CCFF99", ddlRecordIds : [244441, 244441] } ], name : "K", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#CCFF99" }, { data : [{ y : 460.0, name : "L", color : "#FFFF99", ddlRecordIds : [241196, 241196, 241201, 241201] } ], name : "L", grouping : false, pointPadding: 0.1, dataLabels : { enabled : true }, color : "#FFFF99" } ], dataGrouping : { groupPixelWidth : 40 } }; chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions); var chart = new Highcharts.Chart(chartingOptions);
HIghcharts Rendered Label - Padding not working for on the right side of label, rectangle created by getBBox() overlaps the text
I am creating labels in highcharts using render function. It gets displayed properly in the web page but when I export it to PDF file, the label outer boundary which I create using the getBBox method overlaps the text as shown in attached image. screenshot of pdf Please find below the code I am using - $('#chartContainer0') .highcharts( { credits : false, colors : highColors, chart : { type : 'bar', height : 500, events : { load : function() { var label = this.renderer .label( "* applicable after CN review<br/>" + "** applicable after baseline results are available <br/>" + "*** applicable after final results are available") .css({ color : '#222', fontSize : '10px' }).attr({ 'stroke' : 'silver', 'stroke-width' : 1, 'r' : 5, 'padding' : 10 }).add(); label.align(Highcharts.extend(label .getBBox(), { align : 'left', x : 0, // offset verticalAlign : 'bottom', y : (60) // offset }), null, 'spacingBox'); var roundingNote = this.renderer.text('The sum of percentages may not be equal to 100% due to rounding off.', 10, (this.chartHeight-5)) .css({ color: '#808080', fontSize: '12px' }).add(); } }, spacingBottom: 80, spacingRight: 50 }, title : { text : titleLbl }, subtitle : { text : subTtlLbl }, xAxis : { categories : keys, labels : { align : 'right', style : { textOverflow : 'none', fontSize : '13px' } } }, yAxis : { title : { text : null }, min : 0, gridLineWidth : 0, reversedStacks : false, allowDecimals : false, tickInterval : 10 }, legend : { enabled : false, }, tooltip : { headerFormat : '<b>{point.x}</b><br/>', pointFormat : '{series.name}: {point.y}' }, plotOptions : { bar : { dataLabels : { crop : false, overflow : 'none', enabled : true, color : 'black', style : { fontSize : '12px' }, formatter : function() { var index = productTypeList .indexOf(this.x); var yesNum = yesList[index]; var noNum = noList[index]; var percentage = (yesNum / (yesNum + noNum)) * 100; return this.y + ' (' + Highcharts.numberFormat( percentage, 0) + '%)'; // return this.y; }, style : { fontWeight : null } } }, series : { pointWidth : 18, grouping : false, groupPadding : 2, } }, series : [ { colorByPoint : true, name : 'Yes', data : yesList } ], exporting : { enabled : false, filename : filename, sourceWidth : 1000, sourceHeight : 600 } });
Highcharts stacked bar chart - parse JSON to form series
I am learning to create a stacked bar/column chart using highcharts. The json data i have from a pojo class has three properties- date, status and count. On a given day i could have no records for a particular status or more than one record too. This is how JSON looks: [{"dateV":"2015-11-16","status":"A","count":10},{"dateV":"2015-11-16","status":"B","count":15},{"dateV":"2015-11-15","status":"A","count":5},{"dateV":"2015-11-14","status":"A","count":10},{"dateV":"2015-11-14","status":"B","count":10},{"dateV":"2015-11-14","status":"C","count":10}] This data is in an arraylist right now. Date is the key here.X axis on the graph would have the date. Y axis should show all the status values stacked. I am able to create the graph but it is completely wrong and i think i know why. I am not grouping the data properly. I have created multiple series - 1 for category, and 1 each for different status values. Considering this is how i am populating the chart, how should i create the category and data series? var categData = []; var statusACountData = []; var statusBCountData = []; $.getJSON(url, function(response) { $.each(response, function(i, item) { var dateVal=response[i].dateV; var statusVal=response[i].status; var countVal=response[i].count; console.log(dateVal+"-"+statusVal+"-"+countVal); ******LOGIC TO CREATE SERIES***** }); $('#chartDiv').highcharts({ chart : { type : 'column' }, title : { useHTML: true, text : '<h3>StackedChart</h3>' }, xAxis : { categories : categData , crosshair : true }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Count' }, stackLabels: { enabled: true, style: { fontWeight: 'bold' } } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true } } }, series : [ { name : 'A', data : statusACountData },{ name: 'B', data : statusBCountData //This may increase.Lets consider i have only two status values. } ] }); });
CODEPEN: http://codepen.io/anon/pen/MKreQE Your problem is filtering and mapping, here something that you can improve on to get you started: var filterMap = function (arr, status) { return arr.filter(function(a) { return a.status === status; }).map(function(a) { return [status, a.count]; }) }; $.getJSON(url, function(response) { $('#chartDiv').highcharts({ chart : { type : 'column' }, title : { useHTML: true, text : '<h3>StackedChart</h3>' }, xAxis : { categories : categData , crosshair : true }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Count' }, stackLabels: { enabled: true, style: { fontWeight: 'bold' } } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true } } }, series : [ { name : 'A', data : filterMap(response, 'A') },{ name: 'B', data : filterMap(response, 'B') } ] }); }); This should be the required result.
Try the example below, where xAxis has dateValue and yAxis has countVal and statusVal. Don't forget to link to your jsonfile (in my case I use jsonfile.json): var dateVal=[]; var statusVal=[]; var countVal=[]; $.getJSON("jsonfile.json", function(response) { $.each(response, function(i, item) { dateVal[i]=response[i].dateV; statusVal[i]=response[i].status; countVal[i]=response[i].count; console.log(dateVal+"-"+statusVal+"-"+countVal); }); $('#chartDiv').highcharts({ chart : { type : 'column' }, title : { useHTML: true, text : '<h3>StackedChart</h3>' }, xAxis : { categories : dateVal , crosshair : true }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Count' }, stackLabels: { enabled: true, style: { fontWeight: 'bold' } } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true } } }, series : [ { name : 'A', //data : statusACountData data:statusVal, },{ name: 'B', //data : statusBCountData //This may increase.Lets consider i have only two status values. data: countVal, } ] }); });
Highchart not displaying data at some zoom levels
Here is a fiddle: http://jsfiddle.net/8jMfa/6/ Can someone explain this behavior to me? I've been wrestling with it all day. It seems to render at some zoom levels but not others. Could it be because the time series is irregular at some points? var parsedData = {}; parsedData.Highcharts = {}; parsedData.Highcharts.series= [{"name":"Wind Direction","data":[[1325397600000,90],[1325419200000,90],[1325440800000],[1325484000000],[1325505600000,290],[1325527200000,290],[1325570400000,70],[1325592000000,90],[1325613600000,50],[1325656800000,270],[1325678400000,260],[1325700000000,270],[1325743200000],[1325764800000,270],[1325786400000,270],[1325829600000,300],[1325851200000,280],[1325872800000,280],[1325916000000,0],[1325937600000,300],[1325959200000,330],[1326002400000,30],[1326024000000,0],[1326045600000,0],[1326088800000,300],[1326110400000,300],[1326132000000,270],[1326175200000,260],[1326196800000,220],[1326218400000,0],[1326261600000,300],[1326283200000,270],[1326304800000,230],[1326348000000,250],[1326369600000,250],[1326391200000,270],[1326434400000,250],[1326456000000,270],[1326477600000,260],[1326520800000,300],[1326542400000,300],[1326564000000,300],[1326607200000,270],[1326628800000,270],[1326650400000,280],[1326693600000,290],[1326715200000,300],[1326736800000,280],[1326780000000,280],[1326801600000,280],[1326823200000,300],[1326866400000,300],[1326888000000,300],[1326909600000,270],[1326952800000,220],[1326974400000,90],[1326996000000,300],[1327039200000,300],[1327060800000,270],[1327082400000,0],[1327125600000,280],[1327147200000,300],[1327168800000,260],[1327212000000,300],[1327233600000,250],[1327255200000,0],[1327298400000,20],[1327320000000,20],[1327341600000,360],[1327384800000,0],[1327406400000,360],[1327428000000,360],[1327471200000,50],[1327492800000,0],[1327514400000,50],[1327557600000,120],[1327579200000,100],[1327600800000],[1327644000000,90],[1327665600000,90],[1327687200000,100],[1327730400000,30],[1327752000000,360],[1327773600000,360],[1327838400000,30],[1327860000000,30],[1327903200000,30],[1327924800000,30],[1327946400000,40],[1327989600000,320],[1328011200000,30],[1328032800000,270],[1328076000000],[1328097600000,90],[1328119200000,270],[1328162400000,270],[1328184000000,270],[1328205600000],[1328248800000,320],[1328270400000,320],[1328292000000,270],[1328335200000,280],[1328356800000,280],[1328378400000,270],[1328421600000,270],[1328443200000,70],[1328464800000,90],[1328508000000,130],[1328529600000,340],[1328551200000,0],[1328594400000,300],[1328616000000,300],[1328637600000,290],[1328680800000],[1328702400000],[1328724000000,300],[1328767200000,100],[1328788800000,50],[1328810400000,0],[1328853600000,0],[1328875200000,250],[1328896800000,0],[1328940000000,270],[1328961600000,90],[1328983200000],[1329026400000,100],[1329048000000,70],[1329069600000],[1329112800000,300],[1329134400000,300],[1329156000000,280],[1329199200000,300],[1329220800000],[1329242400000,30],[1329285600000,270],[1329307200000,270],[1329328800000],[1329372000000],[1329393600000],[1329415200000,260],[1329458400000,290],[1329480000000,260],[1329501600000,300],[1329544800000,90],[1329566400000,150],[1329588000000,250],[1329631200000,0],[1329652800000,290],[1329674400000,290],[1329717600000],[1329739200000],[1329760800000,220],[1329804000000,270],[1329825600000,270],[1329847200000,280],[1329890400000,220],[1329912000000,210],[1329933600000,180],[1329976800000,270],[1329998400000,270],[1330020000000,250],[1330063200000,230],[1330106400000,280],[1330149600000,270],[1330171200000,270],[1330192800000],[1330236000000,270],[1330257600000,270],[1330279200000,270],[1330322400000,300],[1330344000000,250],[1330365600000,270],[1330408800000],[1330430400000],[1330452000000,100],[1330495200000,280],[1330516800000,300],[1330538400000,280],[1330581600000,270],[1330603200000,270],[1330624800000,250],[1330668000000,270],[1330689600000,180],[1330711200000,310],[1330754400000,180],[1330776000000,270],[1330797600000],[1330840800000,270],[1330862400000,270],[1330884000000,270],[1330927200000,360],[1330948800000,100],[1330970400000,90],[1331013600000,90],[1331035200000,90],[1331056800000,100],[1331100000000,120],[1331121600000,120],[1331143200000,90],[1331186400000,300],[1331208000000,300],[1331229600000,250],[1331272800000,240],[1331294400000],[1331316000000,270],[1331359200000,320],[1331380800000,230],[1331402400000,260],[1331467200000,260],[1331488800000,270],[1331532000000,270],[1331553600000,270],[1331575200000,270],[1331618400000,300],[1331640000000,270],[1331661600000,270],[1331704800000,270],[1331726400000,270],[1331748000000,60],[1331791200000,250],[1331812800000,260],[1331834400000,270],[1331877600000,280],[1331899200000,280],[1331920800000,260],[1331964000000,240],[1331985600000,250],[1332007200000,260],[1332050400000,270],[1332072000000,260],[1332093600000,270],[1332136800000,270],[1332158400000,240],[1332180000000,250],[1332223200000,250],[1332244800000,250],[1332266400000,270],[1332309600000,250],[1332331200000,260],[1332352800000,0],[1332396000000,280],[1332417600000,230],[1332439200000,270],[1332482400000,290],[1332504000000,270],[1332525600000,280],[1332568800000,280],[1332590400000,90],[1332612000000,260],[1332676800000,280],[1332698400000,310],[1332741600000,290],[1332763200000,270],[1332784800000,270],[1332828000000,50],[1332849600000,290],[1332871200000,270],[1332914400000,270],[1332936000000,300],[1332957600000],[1333000800000,0],[1333022400000,270],[1333044000000,270],[1333087200000,270],[1333108800000,270],[1333130400000,300],[1333173600000,270],[1333195200000,300],[1333216800000,300],[1333260000000,290],[1333281600000,290],[1333303200000,300],[1333346400000,300],[1333368000000,300],[1333389600000,290],[1333432800000,260],[1333454400000,330],[1333476000000,130],[1333519200000,270],[1333540800000,260],[1333562400000,220],[1333605600000,280],[1333627200000,250],[1333648800000,260],[1333692000000,300],[1333713600000,100],[1333735200000,70],[1333778400000,0],[1333800000000,270],[1333821600000,260],[1333864800000,300],[1333886400000,180],[1333908000000,240],[1333951200000,120],[1333972800000,300],[1333994400000,130],[1334037600000,90],[1334059200000,120],[1334080800000,150],[1334124000000,120],[1334145600000,120],[1334167200000,190],[1334210400000,120],[1334232000000,100],[1334253600000],[1334296800000,90],[1334318400000,50],[1334340000000,0],[1334383200000,90],[1334404800000,150],[1334426400000,120],[1334469600000,240],[1334491200000,250],[1334512800000,260],[1334556000000,270],[1334577600000,270],[1334599200000,260],[1334642400000,300],[1334664000000,300],[1334685600000,180],[1334728800000,60],[1334750400000,60],[1334772000000,90],[1334815200000,70],[1334836800000,70],[1334858400000,60],[1334901600000,70],[1334923200000,40],[1334944800000,30],[1334988000000,70],[1335009600000,90],[1335031200000,90],[1335096000000,20],[1335117600000,20],[1335160800000,0],[1335182400000,0],[1335204000000,100],[1335247200000,360],[1335268800000,120],[1335290400000,90],[1335333600000,330],[1335355200000,90],[1335376800000,90],[1335420000000,270],[1335441600000,280],[1335463200000,220],[1335506400000,120],[1335528000000,180],[1335549600000,260],[1335592800000,270],[1335614400000,270],[1335636000000,10],[1335679200000,280],[1335700800000,70],[1335722400000,50],[1335765600000,80],[1335787200000,90],[1335808800000],[1335852000000,280],[1335873600000,80],[1335895200000,120],[1335938400000,100],[1335960000000,100],[1335981600000,120],[1336024800000,300],[1336046400000,300],[1336068000000,0],[1336111200000,120],[1336132800000,120],[1336154400000,270],[1336197600000,270],[1336219200000,90],[1336240800000,80],[1336284000000,80],[1336305600000,90],[1336370400000,300],[1336392000000,290],[1336456800000,300],[1336478400000,120],[1336500000000],[1336564800000,90],[1336586400000,120],[1336651200000,240],[1336672800000,250],[1336716000000,250],[1336737600000,250],[1336759200000,260],[1336802400000,270],[1336824000000,290],[1336845600000,280],[1336888800000,300],[1336910400000,200],[1336932000000,250],[1336975200000,170],[1336996800000,250],[1337018400000,180],[1337061600000,210],[1337083200000,140],[1337104800000,270],[1337148000000,360],[1337169600000,150],[1337191200000,300],[1337234400000,240],[1337256000000,250],[1337277600000,250],[1337320800000],[1337364000000,150],[1337407200000,120],[1337428800000,150],[1337450400000,120],[1337493600000,100],[1337515200000,80],[1337536800000,150],[1337580000000,260],[1337601600000,20],[1337623200000,40],[1337666400000,270],[1337688000000,60],[1337709600000,90],[1337752800000,70],[1337774400000,90],[1337796000000,110],[1337839200000,270],[1337860800000,270],[1337882400000,0],[1337925600000,280],[1337947200000,110],[1337968800000,0],[1338012000000,230],[1338033600000,150],[1338055200000,150],[1338098400000,100],[1338120000000,200],[1338141600000,200],[1338184800000,300],[1338206400000,260],[1338228000000,90],[1338271200000,90],[1338292800000,60],[1338314400000,220],[1338357600000,60],[1338379200000,100],[1338400800000,360],[1338444000000,300],[1338465600000,340],[1338487200000,240],[1338530400000,90],[1338552000000,180],[1338573600000,270],[1338616800000,300],[1338638400000,90],[1338660000000,90],[1338724800000,250],[1338746400000,250],[1338789600000,260],[1338811200000,90],[1338832800000,30],[1338876000000,90],[1338897600000,90],[1338919200000,240],[1338962400000,300],[1338984000000,240],[1339005600000,200],[1339048800000,0],[1339070400000,150],[1339092000000,150],[1339135200000,0],[1339156800000,90],[1339178400000,270],[1339221600000,90],[1339243200000,300],[1339264800000,270],[1339308000000,60],[1339329600000,30],[1339351200000,120],[1339394400000,0],[1339416000000,30],[1339437600000,90],[1339480800000,30],[1339502400000,270],[1339524000000,90],[1339567200000,0],[1339588800000,120],[1339610400000,160],[1339653600000,330],[1339675200000,250],[1339696800000,270],[1339740000000,20],[1339761600000,70],[1339783200000,300],[1339826400000,0],[1339848000000,300],[1339869600000,300],[1339912800000,300],[1339934400000,330],[1339956000000,360],[1339999200000,200],[1340020800000,170],[1340042400000,250],[1340085600000,250],[1340107200000,260],[1340128800000,270],[1340172000000,300],[1340193600000,200],[1340215200000,120],[1340258400000,0],[1340280000000,140],[1340301600000,80],[1340344800000,100],[1340366400000,90],[1340388000000,110],[1340431200000,90],[1340474400000,120],[1340517600000,150],[1340539200000,120],[1340560800000,90],[1340604000000,280],[1340625600000,270],[1340647200000,250],[1340690400000,310],[1340712000000,280],[1340733600000,270],[1340776800000,270],[1340798400000,280],[1340820000000,90],[1340884800000,80],[1340906400000,300],[1340949600000,270],[1340971200000,280],[1340992800000,220],[1341036000000,100],[1341057600000,240],[1341079200000,180],[1341122400000,180],[1341144000000,130],[1341165600000,240],[1341208800000,0],[1341230400000,210],[1341252000000,60],[1341295200000,0],[1341316800000,110],[1341338400000,140],[1341381600000,0],[1341403200000,90],[1341424800000,130],[1341468000000,130],[1341489600000,120],[1341511200000,120],[1341554400000,90],[1341576000000,90],[1341597600000,60],[1341640800000,180],[1341662400000,180],[1341684000000,180],[1341727200000,0],[1341748800000,0],[1341770400000,0],[1341813600000,270],[1341835200000,90],[1341856800000,90],[1341900000000,90],[1341921600000,90],[1341943200000,90],[1341986400000,240],[1342008000000,180],[1342029600000,300],[1342072800000,300],[1342094400000,300],[1342116000000,0],[1342159200000,270],[1342180800000,250],[1342202400000,230],[1342245600000,270],[1342267200000,120],[1342288800000,260],[1342332000000,0],[1342353600000,270],[1342375200000,260],[1342418400000],[1342440000000,230],[1342461600000,260],[1342504800000,270],[1342526400000,270],[1342548000000,250],[1342591200000,90],[1342612800000,270],[1342634400000,120],[1342677600000,0],[1342699200000,0],[1342720800000,270],[1342764000000,240],[1342785600000,90],[1342807200000,100],[1342850400000,30],[1342872000000,130],[1342893600000,270],[1342936800000,300],[1342958400000,200],[1342980000000,170],[1343023200000,260],[1343044800000,180],[1343066400000,290],[1343109600000,250],[1343131200000,200],[1343152800000,230],[1343196000000,210],[1343217600000,230],[1343239200000,30],[1343282400000,270],[1343304000000,280],[1343325600000,120],[1343368800000,240],[1343390400000,90],[1343412000000,100],[1343455200000,0],[1343476800000,70],[1343498400000,0],[1343541600000,200],[1343563200000,100],[1343584800000,100],[1343628000000,280],[1343649600000,180],[1343671200000,120],[1343714400000,120],[1343736000000,150],[1343757600000,300],[1343800800000,270],[1343822400000,260],[1343844000000,140],[1343908800000,120],[1343930400000,90],[1343973600000,180],[1343995200000,260],[1344016800000,240],[1344060000000,280],[1344081600000,240],[1344103200000,180],[1344146400000,270],[1344168000000,210],[1344189600000,240],[1344232800000,230],[1344254400000,360],[1344276000000,90],[1344319200000,210],[1344340800000,270],[1344362400000,250],[1344405600000,270],[1344427200000,90],[1344448800000,50]],"yAxis":0,"color":"#80699B","visible":true,"dataGrouping":{"enabled":false}}]; parsedData.Highcharts.yAxis = [{"title":{"text":"Wind Direction"},"lineWidth":1,"lineColor":"#80699B","tickWidth":1,"offset":25,"opposite":false,"allowDecimals":false,"showEmpty":false,"labels":{"style":{"color":"#80699B"}}}]; var chart; $(document).ready(function() { chart = new Highcharts.StockChart({ chart : { spacingRight : 0, spacingBottom : 3, spacingLeft : 0, //reflow : true, renderTo : 'container', type : 'line', //shadow : true, //alignTicks : false, //turboThreshold: 30000, //plotBackgroundImage: 'http://www.dawnbreaker.com/forums/navy09/images/gradient_bg.png', //marginLeft:50, //zoomType: 'x', //marginRight : 50, //marginBottom : 25, //marginTop : 50, //marginBottom : 75, minPadding : .5, //height : 360, //width : 1000, events : { // load : Highcharts.drawTable }, style : { fontFamily : 'serif', fontSize : 10 } }, navigator : { series : { color : '#2B5C8A' } }, rangeSelector : { inputEnabled : false, buttonTheme : {// styles for the buttons fill : 'none', stroke : 'none', style : { color : '#1F3243', fontWeight : 'bold' }, states : { hover : { stroke : '#262F2F' }, select : { style : { color : 'white' } } } }, buttons : [{ type : 'day', count : 3, text : '3d' }, { type : 'week', count : 1, text : '1w' }, { type : 'month', count : 1, text : '1m' }, { type : 'month', count : 6, text : '6m' }, { type : 'year', count : 1, text : '1y' }, { type : 'all', text : 'All' }], selected : 4 }, xAxis : { type : 'datetime', //ordinal: false, dateTimeLabelFormats : { //second : '%b %e', // minute : '%b %e, %l%P', hour : '%b %e, %l%P', /* day : '%b %e, %Y', week : '%b %e, %Y', month : '%b %Y', */ year : '%Y' }, title : { text : null }, labels : { style : { color : '#eee', fontSize : 9 } }, lineColor : '#eee', tickColor : '#eee', //tickPixelInterval : 150 }, legend : { enabled : true, //floating:true, layout : 'horizontal', align : 'center', //y:25, //x:50, backgroundColor : 'grey', shadow : true, verticalAlign : 'top', borderColor : '#eee', padding : 10, borderWidth : 2, itemMarginTop : 3, itemMarginBottom : 3, itemStyle : { cursor : 'pointer', color : '#eee', lineHeight : '14px' }, itemHoverStyle : { color : '#333' }, }, column : { borderColor : "#eee", borderRadius : 1, shadow : false }, plotOptions : { series: { //dataGrouping:false, connectNulls : true, //cropThreshold: 3000, animation:false }, line:{ //dataGrouping:false, //connectNulls : true, animation:false }, //compare: document.getElementsByName('comparison')[0].value, /*function() { // return (document.getElementsByName('comparison')[0].value); // },*/ animation : { duration : 2000, easing : 'swing' } }, series : parsedData.Highcharts.series, yAxis : parsedData.Highcharts.yAxis }) });
I figured it out. The issue was that some dates had no Y-values associated with them. After I filtered those out (server-side) the problem was fixed.