I want to have a column chart in my angular app that could be drilled down to a line chart. I think the main problem is to be able to handle click event on each column that I could not find it highchart nor angular-chart. Can you tell me a way to construct such thing?
ZingChart has an Angular directive that works well with your use case. You can use the directive with ZingChart's internal events to bind to just about anything on the chart :
zingchart.node_click = function(p) {
....
}
Demo : http://jsfiddle.net/mschultz/ck84wjce/
Angular Directive: https://github.com/zingchart/ZingChart-AngularJS
Docs : http://www.zingchart.com/docs/api/api-events/
It can also perform drilldowns fairly easily across different types of charts: http://www.zingchart.com/blog/2014/09/02/chart-drilldown-interactive-feature/
If you need any help, feel free to reach out - I work for the ZingChart team!
Check out this page for an example on Angular Drill Down chart using CanvasJS Angular Chart. It also includes angular source code or download angular sample from download page.
Check this StackBlitz for a simple example.
Related
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.
First I have this:
then when I reload, I get what I want:
What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.
I try to include the library using the hosted method and bower method.
Any idea what is going on?
i past in my code this function
angular.module('app', ['ngRoute']).
run(function($rootScope, xxxx, xxx){
$rootScope.$on('$viewContentLoaded', function(event, next) {
componentHandler.upgradeAllRegistered();
});
});
It worked perfect! Good luck..
Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.
Material Design Lite has a section in its FAQ about using MDL on dynamic websites:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>
Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.
Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.
I have made a basic carousel and and would like to use ng-animate to animate when entering and leaving each index in an array. The templates in Carousel.Data will soon contain html data. I would like to also know what would be the best way of passing html in an array so the user can click next and be presented with the next html template.
I have ng-animate loaded in the DOM with angular version 1.21 but I get an error when I try to inject the dependancy
var App = angular.module('App', ['ngAnimate']);
Here is what I have so far:-
http://codepen.io/anon/pen/wajRog
any help would be much appreciated
It's difficult to tell in CodePen but be sure that angular.min.js is loaded before angular-animate.js. Make sure the order is as follows:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-animate.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-touch.js
You can rearrange the resources in code pen by clicking the hamburger icon near each resources and clicking/dragging to the top. If i got to https://docs.angularjs.org/api/ngAnimate for example and open the plunker for anchoring. If you move angular-animate cdn script tag above angular.min.js, it will give an injection error.
Let me know if that works.
I am having trouble having highcharts bind to a dynamic chartConfig using this approach
where charts is an object in the controller housing multiple charts by the keys "{{moment}}_a".
When the page resolves, the highcharts has the right output, for e.g.
config="charts['ABC-DEF_a']" but the chart and data don't display. If I manually type the same config="charts['ABC-DEF_a']" into the page, it displays fine.
How do I ensure that highcharts binds to the variable referenced?
Thanks
If you use for example config="chartConfig" you edit it via controller by $scope.chartConfig = {}; and after any dynamic change you must call $scope.$apply();
Actually I want to create a calendar like Google calendar, In which user can able to create events. So that I want a popover when user clicks on cells. Please give me any suggestion for this. I have also confused between ng-grid and ui-calendar, which is the best option for drawing calendar, binding click event etc.
Thanks in advance.
No reason to worry about ng-grid, you could build a calendar out of it but the existence of ui-calendar makes that just a good coding/css exercise.
The Angular UI Calendar (https://github.com/angular-ui/ui-calendar) is a wrapper around the jQuery fullcalendar plugin (http://arshaw.com/fullcalendar/docs/). You can use the documentation on the latter and pass options right through the directive.
Example from the GitHub page referenced above:
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.calendarConfig = {
height: 450,
editiable: true,
dayClick: function(){
scope.$apply($scope.alertEventOnClick);
}
};
});
<div ui-calendar="calendarOptions" ng-model="eventSources">