Sparkline height not getting set when used in DotNetNuke

2 posts, 0 answers
  1. Andy Grimes
    Andy Grimes avatar
    7 posts
    Member since:
    Aug 2007

    Posted 03 Apr 2013 Link to this post

    I want to use the Sparkline functionality within a dashboard web page using the DotNetNuke 6.2 framework.

    When I use the sample code snippet below within the DNN framework the height of the sparkline is rendered as 14px.  When I use the same code in a stand alone html file it renders at the specified 50px.  There are no javascript errors thrown in either case.

    My only thought is that an internal error is occurring when attempting to find the height and the default render height is 14px.  Debugging the spark line java script using the minimized js files is not working for me.

    HTML to render:

    <div class='k-content' style='position: relative; width:400px; height:275px;'>
    <table style='height: 100%; vertical-align: top;'>
      <tr>
        <td style="width:150px; text-align:middle; line-height: 50px;">
            <span id='htmlsparkline_32ac' style="width: 150px; height: 50px; "></span>
        </td>
        <td style="width:40%; text-align:left;"><span class='ads-summaryvalue'>56795</span>  
          <span>Refund</span></td>
        </tr>
    </table>
    </div>
     
    <script type="text/javascript">
        try {
            $('#htmlsparkline_32ac').kendoSparkline({ data: [1069, 8792, 7078, 6355, 8078, 8066, 9293, 3296, 7559, 56795], type: 'area', theme: 'black' });
        } catch (e) { alert('SparkError: ' + e.message); }
    </script>

    Code Rendered by kendoSparkline, starting on line 02.

    01.<span class="k-sparkline" id="htmlsparkline_32ac" style="width: 150px; height: 50px; position: relative; -ms-touch-action: double-tap-zoom pinch-zoom;" data-role="sparkline">
    02.<span style="width: 150px; height: 14px;">
    03.<!--?xml version='1.0' ?-->
    04.<svg xmlns="http://www.w3.org/2000/svg" style="left: -0.81px; top: -0.83px; display: inline; position: relative;" width="150px" height="14px" version="1.1">
    05.<defs id="k10027" />
    06.<path style="display: block;" fill="#3d3d3d" fill-opacity="1" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0" d="M 0 0 L 150 0 L 150 14 L 0 14 Z" />
    07.<path style="display: block;" fill="none" fill-opacity="1" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" />
    08.<path id="k10026" style="display: none;" fill="none" fill-opacity="1" stroke="#8e8e8e" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="1" d="M 2 2 L 2 11" />
    09.<path id="k10000" style="display: block;" fill="#fff" fill-opacity="0" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" data-model-id="k10001" />
    10.<g id="k10002"><g>
    11.<path id="k10024" style="display: block;" fill="#0081da" fill-opacity="0.4" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 11 L 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698 L 147 11" data-model-id="k10025" />
    12.<path style="display: block;" fill="none" fill-opacity="1" stroke="#0081da" stroke-linecap="butt" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.5" d="M 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698" data-model-id="k10025" />
    13.</g></g>
    14.</svg>
    15.</span>
    16.<div class="k-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(0, 129, 218); left: 34px; top: -15px; display: none; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(0, 129, 218);">
    17.<table><tbody><tr><th colspan="2"></th><tr><td>7078</td></tr></tbody></table>
    18.</div>
    19.</span>

    On line 2 and 4 the height is set to 14px.

    Any help would be appreciated.

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Apr 2013 Link to this post

    Hello Andy,

    Generally speaking, the height of the sparkline is set via line-height CSS rule, not a height one (docs).
    <span id="htmlsparkline_32ac" style="width: 150px; line-height: 50px;"></span>

    In your case the line-height is derived from the parent td element. Probably the DDN framework modifies the applied styling. Please try to set line-height directly of the span element.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top