ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: dagarwal on December 01, 2016, 04:05:02 am

Title: pqGrid Angularjs and Flot integration
Post by: dagarwal 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.

Title: Re: pqGrid Angularjs and Flot integration
Post by: paramvir on December 01, 2016, 09:48:18 pm

Can you share this via attachment or jsfiddle, so that I can check it on my end.

Title: Re: pqGrid Angularjs and Flot integration
Post by: dagarwal 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/

Title: Re: pqGrid Angularjs and Flot integration
Post by: paramvir on December 02, 2016, 12:53:26 pm

Please use this jsfiddle:

http://jsfiddle.net/0g0psuo7/1/

Title: Re: pqGrid Angularjs and Flot integration
Post by: dagarwal 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();

Title: Re: pqGrid Angularjs and Flot integration
Post by: dagarwal 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

Title: Re: pqGrid Angularjs and Flot integration
Post by: paramvir on December 03, 2016, 06:31:31 pm

Please use either virtualX: true or don't use the number column. The reason being that in non-virtual mode, grid creates 2 tables, and flot is rendered in the hidden one.

http://jsfiddle.net/0g0psuo7/9/

Title: Re: pqGrid Angularjs and Flot integration
Post by: dagarwal on December 07, 2016, 01:09:48 am

Thank you so much. Could you please provide the pro version of 3.3.4

Title: Re: pqGrid Angularjs and Flot integration
Post by: dagarwal on December 07, 2016, 08:17:38 am

Quote from: dagarwal on December 07, 2016, 01:09:48 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