0

I'm working on getting a pie chart to display within a pop-up on a Leaflet map, visualizing the data from the GeoJSON within the pie chart.

mygeojson.on('popupopen', function (e) {

      var data = {
      labels: [
        "Yes",
        "No",
      ],
      datasets: [{
        data: [10,20],
        backgroundColor: [
          "#FF6384",
          "#36A2EB"
        ],
        hoverBackgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }]
    };
    var ctx = $("#myChart");
    var myChart = new Chart(ctx, {
      type: 'pie',
      data: data
    });
      });

This creates a pie chart within the popup, using the data "10, 20". However, I want the pie chart to be using the data from my GeoJSON layer and displaying that, using the feature that the popup was rendered from.

I have tried doing:

mygeojson.on('popupopen', function (e) {

              var data = {
              labels: [
                "Yes",
                "No",
              ],
              datasets: [{
                data: [e.feature.properties.field1, e.feature.properties.field2],
                backgroundColor: [
                  "#FF6384",
                  "#36A2EB"
                ],

With no luck. I have also tried replacing "e" with "layer" with no luck.

I am a beginner when it comes to JavaScript obviously, but I imagine what I would want to do here is utilize an onclick event to create a variable holding an integer from the field I want, using the feature.properties. I just have no idea how to get that started.

I am using chart.js to create the chart btw.

  • Please edit your question and add relevant piece of your GeoJSON. – TomazicM Nov 4 at 6:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.