Search code examples
jqueryflot

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


Solution

  • Do either:

    xaxis: {ticks: [[1, Jan], [2, Feb], [3, Mar]} etc..

    or try adding

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

    Read more here