Sparkline height not getting set when used in DotNetNuke

[Andy Grimes]

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.

[Alexander Valchev]

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