score:2
The problem here mostly comes down to the use of joinBy
. Also to correct it there are some required changes to your data
and mapData
.
Currently your joinBy
is an array of strings, like ["al", "ak", ...]
. This is quite simply not an accepted format of the joinBy
option. You can read up on the details in the API documentation, but the simplest approach is to have a attribute in common in data
and mapData
and then supply a string in joinBy
which then joins those two arrays by that attribute. For example:
series : [{
data : data,
mapData: mapData,
joinBy: "hc-key",
]
Here the "hc-key"
attribute must exist in both data
and mapData
.
Here's how I'd create the data
variable in your code:
var data = [];
$.each(keys, function (i, key) {
if(i != 0)
data.push({
"hc-key": "us-"+key,
code: key.toUpperCase(),
value: parseFloat(percent[i]),
name: names[i],
row: i
});
});
This skips the first key, which is just "Key"
(the title of the column). Here we make the "hc-key"
fit the format of the "hc-key"
in our map data. An example would be "us-al"
. The rest is just metadata that will be joined in. Note that you were referencing your data in the options prior to filling it with data, so this has to be moved prior to this.
This is how I'd create the mapData
variable in your code:
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
// Process mapdata
$.each(mapData, function () {
var path = this.path,
copy = { path: path };
// This point has a square legend to the right
if (path[1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
// Place the center of the data label in the center of the point legend box
this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
}
// Tag it for joining
this.ucName = this.name.toUpperCase();
});
The first part is your "standard map data". The rest is to correctly center the labels for the popout states, and gotten directly from the example.
And voila, see this JSFiddle demonstration to witness your map in action.
I suggest doing some console.log
-ing to see how data
and mapData
have the hc-key
in common and that leads to the joining of the data in the series.
Source: stackoverflow.com
Related Query
- Data Not Showing in Highcharts
- Highcharts Stock - rangeSelector results are not consistent - 3M showing 5 months data
- Negative values in the data not showing in highcharts linechart
- HighCharts Angular - data from API not showing in chart
- Highcharts convert: not showing pie chart data labels
- Highcharts - JSON series data not showing correctly
- Highcharts stock chart not showing up with custom data
- Highcharts - Indicator's data not showing in line chart
- Highcharts data labels not showing on multiple xAxis and yAxis
- Highcharts Data Not Showing on Ajax Call
- Highcharts Single line series with single data not showing plot
- Data not showing with the Timestamp Values : Highcharts
- Highcharts simple column chart: data not showing
- Highcharts tooltip not showing on unsort data
- Highcharts Error #16: charts not showing on the same page
- Highcharts not displaying data labels for Pie chart in arabic
- Highcharts Pie Chart Drilldown not showing on third drill
- Highcharts not displaying data at some zoom levels
- Highcharts stacked bar chart hide data labels not to overlap
- data label is not shown Highcharts
- Why are the labels for my opposite yaxis in Highcharts not showing up?
- Highcharts line chart tooltips not showing correctly?
- Highcharts spline chart points not showing unless zoomed in
- Highcharts : Showing wrong color in data series
- Legend and Axis titles not showing in Highcharts Graph
- Legend and Axis titles not showing in Highcharts Graph
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts x axis date full range even if there is not enough data
- Highcharts not displaying series data for graph with multiple Y-axes
- highcharts xaxis navigator not showing
More Query from same tag
- How update in real time with highcharts 3 data module?
- How to add html content above series(Chart type - line)
- Highcharts visualization tips
- Highcharts how to make legends as data labels on scatter plot
- In Highcharts, how to create glow/shadow effect inside solidgauge?
- Working with Charts in motion [Animating chart]
- Jinja2: TemplateSyntaxError: Encountered unknown tag
- Highcharts - Stacked bar - Possible to have label interval corresponding to data interval?
- Highcharts Bullet Chart with 2 x axes... possible?
- Highcharts: StockChart initialization with new Highchart
- highcharts gauge chart and the pane option
- Highcharts stop auto-numbering in X-Axis
- Horizontal line on open and high of candlestick in stockchart
- Float and lambda - getting Type Error, a float is required
- Highcharts formatting data labels
- Is there any way in Highcharts to auto show Labels/Text on a scatter chart?
- How do I format x-axis label in highcharts
- How to Export JavaScript Chart to Excel file (HighCharts)
- HighCharts (Stock) Styling Issues (Mobile and Date Selector)
- Clickable HTML element that closes Highcharts tooltip
- Unable to display the chart using Ionic3/2
- highcharts - Remove only legend for colorAxis (keep legend for series)
- how to display 24 hours in xAxis on highcharts?
- Highmaps mappies with drilldown
- Highcharts multiple yaxis plotband collision
- Angular 4 angular2-highcharts week dates
- Highcharts accessibility / VUE.js
- In Highcharts drilldown charts, Custom Formatting of X-Axis label displays the label with underline even in the last level
- Highcharts angular gauge: multiple dials with different colors
- Null points from drilldown remain on screen on subsequent drilldown of a different location