I would like to use nvd3 chart library in my AngularJS app by using angularjs-nvd3-directives
Is there a way to export any given nvd3 chart to any of the graphics file formats?
Please post a code sample for detailed help
To capture your chart to a file for use
Register a callback in on-ready in your nvd3 directive. This callback receives a 2 parameters as show below
$scope.callback = function(scope,element){
$scope.myChartScope = scope;
}
This $scope.myChartScope should contain a reference to your svg element, console.log it to see its contents
In your options object for the line chart, there is a dispatch object which has an attribute called renderEnd that gets called when your chart is fully drawn. In this renderEnd you can then access your $scope.myChartScope.svg
and then do what you want with it.
You can use a library like https://github.com/exupero/saveSvgAsPng to save your SVG to an image file
All done on the client side
I hope this answers your question!
Related
I'm adding a number of icons created from imageSprite.createFromTemplate() method however sometimes I'm receiving the following error . How to resolve it using "styleimagemissing" event? How to find out which image is missing to add in the callback ?. And the symbol layer created using the icons sometimes overlaps over the bubble layer(cluster layer) too in some clusters. I don't know if that is caused due to missing images. Thanks in advance.
atlas.min.js:55 Image "Scaffold Builder_Inactive_Icon" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
The styleimagemissing event will tell you the ID of the image that is missing. It won't tell you which symbol layer is trying to use that image however as a single image may be used by multiple layers.
Here is an example of how to use this event:
var iconLoaded = {};
//Add an event to handle the situation when an image is missing from the sprite.
map.events.add('styleimagemissing', function (id) {
//Check to see if the image is has been or is being loaded. Don't try and load the image multiple times.
if (!iconLoaded[id]) {
iconLoaded[id] = true;
//Load the custom image icon into the map resources.
map.imageSprite.add(id, '../Common/images/icons/showers.png').then();
}
});
A complete sample is available here: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Symbol%20Layer/Load%20missing%20image%20into%20sprite.html
I have started a scaled down, proof-of-concept floor plan application for my employer that is using an SVG floor plan drawing generated by Adobe Illustrator CC, HTML, CSS and AngularJS.
The idea is to have a floor plan that contains static cubicle/office numbers and to marry that floor plan with a CSV file with personnel data that updates periodically and make the information available on our intranet.
Although I am new at AngularJS/SVG, I was following an example for a map of the US and have made some pretty good progress so far, however am now at a point where I need to map the CSV data (personnel) to the SVG (cubicles) and am not sure how to proceed.
From the example in the link above, the author appears to have injected an "sg-click" directive into the SVG DOM with Angular.$compile that fires a JS Alert() of the ID of the SVG DOM when clicked:
link: function (scope, element, attrs) {
scope.elementId = element.attr("id");
scope.regionClick = function () {
alert(scope.elementId);
};
element.attr("ng-click", "regionClick()");
element.removeAttr("region");
$compile(element)(scope);
}
I am wondering if the same thing is possible with the CSV data, IE:
Outer loop over the SVG (Cubicle ID)
Inner loop over the CSV (Personnel/Cubicle ID) data
If Cubicle ID matches Personnel ID, inject the CSV data into that SVG node.
Since I am having some difficulty including the functional code here due to tag and external file restrictions, I have created a Plunk, where you can view everything in context along with external files that is operational in its current state.
Thanks.
After talking with a colleague, he suggested that I:
Convert the CSV list into an array.
Load the array into some kind of container.
When a user clicks on a cubicle.
Iterate through the array and see if there's a match based on the cubicle ID.
Since this my first attempt at Angular, my implementation may well be incorrect, but I've created a new plunk to reflect the latest code changes.
...code in plunker.
Thanks.
Plunk
I am new to angularjs, trying to create my first directive. I am creating a directive to load Charts.js2.0(beta) into my application.
I have 2 views managed by angular-route, both html view has ng-included a html page that contains only charts-element.
The problem is the first page properly draws the chart, when i go to other view the charts div is loaded but charts is not re-drawn. And now if i go back to first view its blank.
Link to Plunker
What i am doing wrong? Is there any issue with my directive?
Thanks in advance.
There appears to be an issue with the Charts library modifying the existing object on the root scope, and thereby ignoring it forever afterward. I can't really trace down what is doing it, but here's a fix for you: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8
Here is what you had
scope.$watch('config', function(newVal) {
if(angular.isDefined(newVal)) {
if(charts) {
charts.destroy();
}
var ctx = element[0].getContext("2d");
charts = new Chart(ctx, scope.config);
//scope.$emit('create', charts);
}
});
Above, you can see that you're passing scope.config directly into the charts method. That appears to be modifying the data somehow, and since that's passed by reference, you're actually modifying $rootScope.sales.charts. If you copy that object and use it locally like below, you don't have that problem.
Here's how I fixed it.
scope.$watch('config', function(newVal) {
var config = angular.copy(scope.config);
if(angular.isDefined(newVal)) {
if(charts) {
charts.destroy();
}
var ctx = element[0].getContext("2d");
charts = new Chart(ctx, config);
//scope.$emit('create', charts);
}
});
You can see that instead of passing that object directly in, we use angular to make a copy (angular.copy()), and that's the object we pass in.
I think it has relation with the id of the canvas where you are drawing. I've had this problem too amd it was because i was using the same id for the canvas of two graphs in different views. Be sure that those ids are different and that the javasrcipt of each graph is in the controller of each view or in each view itself.
Taking a look at your pluker I see that you are using the same html for the graph and I guess that when angular moves from one of your views to the other thinks that the graph is already drawn. Differentiating two graphs will solve the problem. I don't know of there is any other approach that allows using the same html for the canvas of the graph.
Hope it helps you solve it
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.
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();