score:1
Accepted answer
First of all, you need to convert your data to a readable format for Highcharts.
API: https://api.highcharts.com/highmaps/series.map.data
For example, create separate arrays for each year:
let data2015 = [
['py-ag', 10, 20, 30],
['py-bq', 40, 50, 60]
];
let data2016 = [
['py-ag', 15, 25, 35],
['py-bq', 45, 55, 65]
];
The additional data needs to be connected to the chart, by the series.keys
:
API: https://api.highcharts.com/highcharts/plotOptions.series.keys
plotOptions: {
series: {
keys: ['hc-key', 'total', 'hombre', 'mujer']
}
Then, you can easily refer to this data in the tooltip.formatter
API: https://api.highcharts.com/highcharts/tooltip.formatter
tooltip: {
formatter: function() {
let point = this.point;
return '<b>' + point.name + '</b><br>' + 'Total: ' + point.options.total + '<br>' + 'Hombre: ' + point.options.hombre + '<br>' + 'Mujer: ' + point.options.mujer
}
}
For updating data by drop-down list use series.update
method:
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
document.getElementById('select').onchange = function() {
let option = this.value;
if (option === 'data2015') {
chart.series[0].update({
data: data2015,
name: '2015'
});
}
if (option === 'data2016') {
chart.series[0].update({
data: data2016,
name: '2016'
});
}
};
Source: stackoverflow.com
Related Articles
- Highmaps js, on Hover display additional data
- Highcharts display label for pie chart using html table as data source
- highcharts highmaps parsing json data to display world map with rich info
- Include additional highcharts source data in angular2 app
- Set Additional Data to highcharts series
- Add additional data to a Highcharts series for use in formatters
- Always display data labels above columns in HighCharts
- How to display No Data Available Message in highcharts
- Highcharts doesn't display series with lots of data points
- How to display highchart y axis with constistant data
- Add additional data to Pie Tooltip on Highcharts
- Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart
- Add additional data to point using DotNet.Highcharts
- Highcharts - Global configuration with common code and unique data & Headings
- Django - can't get highchart to display data
- Expose additional data based on xAxis element click - Highcharts.js
- Highcharts shows data but can't display chart
- Using Highcharts display donut hightchart having dynamic data
- Highcharts Custom display of tooltips, based on data series values
- Displaying Points And Drilldown Data in Highmaps
- Highstock tooltip Formatter not able to display extra data
- Display blank space if data is not present for a particular date
- highcharts show additional custom data in tooltip
- Highchart - Display JSON Data - MYSQL / PHP
- Highcharts won't display data
- how to display 2 same highcharts without duplicate the code
- Setting additional point attributes in HighStock time series with large data sets
- Highcharts Scatter Chart Data Point Hover
- Highmaps : Custom data label on world map
- angularjs and highcharts, labels not shown unless I hover over the data points
- How to get current drilldown's id in Highcharts
- Highcharts Image click event
- How to let x axis title still show on the bottom when setting fontsize attribute in Highcharts
- highcharts pass multiple values to tooltip
- Automatically redraw a highStock chart under Angularjs
- Only one highcharts using react-grid-layout can resize
- How to obtain HighCharts series "id" from "series" elements?
- Changing unit on y-axis from million (M) to show multimillion (MM) in HighCharts
- highchart in popover - bootstrap 4
- Highmaps won't display my GeoJSON lake layer
- Change/Swap Highcharts Data
- Highcharts bubble chart dataLabels overlapping despite z-index
- Synchronized HighCharts does not work when charts have different width
- Issue in drilldown of highcharts multiseries chart
- HighCharts specific chart
- Centering a data label in Highcharts Bar Chart
- How to output JSON in python so it can be used for Geckoboard's Highcharts plugin
- how to add dynamic xaxis category label name in new point highchart
- How to store the drop value as a new data in my array?
- Highcharts: Highmaps - Choropleth maps - All states are the same color