Kanak Kanak - 1 year ago 99
Javascript Question

amcharts chart insertion in Leaflet control

I'm coding a website in which i insert a chart in the map canvas, exactly as a legend would be inserted:

<>The graph plotter (cf http://www.amcharts.com/tutorials/your-first-chart-with-amcharts/)

function grapher(chartData) {
var chart = new AmCharts.AmSerialChart();
[...]
chart.addGraph(graph);
chart.write('chartdiv');
return chart;
};


<>The leaflet control (cf http://leafletjs.com/examples/choropleth.html)

var courbe = L.control({position: 'bottomleft'});
courbe.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
div.id = "chartdiv"
div.style = "width: 400px; height: 200px;"
return div;
};


<>

courbe.addTo(map);
grapher(json);


On firefox, everything works fine. And checking the canvas element on firebug shows what desired, that is :

class="width: 400px; height: 200px; overflow: hidden; text-align: left;"


On chrome, the 400px by 200px frame is collapsed, as an empty leaflet control, and analogously :

class="overflow: hidden; text-align: left;"


Has my problem something to deal with this question : amCharts doesn't display chart for initially-hidden divs)

Safari behaves as Chrome. Actually, it only displays correctly with firefox. Why ?

Answer Source

Ok, I simply put the width and height parameters in my customized info css style, as follows :

.info {
    padding: 6px 8px;
    font: 12px/14px courier;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
 +  width: 400px;
 +  height: 200px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download