flotr2 will not render with timestamp for bar charts only

I am using Flotr2 to render some graphs using DateTime. This has been working with line graphs fine, but I now need to render both line graphs and bar graphs on the cart. This should be easy and there is an example on the flotr2 site.

When I use int values, then everything works as desired. When I changed this to DateTime, it fails in that the line graph displays as desired but the bar graph does not display at all.

My Javascript below (with the commented out DateTime values)

function CreateRequiredChart(container)
{   
var bars = {
    data: [],
    bars: {
        show: true,
        barWidth: 0.03,
        lineWidth: 0,
        fillColor: {
            colors: ['#f00', '#f66'],
            start: 'top',
            end: 'bottom'
        },
        fillOpacity: 1
      }
    },
    lines = {
        data: [],
        lines: {
            show: true,
            fillColor: ['#900', '#EDC13E', '#4DD43B'],
            fill: true,
            fillOpacity: 1
        }
    };

    //The next lines displays the result which is desired (in that both line and bar graphs are shown). Comment these out and uncomment the next section to see the fault
    bars.data.push([1, 7]);
    lines.data.push([0, 4], [1, 9], [2, 5], [3, 3]);    

    /*The next 2 lines do not display as desired. The line graph works, the bar graph does not
    bars.data.push([new Date('01/01/2013 08:30:00'), 7]);       
    lines.data.push([new Date('01/01/2013 08:29:00'), 5], [new Date('01/01/2013 08:30:00'), 8], [new Date('01/01/2013 08:31:00'), 4]);
    */

    graph = Flotr.draw(container, [lines, bars], {
                  HtmlText: false,
                  yaxis: {
                      showLabels: true,
                      title: "Value"                
                  },
                  xaxis: {
                      mode: "time",
                      timeformat: "%H%M%S",
                      minorTickFreq: 1,
                      showLabels: true,
                      title: "Time from start of logging",
                      labelsAngle: 90
                    },
                  grid: {
                    verticalLines: true,
                    backgroundColor: ['#fff', '#ccc']
                  }
               });
           }

Am I doing something wrong, or is this a limitation of flotr2?

This is actually working as desired to a point. There are 2 faults here.

1 is was unable to get flotr2 to work with the datetime so I hacked a little. I converted everything into an int (long) using getTime. Flotr2 seems to like this and if they are appeased then all is good.

var dt = new Date('01/01/2013 08:29:00');
var dt2 = new Date('01/01/2013 08:30:00');
var dt3 = new Date('01/01/2013 08:31:00');
var x = dt.getTime();
var y = dt2.getTime();
var z = dt3.getTime();

bars.data.push([y, 8]);     
lines.data.push([x, 5], [y, 7], [z, 3]);

The other issue was the period of time was too much for the bar graph... so, the bar graph was "showing" but on such a small scale it was invisible to the eye. Changing to

barWidth: 2000

Full code

function CreateRequiredChart(container, title, dataForGraph, errorPoints)
    {   
    var bars = {
        data: [],
        bars: {
            show: true,
            order:1,
            //barWidth: 1000000,
              barWidth: 2000,
            lineWidth: 0,
            fillColor: {
                colors: ['#f00', '#f66'],
                start: 'top',
                end: 'bottom'
            },
            fillOpacity: 1
        }
    },
    lines = {
            data: [],
            lines: {
                show: true,
                fillColor: ['#900', '#EDC13E', '#4DD43B'],
                fill: true,
                fillOpacity: 1
            }
        };


    var dt = new Date('01/01/2013 08:29:00');
    var dt2 = new Date('01/01/2013 08:30:00');
    var dt3 = new Date('01/01/2013 08:31:00');
      var x = dt.getTime();
      var y = dt2.getTime();
      var z = dt3.getTime();




    bars.data.push([y, 8]);     
    lines.data.push([x, 5], [y, 7], [z, 3]);


//    Please note, you can't have 'HtmlText: true' and rotate the text! It is one or the other, hence why 'HtmlText: false'.   
    Flotr.draw(
    container, [lines, bars], {
       HtmlText: false,
       yaxis: {
                showLabels: true,
                title: "Value"              
            },
       xaxis: {
                mode: "time",
                showLabels: true,
                title: "Time from start of logging",
                labelsAngle: 90
            },
        grid: {
            verticalLines: true,
            backgroundColor: ['#fff', '#ccc']
            },
            series:{bars:{show:true}}
    });
}