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
- Append a Jade file to a div in parent Jade file on Button click
- Redraw Highcharts Organization Chart after collapse
- Apache Zeppelin - Highcharts
- Reversed series on bar chart with data loaded from table
- Set a custom rangeSelector and disable xAxis label on chart and on Navigator with Highstock
- highchart updating plotOptions
- How to hide series name from tooltip in Highcharts scatter plots for linear regression
- how to show specific tick value on highchart gauge?
- Saving images from HTML5 canvas directly
- Highcharts linearGradient fill with fixed upper bound
- High Chart - columnrange Type depending on months
- (Highcharts) button inside tooltip can't trigger
- Highcharts Dynamic different time calculate
- how to place same highcharts series beside each other
- Combine PieChart with Map
- Highcharts series names in datalabel
- Highcharts - Pass a dictionary as data for a timeline series
- Highcharts: SeriesMapping with CSV
- Angular / Jquery selectors result an error when running Protractor
- Add values to rCharts hPlot tooltip
- How to remove plot gridlines using Highcharts in R
- Highstock rangeSelector from days in the future
- HighCharts isn't working
- Highcharts how to add treemap upon click event on line chart?
- Highcharts Populating Realtime Data with Time
- highcharts shows exception "c is undefined" for pie chart
- What is the solution for Highcharts hover
- When i use highcharts then my DataTable lost his functionality.
- Is there a way to add a custom tooltip to the second level columns of the drilldown on highcharts?
- Highcharts : Change color of series when hovering other series