jQuery UI Widgets Forums Chart Charts display and

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Charts display and #80221

    sonicviz
    Participant

    Hi,
    In WordPress using theme 2013 charts display fine. All is ok.

    Now I changed to 2016 theme and this element <td id=”tdLeft”></td> is suddenly 316 pixels wide causing the charts to be pushed right off screen.
    Any idea of what I can do about it?

    Edit:
    I changed to renderEngine: ‘HTML5’, and they display properly.
    It looks like it was defaulting to svg and when in svg the tdleft gets resized pushing the charts left.

    I’d still like to know why as I’m not sure of the difference in browser capabilities between HTML5 and default svg

    The full chart code is below. I’d upload an image but it doesn’t look like you can add images to posts.

    
    <div id="chartContainer" style="width: 95%; height: 400px; cursor: default;"><table id="tblChart" cellspacing="0" cellpadding="0" border="0" align="left" valign="top"><tbody><tr><td colspan="2" id="tdTop"></td></tr><tr><td id="tdLeft"></td><td><div class="chartContainer" style="position: relative; width: 676px; height: 400px;" onselectstart="return false;"><svg id="svgChart" version="1.1" width="100%" height="100%" overflow="hidden"><defs><clipPath id="cl1452233490965_1"><rect x="1" y="1" width="675" height="399" fill="none"></rect></clipPath><clipPath id="cl1452233490965_2"><rect x="89" y="-1" width="587" height="21" fill="none"></rect></clipPath><clipPath id="cl1452233490965_3"><rect x="89" y="18" width="587" height="17" fill="none"></rect></clipPath><clipPath id="cl1452233490965_4"><rect x="1" y="43" width="16" height="310" fill="none"></rect></clipPath><clipPath id="cl1452233490965_5"><rect x="47" y="44" width="630" height="307.5" fill="none"></rect></clipPath></defs><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_1)"><rect x="1.5" y="1.5" width="673" height="397" fill="#FFFFFF" stroke-width="1" stroke="#BCBCBC"></rect><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_2)"><text class="jqx-chart-title-text" cursor="default" x="355" y="15" width="56" height="11">Weight</text></g><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_3)"><text class="jqx-chart-title-description" cursor="default" x="342" y="31" width="81" height="9">Weight in kgs</text></g><text class="jqx-chart-axis-text" cursor="default" x="19" y="367" width="60" height="8">1-Jul-2015</text><text class="jqx-chart-axis-text" cursor="default" x="534" y="367" width="74" height="8">30-Aug-2015</text><line x1="49.5" y1="351.5" x2="676.5" y2="351.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><g><rect x="277.5" y="381.5" width="10" height="10" fill="#287CDF" fill-opacity="1" stroke="#2576D5" stroke-width="1" stroke-opacity="1"></rect><text class="jqx-chart-legend-text" cursor="default" x="293" y="391" width="37" height="8">Target</text></g><g><rect x="344.5" y="381.5" width="10" height="10" fill="#AF413E" fill-opacity="1" stroke="#A4403D" stroke-width="1" stroke-opacity="1"></rect><text class="jqx-chart-legend-text" cursor="default" x="360" y="391" width="39" height="8">Weight</text></g><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_4)"><g transform="translate(13,237)"><g transform="rotate(-90)"><text class="jqx-chart-axis-description" cursor="default" x="0" y="0" width="77" height="8">Weight in kgs</text></g></g></g><text class="jqx-chart-axis-text" cursor="default" x="18" y="48" width="25" height="8">81.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="70" width="25" height="8">80.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="92" width="25" height="8">79.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="114" width="25" height="8">78.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="136" width="25" height="8">77.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="158" width="25" height="8">76.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="180" width="25" height="8">75.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="202" width="25" height="8">74.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="224" width="25" height="8">73.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="246" width="25" height="8">72.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="268" width="25" height="8">71.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="290" width="25" height="8">70.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="312" width="25" height="8">69.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="334" width="25" height="8">68.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="356" width="25" height="8">67.0</text><line x1="49.5" y1="44" x2="49.5" y2="351.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="351.5" x2="45" y2="351.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="329.5" x2="45" y2="329.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="307.5" x2="45" y2="307.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="285.5" x2="45" y2="285.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="263.5" x2="45" y2="263.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="241.5" x2="45" y2="241.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="219.5" x2="45" y2="219.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="197.5" x2="45" y2="197.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="175.5" x2="45" y2="175.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="153.5" x2="45" y2="153.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="131.5" x2="45" y2="131.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="109.5" x2="45" y2="109.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="87.5" x2="45" y2="87.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="65.5" x2="45" y2="65.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="43.5" x2="45" y2="43.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49.5" y1="351.5" x2="49.5" y2="355.5" stroke="#888888" stroke-width="1" stroke-dasharray=""></line><line x1="570.5" y1="351.5" x2="570.5" y2="355.5" stroke="#888888" stroke-width="1" stroke-dasharray=""></line><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_5)"><path d="M 50.5,79.5 L 50.5,79.5 50.5,79.5 135.5,94.5 188.5,89.5 196.5,89.5 240.5,69.5 257.5,79.5 266.5,69.5 283.5,89.5 405.5,94.5 457.5,89.5 466.5,89.5 509.5,69.5 527.5,79.5 535.5,69.5 553.5,89.5 640.5,179.5 648.5,278.5 675.5,129.5" stroke-width="3" stroke="#A4403D" stroke-opacity="1" fill-opacity="1" stroke-dasharray="" fill="none"></path></g></g></svg></div></td></tr></tbody></table></div>
    • This topic was modified 8 years, 6 months ago by  sonicviz.
    Charts display and #80290

    Dimitar
    Participant

    Hi sonicviz,

    Maybe the 2016 theme applies custom CSS to td elements? You can try overriding it with your own CSS or use the solution you have already found – renderEngine: 'HTML5' (which makes use of the HTML canvas and does not create a structure like the one you posted).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.