PieChartDataLayer legend issue

[brunodeprez]

Hi,

first of all thanks for the fantastic work.

I am building a map with pie charts using a PieChartDataLayer. The radius of the pie depends on the sum of all the element of the pie (the bigger the pie, the bigger the sum of data inside it).

Everything works except the legend.

When I use getLegend() on my layer, I only have the different pie colors, but not the radius itself, just like in election2012 example.

How could I have the pie colors AND the radius size like in conflictData example?

My layer options object so far:

var options = { recordsField: null, locationMode: L.LocationModes.LATLNG, latitudeField: 'latitude', longitudeField: 'longitude', layerOptions: { fillOpacity: 1, opacity: 1, }, displayOptions: { 'data.sum': { radius: radiusFunction, displayName: 'TOTAL' } }, chartOptions: { 'data.skj_tot': { 'displayName': 'SKJ TOT', 'fillColor': "#3366FF", }, 'data.yft_tot': { 'displayName': 'YFT TOT', 'fillColor': "#EFFF00", }, 'data.bet_tot': { 'displayName': 'BET TOT', 'fillColor': "#FF0000", }, }, tooltipOptions: { iconSize: new L.Point(80, 55), iconAnchor: new L.Point(-5, 55) }

Thanks,
Bruno

[zcei]

Hi Bruno,

first, it would be great if you could wrap your code into three backticks (`) - it's more comfortable to read.

The ChartDataLayer still got some bugs (e.g. dynamic color binding), so as a new fan of DVF I'll probably start there for more enhancements. Eventually your problems will be addressed there, too.

As a test you could try using this snippet from the Wiki:

var legendControl = new L.Control.Legend();

legendControl.addTo(map);

Is there still no radius legend?

Best regards,
Stephan

[sfairgrieve]

Bruno,

At the moment, there's no built in way to make the PieChartDataLayer automatically display the radius legend in addition to the category legend. As Stephan was mentioning, there's still a lot of work to be done there. I haven't tried this, but for now, you could implement this yourself by passing in a getLegend option to PieChartDataLayer. In the getLegend method, you could call the code for generating the pie chart legend as well as the normal DataLayer legend code. Here's some code that might work (completely untested):

var pieChartLayer = new L.PieChartDataLayer(data, {
     ...
     getLegend: function (legendOptions) {
          // Call ChartDataLayer _getLegend
          var chartLegend = L.ChartDataLayer.prototype._getLegend.call(this, legendOptions);

          // Add code for calling DataLayer _getLegend
          var dataLayerLegend = L.DataLayer.prototype._getLegend.call(this, legendOptions);

          // Combine legend HTML as necessary
          var $legend = $('<div></div>');
          $legend.append(chartLegend);
          $legend.append(dataLayerLegend);

          return $legend.wrap('<div/>').parent().html();
     }
});

I'll include a fix in the next push that will make this work, but let me know if the temporary workaround makes sense and actually works.

Thanks,

Scott

[brunodeprez]

Hi Scott,

your completely untested code worked perfectly without any modifications!

Thanks a lot!

Bruno