I am trying to make my google chart interactive using angularjs. I am using this AngularJs Google Chart directive https://github.com/bouil/angular-google-chart
I tried several options to add Listener by going through some examples.
$scope.selectListener = google.visualization.events.addListener($scope.chart, 'select', function () {
$scope.$apply(function(){
var selectedItem = $scope.chart.getSelection()[0];
if (selectedItem) {
var topping = $scope.chart.data.getValue(selectedItem.row, 0);
alert('The user selected ' );
}
})
});
I am seeing these errors in my browser
Error: [$interpolate:interr] http://errors.angularjs.org/1.2.8/$interpolate/interr?p0=%24scope.chartObje…json%7D%7D&p1=TypeError%3A%20Converting%20circular%20structure%20to%20JSON
at Error (native)
Can someone please help me with an example how to make google chart interactive using angularjs?
Here is some more information which I would like to share:
chart1.type = "ColumnChart";
chart1.displayed = false;
var chdata = new google.visualization.DataTable();
chdata.addColumn('string', 'Task');
chdata.addColumn('number', 'Passed');
chdata.addColumn('number', 'Failed');
for( var i=0; i<queueDet.length; i++){
chdata.addRow([queueDet[i].rundate, {v: queueDet[i].passedTestCount, f: queueDet[i].buildTag}, {v: queueDet[i].failedTestCount}]);
}
In this column chart I would like to make those columns interactive and when I click Passed column, would like to make an $http call by passing queueDet[i].buildTag to get additional details and render them in a table.
Related
i try to get the the value of number row selected, and print it in HTML using Angularjs, but no issue,
i have the count only when i clic in the grid column header.
The value of " selectedRowsCounter " is 0 in html, when i dosn't clic in the grid header
my code is like
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
};
$scope.gridOptions = {
rowData: null,
angularCompileRows: true,
onSelectionChanged: activeButtons,
}
there is a screenshot
i have open the same subject here
https://github.com/ceolter/ag-grid/issues/1023
i have added this line to activeButtons function and it work fine
$scope.gridOptions.api.refreshView();
i dont knew if there is a good solution, but that work for now
The problem seems to be with Angular being unaware of the $scope property change because ag-grid does not tell Angular that it has modified something in the $scope. Although it is difficult to tell if you don't show your view.
You can use onSelectionChanged the way you are using it to know how many rows have been selected, but you need to tell Angular that something has changed in its $scope by applying it.
Something like this:
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
window.setTimeout(function() {
this.$scope.$apply();
});
};
That way you can apply the $scope and the html view will reflect the changes.
I'm trying to migrate old jQuery code to angularjs.
The issue that I'm having is that I'm not sure on the best approach.
Bascially, depending on the selector a different type of 'event' needs to be pushed into a array called gt.
The purpose of the jQuery code is to provide detailed info of clients having issues while filling in a form. the gt array is picked up by third party software that helps the clients by asking if they want to chat.
Example of how the array is populated:
$('a').live('click', { element: this }, function (element) {
_clickedElement = this;
var linkUrl = element.currentTarget.hostname + element.currentTarget.pathname;
var querystring = window.location.search
var shortLocationUrl = window.location.href.replace(querystring, "").replace("http://", "").replace("https://", "");
if (element.currentTarget.hostname.length > 0 && element.currentTarget.target != "_blank" && linkUrl != shortLocationUrl) { //click on a link that opens in the current window and points to a page external to this part
_gt.push(['event', { eventName: 'Leave_Page_' + chat.name, name: chat.name, pageName: chat.pageName, locale: _locale, isClient: chat.isClient }]);
_pushLeavePageEvent = false;
}
else if (this.id == backButtonId) { //click "previous"
_gt.push(['event', { eventName: 'Go_Back_' + chat.name, name: chat.name, pageName: chat.pageName, locale: _locale, isClient: chat.isClient }]);
_pushLeavePageEvent = false;
}
return true;
});
So for all the a tags inside my page (or form) the above code needs to be executed.
What would be a good approach to have similar behaviour in Angularjs?
I was thinking of a directive but I'm not sure whether to make this a directive at the level of my form or make a directive that I then use throughout my page?
P.S.: similar behaviour is needed (pushing an event into the gt array) for all the input, textarea and select fields on the page as well as the errors on the page caused by the clients and when a client hovers over a tooltip.
I am using the ui-chart directive for jqplot to show a line chart in my angularjs application. But the date xaxis is not showing. The chart data is from an api call. I am setting the chart data as below.
$scope.chartData = [];
angular.forEach(response, function (price, key) {
this.push([price.Sale_Date, price.Price]);
}, $scope.chartData);
The HTML for the chart
<div ui-chart="data" chart-options="chartOptions"></div>
However, when I set the values manually it works.
$scope.chartData = [[['2008-12-08 4:00PM', 4], ['2008-12-09 4:00PM', 6.5]]];
Any help is much appreciated.
Posting the solution in case its of use to anyone. The issue was a combination of the array & date format.
var prices = [];
angular.forEach(response, function (price, key) {
this.push([new Date(price.Sale_Date), price.Price]);
}, prices);
$scope.chartData = [prices];
I am trying to use angular-ui/ui-calendar( FullCalendar ) in my Angular Js app.
I have select box which lists some items, based on the selcted item, my event source url need to be updated. So in controller, I do update it, but the calendar is still not using the updated URL and also I need the calendar to refresh/Render, once the source is changed.
As per this link need to some remove and add event source.
I am new to both Jquery and Angular so I would appreciate if any one can explain how I can do it in angular js.
some bits of my controller where i set the url source , but I think it is not the right way to do , and it is also not working.
$scope.locationId = 0
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
url : $scope.url
};
$scope.setURL = function(locationId) {
$scope.locationId = locationId
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
url : $scope.url
};
$scope.eventSources = [ $scope.eventSource ];
}
Without using refetchEvents, below code works for me. Once the new event source is added, Calendar automatically fetching the new data from new source.
// This function is called to change the event source. When
// ever user selects some source in the UI
$scope.setEventSource = function(locationId) {
// remove the event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEventSource', $scope.eventSource);
// Create the new event source url
$scope.eventSource = {url : "./api/ev/event/calendarByLocationId?locationId=" + locationId};
// add the new event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
}
I am figuring out on adding and removing events sources as well. There seems to be a problem.
But as temporarily, what I had was a REST url. Once updated, the data is updated. By then I made the program to refresh the event on the same url by triggerring this. This enables the url to be refreshed and grabbed from database again.
$scope.myCalendar.fullCalendar( 'refetchEvents' );
Which your HTML code should look like this:
<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
Hope this helps.
I have developed a simple google map web page. I need help form anyone who has experience in google maps. In right panel of my web page I add some checkboxes and I want to link different kml with these checkboxes. When I check all layer all kml are show in google maps and when I uncheck any layer checkbox then kml related to that checkbox will disappear. Please guide me how I can do this.
Please check the page from this link
http://toptrippk.com/webgis/kml%20layers.html
I suggest you the following structure. Using this method you don't have to write seperate functions for every layer but only this one. Note that 'id' of 'input' tags here is used as KML filename. You probably want to see this question. If looking forward then geoxml3 may be an option for you.
var G = google.maps;
function toggle() {
if (!this.kml)
{this.kml = new G.KmlLayer('http://toptrippk.com/webgis/uploadfiles/kml/' + this.id + '.kml', {preserveViewport:true}); this.on = false};
if (this.on)
{this.kml.setMap(null); this.on = false} else {this.kml.setMap(map); this.on = true};
};
function initialize() {
var layers = document.getElementsByTagName('input');
var options = {};
map = new G.Map(document.getElementById('map_canvas'), options);
for (var i=0; i<layers.length; i++) {G.event.addDomListener(layers[i], 'click', toggle)};};
G.event.addDomListener(window, 'load', initialize);