CODEWITHSUNDEEP
jqueryangularjsflot
sculptnz
sculptnz

Reputation: 3

Flot bar chart with AngularJS: bars not lining up with ticks

I'm using AngularJS and Flot to plot a bar chart:

See jsFiddle: http://jsfiddle.net/juliejones/DwMwJ/3/

The directive:

App.directive('barChart', function(){
return{
    restrict: 'E',
    link: function(scope, elem, attrs){

        var weekday=new Array();
        weekday[0]="Su";
        weekday[1]="Mo";
        weekday[2]="Tu";
        weekday[3]="We";
        weekday[4]="Th";
        weekday[5]="Fr";
        weekday[6]="Sa";

        var options = {
            bars: {
                show: true,
                barWidth: 1000 * 60 * 60 * 24 * 0.7,
                align: 'center'
            },
            colors: ["#F90"],
            xaxis: {
                mode: 'time',
                tickSize: [1, 'day'],
                minTickSize: [1, 'day'],
                tickFormatter: function (val, axis) {
                    var d = new Date(val);
                    return weekday[d.getUTCDay()] + '<br />' + d.getUTCDate();
                }
            },
            yaxis: {
                minTickSize: 1,
                tickDecimals: 0,
                min: 0
            }
        };
        var chart = null;

        scope.$watch(attrs.ngModel, function(v){
            if(!chart){
                chart = $.plot(elem, v , options);
                elem.show();
            }else{
                chart.setData(v);
                chart.setupGrid();
                chart.draw();
            }
        });
    }
};
});

The data (identical except for the value of the first item):

var data1 = [[
    [1364774400000, ], 
    [1365206400000, 5], 
    [1365292800000, 2],
    [1365379200000, 2]
   ]];

var data2 = [[
    [1364774400000, 0], 
    [1365206400000, 5], 
    [1365292800000, 2],
    [1365379200000, 2]
   ]];

The chart looks great as long as the first data point has a null value. The 3 bars are centered perfectly on their ticks. See the jsFiddle.

Click the 'Change data' button to load the second set of data which has a zero value in the first data point. The three bars move so they are no longer centered and are now nowhere near where they should be on the x axis.

Why are the bars not centered over the correct ticks when using the second set of data? And how can I correct this?

Edit: This works perfectly for me when AngularJS is not involved. See jsFiddle: http://jsfiddle.net/juliejones/fC3zs/1/

Thanks in advance!

Upvotes: 0

Views: 1727

Answers (3)

SveinT
SveinT

Reputation: 703

I think your problem might be related to this: flot chart in angular.js directive has zero dimensions

Using the 'E' on directive gives wrong size information to flot, use 'A' instead.

Upvotes: 0

sculptnz
sculptnz

Reputation: 3

I've solved my own question...

In the directive I changed:

return weekday[d.getUTCDay()] + '<br />' + d.getUTCDate();

to:

return weekday[d.getDay()] + '<br />' + d.getDate();

and (under 'bars') removed:

align: 'center'

Now when changing from one data set to another, the x axis label stay in place.

Upvotes: 0

tinker
tinker

Reputation: 1406

You can use the alignTicksWithAxis: 1, directive in the xaxis. This will align your values with your bars.

Here is a working fiddle: http://jsfiddle.net/u8csX/

Added some more data points to second data set just to verify that it indeed aligns. If you want more space for labels then you can modify the labelWidth / labelHeight property. I've done that too in the fiddle which makes your yaxis more visible.

Also the API is very helpful: http://flot.googlecode.com/svn/trunk/API.txt

Upvotes: 1

Related Questions