I will try to answer my own question after some several tries and researches about these 2 visualization libraries, here are my own list of pros for each solution : Flot Pros jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot … Read more
Since charting involves heavy DOM manipulation, directives are the way to go. Data can be kept in the Controller App.controller(‘Ctrl’, function($scope) { $scope.data = [[[0, 1], [1, 5], [2, 2]]]; }); And you can create a custom HTML tag1 specifying the model you want to get data from <chart ng-model=”data”></chart> which angular can compile through … Read more
Here is how I added the feature, including a pleasant animation effect: var p = $.plot(…); $.each(p.getData()[0].data, function(i, el){ var o = p.pointOffset({x: el[0], y: el[1]}); $(‘<div class=”data-point-label”>’ + el[1] + ‘</div>’).css( { position: ‘absolute’, left: o.left + 4, top: o.top – 43, display: ‘none’ }).appendTo(p.getPlaceholder()).fadeIn(‘slow’); }); You can move the position and display css … Read more
What kind of linear regression? For something simple like least squares, I’d just program it myself: http://mathworld.wolfram.com/LeastSquaresFitting.html The math is not too hard to follow there, give it a shot for an hour or so and let me know if it’s too hard, I can try it. EDIT: Found someone that did it: http://dracoblue.net/dev/linear-least-squares-in-javascript/159/
There are none built-in to flot. Your best bet is to do it yourself via positioned divs, but if you are adventurous, you can look at the issue (Or the original issue) and see how other people have dealt with it. Specifically, there are two people who have recently made label-related revisions to flot: https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js … Read more
@Matt is close, but it would make more sense to just use the ticks option to directly specify what ticks should have what labels: var options = { … xaxis: { ticks: [[0,’Bob’],[1,’Chris’],[2,’Joe’]] } … }; EDIT: it looks like this (I added more data than labels, but you get the idea).
You can use HTML5 Fullscreen API for this (which is the most suitable way i think). The fullscreen has to be triggered via a user event (click, keypress) otherwise it won’t work. Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode. $(‘#toggle_fullscreen’).on(‘click’, … Read more