Values are setting on place in flot chart

Question

I am trying to plot a chart in my page.Am able to set the chart values properly.But the values are not setting. Because of this am getting space at the end .

var DataSet1 = [ 
                 [new Date("2014/03/03").getTime(), 0],
                [new Date("2014/03/10").getTime(), 16 ],
                [new Date("2014/03/17").getTime(), 32 ],
                [new Date("2014/03/24").getTime(), 189],
                [new Date("2014/03/31").getTime(), 250]         ];

    var DataSet2 = [ 
                 [new Date("2014/03/03").getTime(), 0],
                [new Date("2014/03/10").getTime(), 40],
                [new Date("2014/03/17").getTime(), 20 ],
                [new Date("2014/03/24").getTime(), 180],
                [new Date("2014/03/31").getTime(), 230] ];


        /* to find last 4 weeks mondays */

            var newDate = new Date();
            var day = newDate.getDay();
            var date = newDate.getDate();
            var xaxisArray = [];
            for(var i = 0;i<5;i++){if(i!=0){
                    var tempnewDate = new Date(setNewDate);
                    setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7));
                    xaxisArray.push(setNewDate);
                } else {
                    setNewDate =newDate.setDate(date-day+1);
                    xaxisArray.push(setNewDate);
                }               
            }

            $.plot($("#chart-revenue2"),[
                { data: DataSet1,label: "#FST",},
                { data: DataSet2, label: "SCND", 
                   points: { show: true },
                   lines: { show: true,fill: false},
                   yaxis: 2,color:"#C76C6B"} ] ,
                {
                  xaxis: 
                        {
                            mode: "time", 
                            min: xaxisArray[4],
                            max:xaxisArray[0],
                            timeformat: "%d/%m/%y",
                            ticks: xaxisArray.reverse(),
                            minTickSize :30
                        }
                    , yaxes: [
                            {   
                                 min:0, max: 400,  tickSize: 50 
                            },
                            {                   
                                position: "right",
                                min:0, max: 300,  tickSize: 50                              
                            }
                        ], 
                         series: {                        
                            lines: { 
                                show: true,
                                lineWidth: 3, 
                                fill: true
                           },
                           shadowSize: 0,
                       },
                        grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }},
                        colors: ["#294777"],
                        legend: { show: true, container: '#chart-revenue1-table' }

            });

Please check my fiddle..

Answer 1

The problem is how you are calculating the dates for your axis ticks. When you create newDate, it has hours, minutes and seconds, which are then included in each tick. Make sure they are all zero and it will all line up:

var newDate = new Date()
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);

There's probably a better way to do that, I just haven't looked it up :)

See it working here: http://jsfiddle.net/ryleyb/htsBz/1/

Answer 2

You've set the maximum on the xaxis beyond the last point you have data for. What did you expect it to do? It doesn't have data, so it leaves it blank. If you want your axis to fit, set it's max to max: new Date("2014/03/31").getTime(), or better yet, just don't set the max and let flot autoscale it for you.