Open bhavesh-shahu opened 4 years ago
This is jsfiddle map with overlaid pie chart. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/
The basic map chart is working. But not loading the pie chart on a map. How I can use this function in the chart config.
Highcharts.each(chart.legend.allItems, function(item) { var old = item.setVisible; item.setVisible = function() { var legendItem = this; old.call(legendItem); Highcharts.each(chart.series[0].points, function(point) { if (chart.colorAxis[0].dataClasses[point.index].name === legendItem.name) { // Find this state's pie and set visibility Highcharts.find(chart.series, function(item) { return item.name === point.id; }).setVisible(legendItem.visible, false); } }); chart.redraw(); }; });
Highcharts.each(chart.series[0].points, function(state) { if (!state.id || !state.properties) { return; // Skip points with no data, if any }
// var pieOffset = state.pieOffset || {}, // centerLat = parseFloat(state.properties.latitude), // centerLon = parseFloat(state.properties.longitude); // Add the pie for this state chart.addSeries({ type: 'mappie', name: state.id, zIndex: 6, sizeFormatter: function() { var yAxis = this.chart.yAxis[0], zoomFactor = (yAxis.dataMax - yAxis.dataMin) / (yAxis.max - yAxis.min); return Math.max( this.chart.chartWidth / 45 * zoomFactor, // Min size this.chart.chartWidth / 11 * zoomFactor * state.total / 100 ); }, tooltip: { // Use the state tooltip for the pies as well pointFormatter: function() { return state.series.tooltipOptions.pointFormatter.call({ id: state.id, villages: state.villages, provinces: state.provinces, states: state.states, countries: state.countries, total: state.total }); } }, data: [{ name: 'Training sessions at villages', y: state.villages, color: "cyan" }, { name: 'Training sessions at provinces', y: state.provinces, color: "blue" }, { name: 'Training sessions at states', y: state.states, color: "green" }, { name: 'Training sessions at countries', y: state.countries, color: "yellow" }], center: { plotX: state.plotX, plotY: state.plotY } }, false); });
Help is highly appreciated.
This is jsfiddle map with overlaid pie chart. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/
The basic map chart is working. But not loading the pie chart on a map. How I can use this function in the chart config.
Highcharts.each(chart.legend.allItems, function(item) { var old = item.setVisible; item.setVisible = function() { var legendItem = this; old.call(legendItem); Highcharts.each(chart.series[0].points, function(point) { if (chart.colorAxis[0].dataClasses[point.index].name === legendItem.name) { // Find this state's pie and set visibility Highcharts.find(chart.series, function(item) { return item.name === point.id; }).setVisible(legendItem.visible, false); } }); chart.redraw(); }; });
Highcharts.each(chart.series[0].points, function(state) { if (!state.id || !state.properties) { return; // Skip points with no data, if any }
Help is highly appreciated.