A negative value for svg attribute <width> is not allowed

Question

I am trying to draw two google treemaps and keep them in tabs and am getting the error:

A negative value for svg attribute <width> is not allowed

Only one of the treemaps is visible. I am assuming the other one is not able to finish drawing. There is no other description of the error in the console. (Google chrome).

My code: http://jsfiddle.net/tTqjr/

Clavate

Have you checked for negative weight values already? – Kuibyshev

Not sure I understood your question. I can draw both the treemaps if I remove the code which is trying to "tabify" them. – Clavate

Answer 1

Solved the problem. The div element on which Google Annotated timeline was being created had display:none property. Just made sure that display:none is changed to display:block before calling the draw function.

Clavate

This has just solved the same issue with angularjs. Thanks! – Nannana

I had a google.visualization.PieChart in a div with CSS border: 1px solid; which was causing the same issue. Removing it cured the problem! – Randers

Answer 2

Appreciate this wasn't the OP's issue, but I had the same error, and setting display: block; didn't make any difference for me, but I had padding-top: 50px; on the div for the chart, and removing that resolved the issue for me!

Trigg

Answer 3

I wrapped my two divs in a boostrap row/col pair to solve and togglke them with hide()/show()/toggle() buttons.

From

<div class="row">
    <div class="col-md-12" id="chart_div">
    </div>
</div>
<div class="row">
    <div class="col-md-12" id="chart_div2">
    </div>
</div>

to:

<div class="row">
    <div class="col-md-12">
        <div id="chart_div">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div id="chart_div2">
        </div>
    </div>
</div>

Videlicet