problem adding new point in my chart with draggable points - highcharts

Good afternoon to everyone
I add a new task in my gantt chart with dragable points.
fiddle
But after I create a new task, if i try to drag the new point, i get many errors:
Uncaught TypeError: f.showDragHandles is not a function
VM28 draggable-points.js:18 Uncaught TypeError: d.firePointEvent is not a function
If i disable redraw in addPoint function and move another point, the new point appears and works fine.
updated fiddle
I think that i need a special refresh or update.
I hope you can help me.
Thanks a lot!

Related

Highcharts: initialize Highcharts before showing new charts on an Ajax-driven page

I have a page which has a few links. Clicking on a link generates a list of different charts in the bottom of the page without page reload. Put it another way, each link clears previous charts, gets new data from the server, invokes Highcharts to draw new charts. No page reload.
Here comes the issue.
I am using the following Javascript to collect the charts on the page and send the data to the server.
var svgArray=[];
$(Highcharts.charts).each(function(i, chart){
if (chart) {
svgArray.push(chart.getSVG());
}
});
I notice that Highcharts.charts array grows by ADDING new charts to its end of when a link is clicked. I dont need old charts. I just want to collect new charts.
How can I initialize Highcharts or Highcharts.charts when a link is clicked.
Thanks and regards.
Here is what I did and it appears to get rid of charts created earlier. When a link is clicked and before the new charts get drawn, I try to destroy all charts the following way:
$(Highcharts.charts).each(function(i, chart){
if (chart) {
chart.destroy();
}
});
It seems working, but I am not sure if this is the right or best way or it can help others. I love to hear the input from experts.
Thanks!

Unable to change draggable mode

I have a box in this jsfiddle - http://jsfiddle.net/stevea/C8Uce/6/ - that I've made draggable. When I hit the Snap button I'd like to change the draggable mode to snap to a 50x50 grid, but it's not working.
$(function() {
$('#box').draggable();
$('#snap').click(function() {
$('#box').draggable('option',grid, [50,50]);
});
});
Does anyone see the problem?
Thanks.
You are missing quotes around grid:
Change your initialization to:
$('#box').draggable('option','grid', [50,50]);
Fiddle
With something like this, the console can be your best friend. It may have led you directly to the problem:
Uncaught ReferenceError: grid is not defined

Hiding a highchart series is very slow

I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();

How to dynamic loade pages and using IScroll

I am using IScroll to help position a footer in the bottom of the screen on my PhoneGap application, but I have a problem I have struggling with for a few nights, so I hope some of you might be able to help.
To be able to persist my header and footer through the application I have been using something similar to this.
Usually I would bind on my PageCreated event, but since this is not execute I can't do that. I have tried after the page is received and I have called jQuery('#mobilePage').trigger('create'); to call setTimeout(function(){ myScroll.refresh(); },0);.
The issue is that the height isn't generated correctly. Half of the time some of the content is hidden beneath the footer.
My theory is that trigger('create') takes som time to call, and I therefore call myScroll.refresh() too early.
My question is there if there is a way to bind up on the trigger('create') event so I can create a callback and execute the scroll update?
in iscroll code, check for
checkDOMChanges
and make it true. then iscroll will handle setting up of the refresh whenever dom changes
try this jsfiddle link I think it will help you

Reversing Highcharts Y-axis after the chart has been initialized

I originally asked this question on the Highcharts forum a few days ago but received no answer so let me ask it here:
I want to have a chart where I can toggle the 'reversed' property of the Y-axis after the chart has been initialized and then see the chart redrawn. My first thought was to put something like the following code inside of an event handler (say in response to a button click), but it doesn't seem to do anything.
chart.yAxis[0].reversed = !chart.yAxis[0].reversed;
chart.redraw();
I don't think it's possible (see this forum post).
In particular, the last response on that post concludes with this:
I would suggest a workflow for your gui that updates a structure that keeps the options and then creates a new chart based on the options. The api we have has more of a focus on changing the data that is displayed than changing how the data is displayed.
So you might have to create two charts (one for each axis direction), only display one of them at a time, and toggle between them at runtime.
Update:
The accepted answer on this duplicate question suggests it is possible by doing this:
chart.yAxis[0].update({
reversed: !reversed
});

Resources