I have a page with four quadrants. Each quadrant has a flot chart representing data from a saved report. Clicking on a chart takes the user to a dashboard area where one can see a larger version of that flot chart, tabular data, and UI controls to change settings. All of this worked.
Last week I upgraded to flot 0.8.3. Suddenly the charts in the page with the quadrants are all missing their tick labels. Everything else is working fine: the chart graphs the data correctly and when you click on the chart to see the report in the dashboard, the larger flot chart works perfectly, including the tick labels.
In both charts, the chart data is identical:
[
{
"color":"#1592ab",
"groupData":[
{
"type":"product",
"label":"8M MAX",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"677",
"splitLabel":"8M MAX"
}
],
"label":"8M MAX (1 units)",
"hoverable":true,
"data":[
[
1401494400000,
34.932668,
"1",
"2",
"",
""
],
[
1401580800000,
37.06447464,
"1",
"6",
"",
""
],
[
1401667200000,
37.21810664,
"1",
"6",
"",
""
],
[
1401753600000,
32.85324,
"1",
"1",
"",
""
]
]
},
{
"color":"#871010",
"groupData":[
{
"type":"product",
"label":"8M WBC",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"676",
"splitLabel":"8M WBC"
}
],
"label":"8M WBC (1 units)",
"hoverable":true,
"data":[
[
1401408000000,
35.485664,
"1",
"1",
"",
""
],
[
1401494400000,
34.92812,
"1",
"2",
"",
""
],
[
1401580800000,
37.436968,
"1",
"1",
"",
""
]
]
},
{
"color":"#21632f",
"groupData":[
{
"type":"product",
"label":"24M WBC",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"675",
"splitLabel":"24M WBC"
}
],
"label":"24M WBC (1 units)",
"hoverable":true,
"data":[
[
1401408000000,
36.67866,
"1",
"2",
"",
""
],
[
1401494400000,
33.975452,
"1",
"2",
"",
""
],
[
1401580800000,
36.545028,
"1",
"2",
"",
""
],
[
1401667200000,
37.554504,
"1",
"1",
"",
""
]
]
},
{
"color":"#cf8c19",
"groupData":[
{
"type":"product",
"label":"80M 20M FTTCWBC",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"678",
"splitLabel":"80M 20M FTTCWBC"
}
],
"label":"80M 20M FTTCWBC (1 units)",
"hoverable":true,
"data":[
[
1401408000000,
36.147816,
"1",
"1",
"",
""
],
[
1401494400000,
35.66955064,
"1",
"12",
"",
""
],
[
1401580800000,
37.06554,
"1",
"6",
"",
""
],
[
1401667200000,
36.92269864,
"1",
"6",
"",
""
],
[
1401753600000,
34.992038,
"1",
"4",
"",
""
]
]
},
{
"color":"#634b4b",
"groupData":[
{
"type":"product",
"label":"--Unassigned--",
"splitTypeLegend":"Product"
}
],
"splitGroups":[
{
"splitType":"product",
"splitIdentifier":"0",
"splitLabel":"--Unassigned--"
}
],
"label":"--Unassigned-- (1 units)",
"hoverable":true,
"data":[
[
1401580800000,
37.508096,
"1",
"1",
"",
""
],
[
1401753600000,
33.2178,
"1",
"1",
"",
""
]
]
}
]
The options are very similar, the only difference is that interactions with the flot chart are turned off in the quadrant view.
Here are the chart options for the quadrant view:
{
"grid":{
"margin":{
"top":10,
"bottom":10,
"right":0,
"left":25
},
"markings":false
},
"legend":{
"labelBoxBorderColor":"#666666",
"noColumns":3,
"show":true,
"container":"#report0legend"
},
"series":{
"bars":{
"show":false
},
"lines":{
"show":true
},
"points":{
"radius":1.5,
"show":true
},
"shadowSize":0
},
"xaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"dayNames":[
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"monthNames":[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
],
"timezone":"utc",
"axisLabel":null,
"labelAngle":-45,
"mode":"time",
"tickFormatter":null,
"tickSize":null,
"minTickSize":[
1,
"day"
],
"timeformat":"%d %b %Y"
},
"yaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"autoscaleMargin":0.01,
"axisLabel":"HTTP MT Downstream (Mbps)",
"min":0,
"tickFormatter":null
},
"metricName":"HTTP MT Downstream",
"metricUnit":"Mbps",
"mode":"time"
}
And for the dashboard view:
{
"crosshair":{
"color":"#1592ab",
"mode":null
},
"grid":{
"hoverable":true,
"margin":{
"top":20,
"left":40,
"bottom":20,
"right":20
},
"markings":false,
"clickable":true,
"mouseActiveRadius":10
},
"legend":{
"noColumns":3,
"show":true,
"container":"#graph-legend",
"labelBoxBorderColor":"#666666"
},
"selection":{
"mode":"xy"
},
"series":{
"bars":{
"show":false
},
"lines":{
"show":true
},
"points":{
"show":true
},
"shadowSize":0
},
"xaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"dayNames":[
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"monthNames":[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
],
"timezone":"utc",
"axisLabel":"Day",
"labelAngle":-45,
"mode":"time",
"tickFormatter":null,
"tickSize":null,
"minTickSize":[
1,
"day"
],
"timeformat":"%d %b %Y"
},
"yaxis":{
"axisLabelFontFamily":"Arial",
"axisLabelFontSizePixels":12,
"font":{
"size":12,
"family":"Arial",
"color":"#333"
},
"axisLabel":"HTTP MT Downstream (Mbps)",
"autoscaleMargin":0.01,
"min":0,
"tickFormatter":null,
"ticks":20
},
"metricName":"HTTP MT Downstream",
"metricUnit":"Mbps",
"mode":"time"
}
I added a console.log(axis) inside drawAxisLabels() on line 2184 of jquery.flot.js and all the labels are being added correctly to the array of ticks. They simply aren't rendering on the chart.
Any thoughts? (If you need further code, please ask. I believe I've included the relevant bits, but if more is needed I can supply it.)
Edit: I have created a simplified version of my page on jsfiddle.
tickSizeandtickformatterarenull. Try changing these (the default is notnull, see the documentation). – RaidritickSizeandtickFormatterare null in both versions, yet the tick labels render in the dashboard view. Even if I eliminate all custom options, the ticks don't render in the quadrant view. I am wondering if this is some strange flot bug. – Derek Henderson