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.