I am using highcharts to generate the line chart after loading huge data. Since the data is huge it is taking extra time to load the data and show the chart. Is it possible to show an alert (like: data loading) before start loading data and hide that alert/message after showing the chart.
Look at the loading options in the API. Since the chart has to exist before you and use the options, I find it best to use in the following workflow:
Create a "blank" graph before loading data with a redraw event to hide the loading message and the load event set to show the loading message:
// blank graph
$('#container').highcharts({
chart: {
events: {
redraw: function(){
this.hideLoading();
},
load: function(){
this.showLoading();
}
}
}
});
Make your AJAX call to retrieve data and load into chart using addSeries(), the above events will show/hide the message.
Here's an example jsFiddle.
Related
I have a multi-series column chart in Highcharts with three series ("Western", "Eastern", and "Central"). Clicking the label of a series in the legend shows or hides the series. I'd like to add a little link at the end of each label with a link to download details about the underlying data for that series.
So a label would look like: Western (details)
I tried simply adding an <A> link to the "name" of the series, and the link appears, but clicking on it doesn't open the link. Instead, it merely toggles the series display as before. I guess the "onClick" event for the label itself supersedes the <A> behavior.
Is there any way, without hacking Highcharts or creating a whole custom legend, to make a link in a series label functional? Maybe something with CSS to make the link jump out of its parent element?
Your idea is very good. You need to only call e.stopPropagation() after click on a link to prevent toggling series.
Highcharts.chart('container', {
series: [{
name: 'Series name <a id="seriesDetails" href="https://www.google.pl/">Details</a>',
...
}]
});
document.getElementById('seriesDetails').addEventListener('click', function(e) {
e.stopPropagation();
// prevent redirect
//e.preventDefault();
console.log('click');
});
Live demo: http://jsfiddle.net/BlackLabel/kaLrmjd7/
API Reference: https://api.highcharts.com/highcharts/series.line.name
This is my selection event handler in my code which I am for specific zoom timezones as you can see. What I am trying to achieve is to change the xAxis labels based on the zoom. Currently the following code does not work but I can not seem to find a solution to this problem online. Any thought?
Real question would be how can I alter highchart options through events. From the event parameter in the function I can access information but I can not change it.
I have two aproach, the first with changing inside event chart.redraw() will be called every time when chart is redrawn, for testing I added fired from a button.
redraw: function() {
let chart = this;
console.log(chart);
chart.xAxis[0].userMax = 8;
chart.xAxis[0].userMin = 2;
},
The next way is to update the axis object with a new set of userMax and userMin options.
chart.xAxis[0].update({
userMax: 8,
userMin: 2
}, true);
Live demo:
https://jsfiddle.net/BlackLabel/fcsd9hyo/
API References:
https://api.highcharts.com/highcharts/chart.events.redraw
https://api.highcharts.com/class-reference/Highcharts.Axis#update
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!
I'm using the following code so that if a person clicks on one of the candlesticks in the chart, the tooltip actually stays on the page:
events: {
click: function(event) {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = event.currentTarget.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
I'd like to move this from the series to the chart so that they can click anywhere on the page and have the tooltip stay. However, event.currentTarget.chart doesn't exist if they don't click on a candlestick. I looking through the result and can't find the corresponding tooltip. Can someone shed some light on this for me? Much appreciated!!
You can use this instead of event.currentTarget.chart as the context is the chart itself. Hence this.tooltip should give you the tooltip that you are looking for.
I am using jQgrid with ASP.NET MVC.
I am having a couple of problems.
I would like to draw the grid when the DOM is created, but I would like to load the data after, when I select a TAB in a tab page.
I can’t find any example for that. Is there anyone who tried that?
I am using an custom navigation bar:
(”#AttachmentsGrid”).navGrid(’#AttachmentsPager’, { edit: false, add: true, del: true, search: false });
After a couple of selections on the TAB (jQuery UI) I can see the buttons of the nav bar are duplicated.
I have one big problem with selections.
I can’t select any other row but the first. Anyone else faced the same trouble?
Best regards
Alberto
To draw the grid on DOM ready but populate it later, you could initialize the grid using a local data store:
datatype: "local"
Then, when you select the proper Tab, initiate an AJAX request to get your data. When the data has been retrieved you can do this to load it into the grid:
// Populate grid data
jQuery("#myGrid").clearGridData();
if (data != null){
for(var i=0;i<data.length;i++){
jQuery("#myGrid").addRowData(data[i].id, data[i]);
}
}
}
Regarding duplicate buttons after selecting a tab multiple times. I have seen this before when initializing the jqGrid multiple times (IE, calling .jqGrid each time the tab is selected). You should not see this after following the steps above. Otherwise, one way to prevent this is to keep track of when the grid is initialized, and only have the grid initialized when the corresponding tab is first selected:
var initialized = false;
jQuery('#tabs').tabs({
show: function(event, ui) {
if (ui.index == 1 && !initialized){
initialized = true;
(... create your grid here ...)
}
}
});