How do I set the width and height for charts? (for use with Visualizer plugin)

1 Views

I have created a bunch of charts using the Visualizer Plugin for WordPress. ( https://sv.wordpress.org/plugins/visualizer/ )

It is possible to set width in both percent and in pixels for each chart using the Visualizer Plugin. Based on the first chart, I want to set width and height of all other charts when JavaScript loads…

Read More

Basically, I want to set the main chart to 100% of the width and height to {x} pixels, and I want all other charts to have the same width and height as the main chart.

The generated html looks something like this… 

<div id="chart-wrapper" style="position:relative;width:100%;height:600px;">
    <div id="visualizer-100"></div>
    <div id="visualizer-101"></div>
    <div id="visualizer-102"></div>
    <div id="visualizer-103"></div>
</div>

The charts must be set to the same location, so I set position:absolute on the visualizer-{x} divs. The visualizer divs are created by the plugin and it uses SVG/HTML5 to create the charts for the divs it has created.

I tried this to set width and height of the div(s), but I don’t understand why the width is set to: 0px. Can someone give me a hint / explain why? 

$.each(chart, function( chartname, index ) {

    //Visualizer-100 is the main chart
    var w = $("#visualizer-100").css('width'); 
    var h  = $("#visualizer-100").css('height');
    console.log(w); //Outputs 727px in console

    $("#visualizer-" + index)
        .css('position','absolute')
        .css('left','0px')
        .css('top','0px')
        .css('width', w)
        .css('height', h);

    console.log( $("#visualizer-" + index).css('height') );
    //outputs 0px. WHY????

}

UPDATE:
Question: Is your intent to place all of the visualizer-{x} child elements in the same location, at the upper left corner of the #chart-wrapper parent element? Yes, this is because when I hover over any chart that chart is shown over the main chart (with a transparent background).

Clarification (I wasn’t trying to focus on either width or height. I want them both to work) 

var w = $("#visualizer-100").css('width');
var h  = $("#visualizer-100").css('height');
console.log(w); //Outputs 727px in console
console.log(h); //Outputs 0px. WHY? The actual genereated height is 300px. This height is set by the Visualizer plugin. I've tried setting with both 300 and 300px in the plugin settings, but it does not seem to matter which I choose.

    $("#visualizer-" + index)
        .css('position','absolute')
        .css('left','0px')
        .css('top','0px')
        .css('width', w)
        .css('height', h);

console.log('width and height applied to #visualizer-' + index);
console.log( $("#visualizer-" + index).css('width') ); //727px correctly
console.log( $("#visualizer-" + index).css('height') ); //0px. Of course this is 0 because the origin is 0px, but why is the origin 0?

After some digging I see that widths are set correctly, but not height. It doesn’t seem to retrieve the actual height value of the chart height but instead it retrieves 0px.

The html that is generated for a specific chart looks like this… (if it helps) 

<div id="visualizer-100">
<div style="position: relative;">
<div dir="ltr" style="position: relative; width: 727px; height: 200px;">
<div aria-label="Ett diagram." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="727" height="200" aria-label="Ett diagram." style="overflow: hidden;">
<defs id="defs">
<clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="58" y="38" width="669" height="124">
</rect>
</clipPath>
</defs>
<rect x="0" y="0" width="727" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect>
<g><rect x="58" y="38" width="669" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
<g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g>
<rect x="58" y="161" width="669" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect>
<rect x="58" y="130" width="669" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="58" y="100" width="669" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="58" y="69" width="669" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="58" y="38" width="669" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g>
<g><rect x="58" y="100" width="669" height="1" stroke="none" stroke-width="0" fill="#000000"></rect></g>
<g><path d="M125.3,100L258.9,117.22L392.5,106.765L526.0999999999999,-18.079999999999984L659.6999999999999,54.489999999999995" stroke="#afafaf" stroke-width="2" fill-opacity="1" fill="none"></path></g></g>
<g></g><g><g><g>
<text text-anchor="middle" x="125.3" y="153.2" font-family="" font-size="12" stroke="#ffffff" stroke-width="3" fill="#222222" aria-hidden="true">2010</text>
<text text-anchor="middle" x="125.3" y="153.2" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#222222">2010</text></g></g>
<g><g><text text-anchor="middle" x="258.9" y="153.2" font-family="" font-size="12" stroke="#ffffff" stroke-width="3" fill="#222222" aria-hidden="true">2011</text><text text-anchor="middle" x="258.9" y="153.2" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#222222">2011</text></g></g><g><g><text text-anchor="middle" x="392.5" y="153.2" font-family="" font-size="12" stroke="#ffffff" stroke-width="3" fill="#222222" aria-hidden="true">2012</text><text text-anchor="middle" x="392.5" y="153.2" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#222222">2012</text></g></g><g><g><text text-anchor="middle" x="526.0999999999999" y="153.2" font-family="" font-size="12" stroke="#ffffff" stroke-width="3" fill="#222222" aria-hidden="true">2013</text><text text-anchor="middle" x="526.0999999999999" y="153.2" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#222222">2013</text></g></g><g><g><text text-anchor="middle" x="659.6999999999999" y="153.2" font-family="" font-size="12" stroke="#ffffff" stroke-width="3" fill="#222222" aria-hidden="true">2014</text><text text-anchor="middle" x="659.6999999999999" y="153.2" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#222222">2014</text></g></g><g><text text-anchor="end" x="55.75" y="165.7" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#444444">-100</text></g><g><text text-anchor="end" x="55.75" y="134.95" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#444444">-50</text></g><g><text text-anchor="end" x="55.75" y="104.2" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="55.75" y="73.45" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#444444">50</text></g><g><text text-anchor="end" x="55.75" y="42.7" font-family="" font-size="12" stroke="none" stroke-width="0" fill="#444444">100</text></g></g></g><g><g><text text-anchor="middle" x="392.5" y="185.2" font-family="" font-size="12" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Jahr</text></g><g><text text-anchor="middle" x="12.45" y="100" font-family="" font-size="12" font-style="italic" transform="rotate(-90 12.45 100)" stroke="none" stroke-width="0" fill="#222222">Prozent in</text><text text-anchor="middle" x="26.7" y="100" font-family="" font-size="12" font-style="italic" transform="rotate(-90 26.7 100)" stroke="none" stroke-width="0" fill="#222222">Veränderung</text></g></g><g></g></svg><div aria-label="Data i diagrammet  i tabellform." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th></th><th>Deutschland</th></tr></thead><tbody><tr><td>2010</td><td>0</td></tr><tr><td>2011</td><td>-28</td></tr><tr><td>2012</td><td>-11</td></tr><tr><td>2013</td><td>192</td></tr><tr><td>2014</td><td>74</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 210px; left: 737px; white-space: nowrap; font-size: 12px; font-weight: bold;">0
</div>
<div>
</div>
</div>
</div>
Post Views: 1

Related posts

1 comment

  1. You don’t mention in your posting what browser/viewer you are using to load your document, but my guess is that your unexpected zero height is at least partially related to your browser/viewer. To give you some comparison data, I copied your specific chart code into an HTML5 document, loaded that into Chrome Version 45.0.2454.101 m (64-bit) on Windows, and the results were different:

    • The #visualizer-100 div has height: 200px and width: 1333px.
    • The <div dir="ltr" style="position: relative; width: 727px; height: 200px;"> element has height: 200px and width: 727px.
    • The <svg width="727" height="200" aria-label="Ett diagram." style="overflow: hidden;"> element has height: 200px and width: 727px.

    But beyond any possible browser issues, the use of SVG is also part of the problem; in many ways it creates a document of one type embedded within a document of another (SVG within HTML). This is acceptable of course, but the rules for SVG styling are different than the rules for HTML styling. There are 2 key differences that are important for your document:

    SVG Doesn’t Follow CSS Box Model Rules

    The layout isn’t based on a set of rectangles that structurally flow through the document and standard CSS properties such as: border, padding, margin, or box-sizing don’t strictly apply to SVG. For reference, the SVG spec includes its own list of SVG styling properties.

    SVG Elements Don’t Follow CSS Positioning Rules

    CSS properties such as position and z-index stacking don’t apply to SVG elements (but display and overflow are supported). The position property is a key aspect of your current #visualizer-{x} element layout; but since the position property (unfortunately) doesn’t apply to the SVG element(s), that is where I suggest you start. There may be Visualizer Plugin options that do not generate SVG markup or you may be able to use the SVG specific style properties (referenced by the link above) to adjust your layout so that the position property is unnecessary.

    Also, you may want to look at the caniuse SVG support matrix to see if that helps to clarify your options for moving forward.

Comments are closed.