score:7
To use latitude and longitude you need to include Proj4js. Also, you need to either do manual conversion between coordinate systems, or be using maps from the Highmaps map collection. For example:
<script src="http://.../proj4.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
In your case the drilldown example wraps the Highchart.maps
in Highcharts.geojson
to include extra attributes (drilldown
and value
), like this:
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
$('#container').highcharts('Map', {
// ...
series : [{
data : data,
name: 'USA'
}]
});
This seems to cause Highmaps to not recognize the map as one from the collection, and you are therefor not allowed to use latitude and longitude with this method.
Instead, you can use Highcharts.maps
as it is, and use both mapData
and data
with joinBy
to attach extra data that way, while keeping the latitude/longitude functionality, like this:
var myData = [{
"hc-key": "us-ma",
"value": 1
}];
$('#container').highcharts('Map', {
// ...
series : [{
data : myData,
mapData : Highcharts.maps['countries/us/us-all'],
joinBy: 'hc-key',
name: 'USA'
}]
});
Unfortunately, in using this technique on two levels (top and drilldown) and your additional point-series I encountered all kinds of problems. Strangely including the same information in both data
and mapData
seem to avoid them, so I ended up with this approach:
var mapData = Highcharts.maps['countries/us/us-all'],
myData = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
$.each(myData, function (i) {
this['hc-key'] = this.properties['hc-key'];
this.drilldown = this.properties['hc-key'];
this.value = i;
});
$('#container').highcharts('Map', {
// ...
series : [{
data : myData,
mapData : mapData,
joinBy: 'hc-key',
name: 'USA'
}]
});
See this updated JSFiddle of how it currently looks with drilldown, latitude/longitude support and point series.
I'll also include this JSFiddle, which uses the more standard data
approach (instead of cloning mapData
), but has all kinds of problems which I'm not quite sure why they happen.
Source: stackoverflow.com
Related Query
- Displaying Points And Drilldown Data in Highmaps
- Highcharts data module and CSV: Displaying data points differently
- Using Highcharts and displaying a message over or on the chart when there is no data
- Highcharts - Global configuration with common code and unique data & Headings
- Make Highchart and Highstock Have a Uniform Time X-Axis for Disparate Data Points
- angularjs and highcharts, labels not shown unless I hover over the data points
- Highstock, True way of Get count of shown points after setExtreme (Zooming) - WITHOUT counting all data with MIN and MAX
- Displaying dynamic data using charts and graphs in ruby on rails
- Multiple data series and multiple data tooltip with HighMaps
- Formatting data points and Y-axis labels using HighCharts
- Have an issue with JavaScript, AJAX code displaying data
- Combining Preprocessed data and drilldown in Highcharts
- HighMaps Not displaying Country Data
- How to show values in Highcharts tooltip other than x and y when data points are too high?
- Highcharts displaying improperly labeled data points
- Highcharts.js column chart labels and data not displaying properly after 60 columns
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- Loading data to Highchart from MySQL and displaying in appropriate way
- Highmaps add and join data from Google Spreadsheet
- Javascript - Highchart - tooltip position of data points and flags
- Avoid displaying y axis label and points when there is no data: HIghcharts
- Dynamically adjust Y axis min/max based on ajax update and data points in Highcharts
- Highcharts: Combined line and column chart - start / end line on left / right side, not on column chart data points
- how to map serial and data points using json Array
- Highcharts: how to group data points and display the total accordingly?
- Group data points by third variable and display the group name in legend
- Highcharts prevent page on mobile Safari from moving up and down as I scroll horizontally through data points
- Highcharts Maps - Displaying data on Highmaps
- I have no direct access to code but wonder if I can append my chart data points to a log file
- Getting cursor position and relevant data from Highmaps
More Query from same tag
- How to specify a start point on highcharts stacked bar charts
- Changing baseSeries dynamicilly
- Php to JSON passed thru to high charts
- Parsing CSV data into JS Objects to use in chart. Uncaught ReferenceError: data is not defined(jsfiddle included)
- Error: GET http://mywebsite.com/tmp/highchart_oqoCdS 403 (Forbidden)
- remove series by name or id in highcharts
- Starting Time Series Highcharts Plot at specific date/time
- How to center text vertically in a custom highcharts button
- custom GeoJSON map with pie in highcharts Map
- How can I take a backingbean GSON string to Highcharts
- How can i loop data in highcharts
- Highcharts on zeppelin 0.6.0 executes but does not display any chart
- Displaying multiple graphs on one page using lazy high charts
- Can you make an eeg chart with highchart?
- build a "double divergent" axis title in HighCharts
- Bar highchart just shows one value of my array
- Using a fill pattern instead of colour with HighCharts
- How do i add mouse wheel code in Angular2 highcharts in typescript
- How can I get treemap datalabels to wrap consistently?
- highcharts show tooltip on point click
- multiple series in Highcharter R stacked barchart
- HighCharts performance degrades dramatically with 'chart' and 'renderer' together
- Highchart inner donut name as header for outer donut tooltip
- how to reduce/increase gap between horizontal legends- highcharts
- How to show series dataLabels inside the Highchart pyramid in angular
- Stacking columns but not lines in same chart highcharts
- React Highmap this.normalizeTimeTickInterval is not a function
- Highcharts polar steps
- Highcharts Line Chart Drill down not working properly
- Highcharts Spline: Custom chart marker, on a staggered interval, across the plotted line?