From the example on their site:
Paste this in an html panel:
<div id="example">
<div class="demo-section k-content wide">
<h4>Sales statistics</h4>
<div id="chart-oct"></div>
<div id="chart-nov"></div>
<div id="chart-dec"></div>
</div>
<div class="box wide">
<div class="box-col">
<h4><input type="checkbox" id="dynamicSlope"/> Dynamic Slope</h4>
<i>The slope for each segment depends on the ratio between the current and the next value</i>
</div>
<div class="box-col">
<h4><input type="checkbox" id="dynamicHeight"/> Dynamic Height</h4>
<i>The height of the segment is the overall percentage for that dataItem</i>
</div>
<div class="box-col">
<h4>Neck Ratio</h4>
<ul class="options">
<li><input id="neckSlider" value="0.3"/></li>
</ul>
<i>The ratio between the bases of the whole funnel element</i>
</div>
</div>
</div>
Paste this in render script:
var octData = [{
category: "Impressions ",
value: 434823,
color: "#0e5a7e"
},{
category: "Clicks",
value: 356854,
color: "#166f99"
},{
category: "Unique Visitors",
value: 280022,
color: "#2185b4"
},{
category: "Downloads",
value: 190374,
color: "#319fd2"
},{
category: "Purchases",
value: 120392,
color: "#3eaee2"
}];
var novData = [{
category: "Impressions ",
value: 984528,
color: "#0e5a7e"
},{
category: "Clicks",
value: 856287,
color: "#166f99"
},{
category: "Unique Visitors",
value: 643694,
color: "#2185b4"
},{
category: "Downloads",
value: 567843,
color: "#319fd2"
},{
category: "Purchases",
value: 389137,
color: "#3eaee2"
}];
var decData = [{
category: "Impressions ",
value: 1200528,
color: "#0e5a7e"
},{
category: "Clicks",
value: 989287,
color: "#166f99"
},{
category: "Unique Visitors",
value: 885694,
color: "#2185b4"
},{
category: "Downloads",
value: 788843,
color: "#319fd2"
},{
category: "Purchases",
value: 694137,
color: "#3eaee2"
}];
function createChart(chartName,data,text){
$('#'+chartName).kendoChart({
title: {
text: text,
position: "bottom"
},
legend: {
visible: false
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
color:"white",
format: "N0"
},
dynamicSlope: false,
dynamicHeight: false
},
series: [{
type: "funnel",
data: data
}],
tooltip: {
visible: true,
template: "#= category #"
}
});
}
function refresh() {
var slider = $('#neckSlider').data("kendoSlider");
var chartNames = ["chart-oct", "chart-nov", "chart-dec"];
for (var idx in chartNames) {
var chart = $("#" + chartNames[idx]).data("kendoChart");
var options =
{
seriesDefaults: {
neckRatio: slider.value(),
dynamicHeight : $('#dynamicHeight').is(':checked'),
dynamicSlope : $('#dynamicSlope').is(':checked'),
labels: {
visible: true,
background: "transparent",
color:"white",
format: "N0"
},
}
}
chart.setOptions(options);
slider.enable(!options.seriesDefaults.dynamicSlope);
}
}
function createCharts() {
createChart('chart-oct', octData, "October");
createChart('chart-nov', novData, "November");
createChart('chart-dec', decData, "December");
}
$(document).ready(function () {
$("#neckSlider").kendoSlider({
change: refresh,
value: 0.3,
min: 0,
max: 10,
smallStep: 0.01,
largeStep: 0.1,
showButtons: false
});
createCharts();
$('.box').on('click', ':checkbox', refresh);
$(document).bind("kendo:skinChange", createCharts);
});
Paste this in a custom.css file:
.demo-section {
text-align: center;
}
#chart-oct,
#chart-nov,
#chart-dec {
display: inline-block;
width: 180px;
height: 300px;
margin: 15px 65px;
}
.box-col
{
width:25%;
}
All works for me...
You can obviously reference some Aware IM attributes in the render script rather than static values.
