score:1
If you want to load on click, you need to call the state data on click_event
(and not at startup).
Just like your JSFiddle example:
chart : {
events: {
drilldown: function (e) {
// Load you data
// show it with chart.addSeriesAsDrilldown(e.point, {...});
}
}
}
Or as @Whymarrh suggests, you can load them all in parallel (instead of one after the other) and once they are all retrieved, compute your map.
See https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/ for example on how to execute a code after all ajax calls have completed.
score:1
When you load your map data as you did, in the following manner:
$.when(
$.getJSON('json/generate_json_main_map.php'),
$.getJSON('json/generate_json_region_1.php'),
$.getJSON('json/generate_json_region_2.php')
).done(...);
The effect is this - when any of the three requests fail, all promises will be rejected and ultimately, your map never gets to be initialised.
A better approach could be to request all data independently, and the outcomes would be handled as follows:
- If the request for the main data fails, abort the other requests unconditionally (there would be no need for a drill down if the primary data is non-existent).
- If request for main data succeeds, you may go on and initialise the map as data becomes available. The request for drill down data may or may not succeed though (but half bread is better than none?). Assuming everything goes well, then in the event that user initiates a drill down action, you show a loading message and ultimately add the drill down series when it becomes available.
Here's an implementation of the method I offered:
$(function () {
// immediately trigger requests for data
var loadMainData = $.getJSON("json/generate_json_main_map.php");
var loadRegionData = {
"region-1-name": $.getJSON("json/generate_json_region_1.php"),
"region-2-name": $.getJSON("json/generate_json_region_2.php")
};
// region drilldown options
var regionalSeriesOptions = {
"region-1-name": {
id: 'a',
name: 'First',
joinBy: ['hc-key', 'code'],
type: 'map',
point: {
events: {
click: function () {
var key = this.key;
location.href = key;
}
}
}
},
"region-2-name": {
id: 'b',
name: 'Second',
joinBy: ['hc-key', 'code'],
type: 'map',
point: {
events: {
click: function () {
var key = this.key;
location.href = key;
}
}
}
},
// ...
"region-(n-1)-name": {
// series options for region 'n-1'
},
"region-n-name": {
// series options for region 'n'
},
"region-(n+1)-name": {
// series options for region 'n+1'
}
};
// main options
var options = {
title: {
text: ""
},
series: [{
type: "map",
name: st_ponudb,
animation: {
duration: 1000
},
states: {
hover: {
color: "#dd4814"
}
}
}],
events: {
drilldown: function (e) {
var regionName, request, series, chart;
if (e.seriesOptions) {
// drilldown data is already loaded for the currently
// selected region, so simply return
return;
}
regionName = e.point.name;
request = loadRegionData[regionName];
series = regionalSeriesOptions[regionName];
chart = this;
chart.showLoading("Loading data, please wait...");
request.done(function (data) {
// series data has been loaded successfully
series.data = data;
chart.addSeriesAsDrilldown(e.point, series);
});
request.fail(function () {
if (loadMainData.readyState !== 4) {
// do you really want to cancel main request
// due to lack of drilldown data?
// Maybe half bread is better than none??
loadMainData.abort();
}
});
// whether success or fail, hide the loading UX notification
request.always(chart.hideLoading);
}
},
colorAxis: {
min: 1,
max: 10,
minColor: '#8cbdee',
maxColor: '#1162B3',
type: 'logarithmic'
},
drilldown: {
drillUpButton: {
relativeTo: 'plotBox',
position: {
x: 0,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 0,
stroke: 'white',
r: 0,
states: {
hover: {
fill: 'white'
},
select: {
stroke: 'white',
fill: 'white'
}
}
}
},
series: []
}
};
loadMainData.done(function (data) {
options.series[0].data = data;
$("#interactive").highcharts("Map", options);
}).fail(function () {
Object.keys(loadRegionData).forEach(function (name) {
// if primary data can't be fetched,
// then there's no need for auxilliary data
loadRegionData[name].abort();
});
});
});
Since I don't know every detail of your code, it's left for you to find a way to fit it into your solution.
Source: stackoverflow.com
Related Query
- Optimize JavaScript DrillDown code
- JavaScript code inside TypeScript file .ts not working
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- passing formatting JavaScript code to HighCharts with JSON
- Embed javascript code in a django template
- HTML Content to Javascript Code
- Strange character in the Highstock source code
- tool that shows javascript errors in code
- Repeating Javascript Code
- Column based Highchart drilldown series assign color code to each column
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- Javascript Code not running in Wordpress Pages
- Use django variable (array of elements from sqlite3 database) inside javascript embedded code
- Javascript relative time 24 hours ago etc as time
- Drilldown multiple levels Highchart
- Highchart series update in javascript
- JavaScript - Export Div with SVG chart + HTML as and Image
- How can I read an Excel File with JavaScript (without ActiveXObject)
- Export Highcharts to PDF (using javascript and local server - no internet connection)
- Drilldown in highmaps - how to remove a series
- How do I dynamically change a data point in Highcharts using JavaScript
- Change title when drilldown in Highcharts
- Capturing webpage as image in c#, ensuring javascript rendered elements are visible
- HighCharts is undefined because multiple Html pages in Javascript file
- JSON.parse: unexpected non-whitespace character after JSON data in javascript
- How to get Render Performance for Javascript based Charting Libraries?
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- JavaScript error when using Highcharts
- 3 level Drilldown of a column chart in highchart?
- Highmap R (or) javascript - adding custom legend
More Query from same tag
- Generate PDF from a page with highcharts on it with abcpdf
- Highchart-graph does not appear in internet explorer
- Highchart network graph with tooltip when hover on every node
- How do I buffer streamed data with react-hooks (useEffect) to be able to update another component at once to avoid many rerenderings?
- Highcharts -- how to change line width programmatically and prevent resetting line width?
- Merge two or more graphs using library
- Highcharts: cutom tooltip (useHTML: true) z-index issue over resetZoomButton
- Transfer Multiple Textbox value into Pie Chart slices(Percentage)
- Highcharts exportchart PDF not showing all categories
- Highcharts- How to style the colums to have gradient colors
- Adding a string to highcharts tooltip based on a separate data series
- Highcharts chart.events.redraw doesn't work for chart.xAxis[0].update
- HighStocks Tooltip is not working properly
- How to show tickPositions as start and end for each bar in highcharts?
- Scala.js union types
- Drop lines with highcharts
- Showing a cross-hair programatically in Highcharts
- jQuery: reading information from a text file and using content in text
- Highstock, True way of Get count of shown points after setExtreme (Zooming) - WITHOUT counting all data with MIN and MAX
- Highcharts Dynamic Column color based on data comparison
- Does manipulating a hidden DOM element affect performance?
- Modify length of Highcharts sankey-diagram connection line
- Highcharts 6 time line chart
- Animating column chart
- Getting error when try to use external parameter to generate chart
- How can I use variable in Highchart?
- Customize Stacked column chart in highChart
- Graph not rendering series correctly using angular 4
- Highcharts: legend of stacked chart
- Highcharts dataLabels allowOverlap not working