Lucas_Santos Lucas_Santos - 1 month ago 6
jQuery Question

Jquery Flot chart with months in X axis

I have the code bellow to draw a chart. I want show in the X axis the month/year but, when I run the application, it shows me just the first month. How can I show anothers month ?

var data1 = [
[0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
];
var data2 = [
[0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
];
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data1, data2
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 0,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxis: {
mode: "time",
minTickSize: [1, "day"],
timeformat: "%b/%y"
},
yaxis: {
ticks: 4
},
tooltip: true
}
);


Rendered Chart

enter image description here

If I remove all the options from
xaxis
(i.e.
xaxis: { },
), in the rendered chart some points appears on the X axis.

Rendered Chart without options on xaxis

enter image description here

Answer

Do either:

xaxis: {ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]] }

or try adding

axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10

Read more here