Develop Reference

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
}
});

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.

I had follow someone code samples and try apply to my HighChart program but I can't get it work at all

I had follow someone code samples, but I'm new to javascript and highcharts. In fact
this program worked but only shows one month at a time, I want show all the months' data. Sorry for my English. Could you give me some advice thanks.
$(document).ready(function () {
var options = {
chart : {
renderTo : 'container',
defaultSeriesType : 'column',
rightMargin : 80
},
title : {
text : 'the scholls'
},
subtitle : {
text : 'data for 2012 years'
},
xAxis : {
title : 'months',
categories : []
},
yAxis : [{
min : 0,
title : {
text : 'students'
}
}, {
linkedTo : 0,
opposite : true
}
],
tooltip : {
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + 'Months: ' + this.y + ' students:';
}
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
series : [{
name : "students total",
data : []
}
]
};
//get the json files
$.getJSON('http://localhost:3000/students/givemechart.json', function (data) {
yData = options.series[0].data; //Array to store data for y column
xData = options.xAxis.categories; //Array to store data for x column
xDataObj = data[3]; //only can show one months
yDataObj = data[3]; //only can show one totals
// [[5, 2], [6, 3], [8, 2]]
for (var key in xDataObj) {
xData.push((xDataObj[key].month));
console.dir(xData); //chrome console only
}
for (var key in yDataObj) {
yData.push((yDataObj[key].total));
console.dir(yData); //chrome console only
}
var chart = new Highcharts.Chart(options);
});
});
This is one of my json files.
[
{
"student" : {
"month" : 1,
"total" : 24
}
}, {
"student" : {
"month" : 2,
"total" : 27
}
}, {
"student" : {
"month" : 10,
"total" : 96
}
}, {
"student" : {
"month" : 11,
"total" : 1088
}
}, {
"student" : {
"month" : 12,
"total" : 125
}
}
]

Set Min and Max for Xaxis like this :
xAxis : {
title : 'months',
categories : [],
min: 1,
max: 12
}