CODEWITHSUNDEEP
javascripthtmlleafletc3.js
dave_does_not_understand
dave_does_not_understand

Reputation: 115

Chart using c3.js only displays on window change/refresh

I believe this may just be a simple HTML formatting issue but I cannot find any solution out there. I am using Leaflet.js with c3 to add some charting to a webmap, see code below. what happens is when a feature is clicked a new window pops up with some information about the point. I have put a pie chart in there comparing a couple of fields. 

onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var numwhite = feature.properties.WHITE / feature.properties.POP2000;
      var numblack = feature.properties.BLACK / feature.properties.POP2000;
      var numhisp = feature.properties.HISPANIC / feature.properties.POP2000;
      var nummale = feature.properties.MALES / feature.properties.POP2000;
      var numfemale = feature.properties.FEMALES / feature.properties.POP2000;
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Population (2000)</th><td>" + feature.properties.POP2000 + "</td></tr>" +
      "<tr><th>Population (2007)</th><td>" + feature.properties.POP2007 + "</td></tr>" +
      "<tr><th>Percent White</th><td>" + (numwhite.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Black</th><td>" + (numblack.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Hispanic</th><td>" + (numhisp.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Male</th><td>" + (nummale.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Female</th><td>" + (numfemale.toFixed(2) * 100) + "%</td></tr>" +"<table>"
      ;
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);

          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
            stroke: false,
            fillColor: "#00FFFF",
            fillOpacity: 0.7,
            radius: 10
          }));
          c3.generate({
            data: {
              // iris data from R
              columns: [
              ['Percent Male', nummale],
              ['Percent Females', numfemale],
              ],
              type : 'pie'
            }
          });
        }
      });

HTML:

 <div class="modal fade" id="featureModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title text-primary" id="feature-title"></h4>
          </div>
          <div class="modal-body" id="feature-info"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
          <div>
            <div id="chart"></div>
        </div>
      </div>
    </div>

all of that works fine however when the div initally opens I see this: enter image description here

and when I resize the window or open dev tools I see this: enter image description here

the same thing happens on any feature I click, the data will update but I have to resize again to get that handsome pie chart in there.

Upvotes: 0

Views: 1136

Answers (1)

Sean
Sean

Reputation: 15144

Showing the modal is not synchronous; it takes a few seconds before the modal is in place correctly.

I'd imagine the C3/D3 can't render the item correctly because the element it is rendering into is not visible or in a valid css "display" mode yet.

So you'd probably need to move your c3.generate code into the shown event callback, something like this:

$('#featureModal').on('shown.bs.modal', function (e) {
  c3.generate( //...etc.
})

Upvotes: 1

Related Questions