I'm trying to get SVG of two charts on the page.
I've added a button, and onclick of this I'm adding
var svg = $('#container1').highcharts().getSVG();
var svg1 = $('#container2').highcharts().getSVG();
I'm able to get the first svg but for second one I'm getting error
'Cannot read property 'getSVG' of undefined'. I'm unable to understand how getSVG() has worked for the first time and is throwing error the second time
Related
I'm having trouble with highcharts downloading PNG image, I want to use my own button instead the highcharts one, reading the documentation I need to use "exportChart" function, but it removes data:
options:any = {
exporting: {
enabled: false
}
}
exportPNG():void{
this.chart.exportChart();
}
There is an "almost working" example it gives an error in app.module using "require" and another one when tyring to import from exporting, help in make the example work will be apreciate
https://stackblitz.com/edit/angular-dqck8n
When it's working, we can click in "download button" and downloads the chart, but if click again it returns an error because data is removed from chart.
I've realized it also happen using exporting library, you can check it download image file and trying to do zoom out.
The reason is saveInstance method - it is called on every chart's load. When exporting, a new temporary chart is created and then deleted so now your angular component has the reference to the removed exported chart - this.chart inside exportPNG() refers to the empty chart object.
You can check if load event is called for a normal chart and then save the chart's instance.
saveInstance(chartInstance): void {
if (!chartInstance.options.chart.forExport) this.chart = chartInstance;
}
live example: https://stackblitz.com/edit/angular-41tmjd?file=app/mychart.component.ts
Using latest HighStock/HighCharts we are creating charts with this syntax:
$('#container').highcharts({...
We then allow the user to do some manipulation of the chart series displayed. We added the ability for the user to reset the chart back to how it was originally. We are using this method:
function forceResetChart(chart) {
var opts = chart.options;
chart.destroy();
chart = new Highcharts.Chart(opts);
}
This does reset the chart and we are able to make changes again. However, we are keep getting errors thrown in the console:
TypeError: a.renderTo is undefined # .../JavaScript/HighStock/highstock.js:198
How can we still use the cleaner syntax ($('#container').highcharts({...) and not get this error thrown?
Example jsFiddle.
option 1) Just make sure you still specify "renderTo:'container'" in the chart properties.
Or, if you don't want to include in the initial chart code, add it to the options in your forceReset function.
option 2) in your forceReset function, use the same '$('#container').Highcharts...' syntax to call your chart, rather than switching back to the other syntax
example of option 2:
http://jsfiddle.net/5pa7N/8/
{{edit option 3:
set options variable up front.
call chart on page load using that variable.
reload chart using that variable
http://jsfiddle.net/eYmh9/
I'm using AIR 2.0 (soon will be updating to 3.3 with Flash CS6) to create an iPad app. We have textfields (Classic, dynamic) which sometimes contain one or multiple htmlText links which need to be clickable. In the desktop version of the program, all text is selectable and the links are easily accessed. My problem is that it takes me mashing the link like 20 times on the iPad before it will recognize that there's a link and navigate to it in Safari. The other strange thing is that none of the text appears to be selectable - I can't get the iPad cursor, copy/paste menu, etc. to show up.
I think, from reading other threads, that the hit area for the URL is only the stroke on the text itself... if that's true, what can I do to increase the hit area? Or make text selectable? It was suggested elsewhere to put movieclips behind the URLs but that's not really possible as this is all dynamic text from XML files.
I've read about StageText but I gather this is only used for input fields, which is not the case here.
I'm reasonably advanced in AS3 but I'd prefer an easy solution over re-writing large chunks of code. At the moment the only thing I can think to do is get the URL and make it so that as soon as you touch anywhere on the textfield, it navigates to the link. But this would break down if there were more than 1 URL in a given textfield.
Any ideas?
I had this exact same issue, and it's had me flummoxed for a while.
Here's what I did to get the desired behaviour:
1) Instead of using a listener for TextEvent.LINK, listen for MouseEvent.CLICK (or TouchEvent.TAP) on the TextField.
eg.
var tf:TextField = new TextField();
tf.addEventListener(MouseEvent.CLICK, linkClicked);
2) In the linkClicked() handler, you use getCharIndexAtPoint() to determine the index of the character that was clicked, and then from that determine the URL from the TextFormat of the character. This is adapted from a post by Colin Holgate on the Adobe Forums (http://forums.adobe.com/thread/231754)
public function linkClicked(e:MouseEvent):void {
var idx:int = e.target.getCharIndexAtPoint(e.localX, e.localY);
trace("Tapped:",idx);
var tf:TextFormat = e.target.getTextFormat(idx);
if(tf.url != "" && tf.url != null) {
var linkURL:String = tf.url;
trace(linkURL);
// Hyperlink processing code here
dispatchEvent(new UIEvent(UIEvent.LINK_TAPPED,tf.url));
}
}
3) The last line (dispatchEvent()) is sending a custom event to another function to process the link, but you could easily inline your code here.
I've tested on an iPad 3 running iOS6.1, building with AIR3.5. Links are much more responsive, and I don't find myself mashing the screen trying to hit the stroke of the text!
Here are the codes I have to dynamically create and enhance a page. The similar pattern has been working for many other kinds, such as text field, button, grid-view, etc. But I found it cannot work with a listview.
$(document).bind("pagebeforechange", function route(e, data) {
...
$content = $page.children(":jqmData(role=content)");
var markup = '<ul id="calendarList" data-role="listview"><li>HELLO</li></ul>';
$content.html(markup);
$page.trigger('create');
$.mobile.changePage($page);
});
I would always get an error message like,
Cannot read property 'jQuery16409763167318888009' of undefined
Through debugging using Chrome, I found it always fails on the line of $page.trigger('create');
I found the solution myself. It works fine if I replaced the line,
$page.trigger('create');
with,
$page.page();
$content.find( ":jqmData(role=listview)" ).listview();
However, I still don't understand why. I thought the former was a newer, simpler syntax to replace the latter. A single call of $page.trigger('create'); can enhance the entire page at one shot. Does anyone know the difference of these two?
I'm trying to use the combobox component for Flash. I can't get the change event to fire. My code is pretty much straight of of the adobe site (link below). The box gets populated but changing the value produces no trace output. What am I doing wrong?
http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/js/html/wwhelp.htm?href=00002149.html#3138459
myCombo.addItem("hi1", "hi5");
myCombo.addItem("h2", "hi6");
myCombo.addItem("hi3", "hi7");
myCombo.addItem("h4", "hi8");
var form = new Object();
form.change = function(eventObj){
trace("Value changed to " + eventObj.target.value);
}
myCombo.addEventListener("change", form);
I pasted your code into an AS2 project and it worked as expected for me. No other output? Try adding a trace before and after the addEventListener to make sure it's getting called. Try using a name other than form for your object. Try running it in debug and set a breakpoint in the change function.