Author Topic: pqGrid Angularjs and Flot integration  (Read 2949 times)

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
pqGrid Angularjs and Flot integration
« on: December 01, 2016, 04:05:02 am »
My Angular controller looks like this (only a snippet)
Code: [Select]
$scope.ajaxData = [];
 $scope.fetchData = function() {
  $http.get("/getdata").success(function(data) {
$scope.ajaxData = data;
});
}
.
.
.

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

scope.$watch('ajaxData', function(dataset){
                                         // Draw Flot chart
                        }
                }
}
.
.
$scope.gridOptions = getPQGrid();


My other javascript looks like:
Code: [Select]
function getPQGrid() {
var pqGridObj = {
        width: "80%",
        height: 800,
        resizable: true,
        title: "Angularjs grid",       
        scrollModel: { autoFit: true },
        dataModel: { data: 'ajaxData' },
colModel : getColumnModel()
    };

return pqGridObj;
}

function getColumnModel() {
var cols = [
    { title: "Instance", width: 100, dataType: "String", dataIndx: "inst" },

{ title: "Trend", width: 150, template: "<chart  ng-model='ajaxData' type='line'><div class="mychart" style='width:170px;height:35px'></div></chart>' "
}

];
return cols;
}


I get the table populated but charts are not coming. If I use simple table (without pqgrid) charts are coming. So, I am guessing I am missing something.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #1 on: December 01, 2016, 09:48:18 pm »
[ Only Pro members may read this post. ]

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #2 on: December 01, 2016, 10:59:05 pm »
Can you set this up for the run of http://paramquery.com/pro/demos/ng_grid

I tried but it is showing some module error. If you help me setting up this jsfiddle I will update it with my code.

http://jsfiddle.net/abwh7Lkx/1/

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #3 on: December 02, 2016, 12:53:26 pm »
[ Only Pro members may read this post. ]

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #4 on: December 02, 2016, 09:31:49 pm »
http://jsfiddle.net/0g0psuo7/3/

You would see the following code. It's getting correct data. So, chart is correctly populated and elem is also correct. But Trend column is empty.

   
Code: [Select]
var chart = jQuery.plot(jQuery('#achart_'+id),
[evseries],
options
);

elem.show();

« Last Edit: December 02, 2016, 09:35:56 pm by dagarwal »

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #5 on: December 02, 2016, 10:43:31 pm »
A more simple approach http://jsfiddle.net/0g0psuo7/5/

Looks like the issue is I am unable to plot on pqgrid. See how I can plot on #test but not on #achart_1

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #6 on: December 03, 2016, 06:31:31 pm »
[ Only Pro members may read this post. ]

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #7 on: December 07, 2016, 01:09:48 am »
Thank you so much. Could you please provide the pro version of 3.3.4

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: pqGrid Angularjs and Flot integration
« Reply #8 on: December 07, 2016, 08:17:38 am »
Thank you so much. Could you please provide the pro version of 3.3.4

I don't see Pro Downloads under my menu bar. Probably because my account is not associated with my enterprise acccount. Can you tell me what should I do in order to see the Pro Downloads
« Last Edit: December 07, 2016, 08:25:05 am by dagarwal »