I have an AngularJS application in which I am using highcharts-ng version 0.0.86. I am generating the highchart by the following code
<highchart config="highchartsNg"></highchart>
The chart gets properly generated with this dynamic id "highcharts-2i5ujpv-2"
But whenever I type $("#highcharts-2i5ujpv-2").highcharts() in the browser console, it gives me undefined.
Also, I have other charts in my app for which I am creating the chart using jQuery inside a div container and it works fine. eg
<div id="multi-chart-container"></div>
$("#multi-chart-container").highcharts(chartconfig);
I need to understand why I does it give me undefined in the first case
Thanks in advance
Highcharts creates it's own div element with dynamic id. You need to get one level higher to get the chart:
$("#highcharts-2i5ujpv-2").parent().highcharts()
Live demo: http://jsfiddle.net/BlackLabel/5eq6yhg3/
Related
I hvae an angular view of a pdf preview that utilizes a controller to fill the view in. I am using pdflayer then to convert the html page into a pdf. The problem however is that no matter how I try and do this the scope variable values never make it into the pdf. I am basically trying to figure out a way to capture the angular view as an html string (data already injected) so that I can pass it to pdflayer. I have tried creating a directive and used replace within the directive then collecting the DOM as a string using .HTML().
For example:
I could like this
<div id="name">{{test.name}}</div>
to become this
<div id="name">Bob Smith</div>
It inevitably however turns into this when i use $('#name').html() and then console log it
<div id="name"></div>
or
<div id="name">{{test.name}}</div>
Any help would be appreciated even if the solution is to use a different method to create the pdf. Ultimately, I need to get a angular view into a formated pdf.
Please check if below library would work for you : https://www.npmjs.com/package/angular-save-html-to-pdf
I am using create ChartJS for create chart.And system provide facility to search data in date range. When searching new rage load chart corectly, but when focus to chart old chart values display again.
To solve that remove previous canvas content and load new canvas using
$('#line').remove();
$('#chart_container').append('<canvas id="line" height="600px" style="margin-top:20px;" ></canvas>');
After that fix chart load properly, but browser console display bellow error
This happens because the events (resize) are binded at creation and there is no check whether the canvas exists or not in the resize handler.
In order to prevent this issue, you can modify the resize function and insert the following line before everything else:
if( !this.canvas ) return;
Instead of removing the chart, you can update your datasets like this:
myChart.chart.config.data.labels = myNewLabelsArray;
myChart.chart.config.data.datasets[0].data = myNewDataArray;
myChart.update();
I remember having a lot of problems with old data displaying, and this is what fixed it for me. Not destroying, just updating.
You're removing the plugin as well as the old HTML element. Try re-iniciating the ChartJS library after appending the new HTML.
I have a number of Div's on a layout, each of them draggable, so there's the possibility of the user dragging them into positions where they will overlap.
I want to set the most recently made visible div to have a z-index value that's +1 from the last, and for this I'm using a $scope.nextIndex variable that's incremented each time one of the div's is made visible.
Each div has its own variable to track its own z-index value: $scope.one_zIndex, $scope.two_zIndex, $scope.three_zIndex, and each correctly gets assigned an incrementally larger value as each div is shown, hidden and shown again.
Each div has its own class: one_z, two_z, three_z
What I can't make work is assigning the variable to the z-index style on the divs themselves via the controller.
var myVar = document.getElementsByClassName("one_z");
If I log this to the console, I get what I expect - an array with one element [0]
[]
0 : div#one_z
length : 1
one_z : div#one_z
__proto__ : HTMLCollection
I would assume that I could set the z-index simply like this:
myVar[0].style.zIndex = $scope.one_zIndex;
However this throws an error:
Uncaught TypeError: Cannot set property 'zIndex' of undefined
What am I missing? Or is there a better way to accomplish this?
Here is a working plunker https://plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview
You can set zindex via ng-style:
<div ng-style="{'z-index': $lastIndex;}">...</div>
This example completely useless in your case, but there is an example of ng-style usage. In your case I'd set index as property of you div element data source.
What wound up working was this:
First, I switched to IDs instead of classes, which likely didn't impact the solution but as each div was only ever going to exist once, IDs was the more correct way of identifying them.
Then, in the function that displays the div, I used this:
_.defer(function(){
jQuery('#one_z').css('z-index', $scope.one_zIndex);
});
There appeared to be an issue where I was showing the div and trying to set its z-index before the DOM had updated to include the div, so _.defer (I'm using Underscore.js) prevented the accessing of the z-index until everything had updated once, and it works.
As I mentioned in another comment - using ng-style wasn't working for me, and I had tried the _.defer with that approach as well initially without success.
For the record - I've used jQuery() instead of $() so it's clear in the code that this is a jQuery and not an Angular solution, and while I'd ideally have liked a purely Angular solution to this problem, this is clean enough for me, and doesn't do any DOM manipulation outside of Angular's purview that impacts the rest of the application in any way, it's purely display candy.
I am using ionic to create a mobile app.
I have a list of items and each item has a photo in it.
in my angular template for each item i have:
<img src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>
i use ng-repeat='listing in listings' to display the template.
i keep seeing angular makes one call to the non parsed url first but for each row gets the right image and displays it:
so first it tries getting
http://www.example.com/images/listings/{{listing.id}}/thumb.jpg
not parsing {{listing.id}}.
but then it parses correctly and displays the image correctly in the list:
http://www.example.com/images/listings/3523/thumb.jpg
so if i have a list of 15 items, it makes one call non-parsed {{listing.id}} and 15 calls correctly parsed.
how do i stop this from happening?
You should be using ngSrc instead of using the interpolation directly.
<img ng-src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>
In my code I have something similar to
<div ng-if="variableThatEvaluatesToFalse">
<input id="location">
</div>
What I'm trying to do is hide a component and then show it in response to user input. However, upon my page loading I want Google Maps to attach to my input. Google Maps relies on document.getElementById('location') which is null presumably because AngularJS is 'hiding' it. I can I get document.getElementById('location') to return my input field even if it is initially hidden by the ngIf directive?
The ngIf directive prevents elements from being included in the DOM at all. What you would need in this case is ngHide, which would keep the element in the DOM.
See: https://docs.angularjs.org/api/ng/directive/ngHide