Flot.js bar and line not move

Question

I am quite new to flot.js. I try to plot my own graph with one bar and one line in the same graph. X-axis is month (Jan to Dec), y 1 on the left is bar graph show data, y 2 on the right is a line graph.

This is my code, i try several times, check with existing tutorial but cannot make it plot correctly.

Can someone point me out, thank you very much.

    <style type="text/css">
    #flotcontainer {
        width: 600px;
        height: 200px;
        text-align: center;
        margin: 0 auto;
    }
    </style>


    <!-- Javascript -->
    <script type="text/javascript">


     var 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"]
    ];

     var s3 = [[1, 6.8], [2, 11.9], [3, 20.9], [4, 24], [5, 31], 
            [6, 38], [7, 43], [8, 51], [9, 57.3], [10, 62.2], [11, 64.7], [12, 70.8]];
     var s4 = [[1, 6.8], [2, 5.1], [3, 9], [4, 3.1], [5, 6], 
            [6, 7], [7, 5], [8, 8], [9, 6.3], [10, 4.9], [11, 2.5], [12, 6.1]];

    $(function () {        
        $.plot($("#flotcontainer"),
            [
                {
                  data: s3,
                  label: "Page View",
                    bars: {
                    show: true,
                    barWidth: 12*24*60*60*1000,
                    fill: true,
                    lineWidth: 1
                },

                },
                {
                  data: s4,
                  label: "Online User",
                  points: { show: true },
                  lines: { show: false},
                  yaxis: 2
                }
            ],
            {            
                grid: {
                    backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
                },
                xaxis: {
                    ticks: ticks,
                                tickSize: [1, "month"],
                axisLabel: "Months",
                },
                yaxes: [
                    {
                        /* First y axis */
                        position: "right"
                    },
                    {
                        /* Second y axis */
                        position: "left"  /* left or right */
                    }
                ]      
            }
        );
    });
    </script>

    <!-- HTML -->
    <div id="flotcontainer"></div>

Answer 1

Just change your barwidth to 1 or a smaller similar value (see this fiddle for the example):

    bars: {
        show: true,
        barWidth: 1, //12 * 24 * 60 * 60 * 1000,
        fill: true,
        lineWidth: 1
    },

Your bars were so wide they squeezed all data on the left side of the chart. The width you use would be right if you used time mode (and changed your data accordingly).

Here is a second version of the fiddle with the bars center-aligned and the line graph you wrote about (you originally had only a point graph without lines).