HighChart Stacked chart overlapping smaller data size - javascript
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);
Related
appcelerator : webview to show graph using HighCharts
I am developing an application which sends data to a webview and it uses highcharts to draw graph . The problem I am facing is I am using same graph to display different data series , so when I am calling the graph for 10th time , it firsts shows the y axis labels of all the previous 9 graphs , then the graph is loaded with labels of 10th graph . Any help .
<html>
<head>
<script src="./jquery.min.jsl"></script>
<script src="./highcharts.jsl"></script>
<script src="./exporting.jsl"></script>
<meta name="viewport" content="user-scalable=no">
<script>
function renderGraph(graphdata) {
var graphObj = JSON.parse(graphdata);
var chart = null;
Highcharts.setOptions({
lang : {
numericSymbols : ["K", "M", "G", "T", "P", "E"]
}
});
var change = {
0 : '$0K',
2 : '$2K',
4 : '$4K',
6 : '$6K',
8 : '$8K'
};
var xAxisLegends = graphObj.bottomLegends;
var seriesData = graphObj.seriesData;
var xAxisLegends = graphObj.bottomLegends;
//['Q2, 16', 'Q3, 16', 'Q4, 16', 'Q1, 17'];
var columnColors = ["#69C3DB", "#3a8a9f"];
var seriesData = graphObj.seriesData;
/*[{
name : 'Budget',
showInLegend : false,
data : [2, 4, 6, 8]
}, {
name : 'Utilisation',
showInLegend : false,
data : [1, 2, 3, 4]
}];*/
// variables which have diff values according to OS
var chartProperties = {};
// properties to assign to Charts's object
var graphHeight = 0;
// height of chart
var graphWidth = 0;
//Width of the column
var pointWidth;
// Separating the graph dimensions & styling properties as per OS name & version
if (graphObj.osname == "iphone") {
chartProperties = {
type : 'column',
renderTo : 'container'
};
xAxisProp = {
gridLineWidth : 0,
categories : xAxisLegends,
crosshair : true
};
yAxisProp = {
min : 0,
gridLineWidth : 0,
tickAmount : 5,
title : {
text : ' '
},
labels : {
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + value;
}
}
};
pointWidth = 5;
} else if (graphObj.osname == "android") {
chartProperties = {
type : 'column',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false,
height : 450,
marginTop : 100,
marginLeft : 120
},
xAxisProp = {
categories : xAxisLegends,
width : 800,
tickmarkPlacement : 'on',
labels : {
y : 40,
style : {
color : '#333333',
fontSize : '25',
fontFamily : 'Metropolis-Light',
opacity : '.6'
},
}
};
yAxisProp = {
gridLineWidth : 0,
min : 0,
tickAmount : 5,
offset : 60,
title : {
text : ''
},
labels : {
align : 'left',
style : {
color : '#333333',
fontSize : '28',
fontFamily : 'Metropolis-Light',
opacity : '.5'
},
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + value;
}
},
};
pointWidth = 10;
if (parseInt(graphObj.osversion) >= 500 && parseInt(graphObj.osversion) <= 600) {
graphHeight = 600;
} else {
graphHeight = 630;
}
}
chart =
Highcharts.chart('container', {
chart : chartProperties,
credits : {
enabled : false
},
tooltip : {
enabled : false
},
exporting : {
enabled : false
},
title : {
text : ''
},
xAxis : xAxisProp,
yAxis : yAxisProp,
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0,
groupPadding : 0.38,
pointWidth : pointWidth
}
},
colors : columnColors,
series : seriesData
});
}
</script>
</head>
<body>
<div id="container" style="height: 100%; width: 100%; position : center;"></div>
</body>
Here is the function inside the controller which calls the graph using evalJS.
$.webViewPerformanceGraph.url = "/html/Performance.html";
$.webViewPerformanceGraph.addEventListener('load', function() {
$.webViewPerformanceGraph.evalJS("renderGraph('" + JSON.stringify(params) + "');");
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 : Multiple Charts resulting in multiple export button
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.
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
}