Kendo Funnel Chart
Kendo Funnel Chart
Anyone managed to get a Kendo funnel chart working in Aware using a script? Pls share how.
Rod. Aware 8.6 (latest build), Developer Edition, on OS Linux (Ubuntu) using GUI hosted on AWS EC2, MYSQL on AWS RDS
Re: Kendo Funnel Chart
From the example on their site:
Paste this in an html panel:
Paste this in render script:
Paste this in a custom.css file:
All works for me...
You can obviously reference some Aware IM attributes in the render script rather than static values.
Paste this in an html panel:
Code: Select all
<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>
Code: Select all
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:
Code: Select all
.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%;
}
You can obviously reference some Aware IM attributes in the render script rather than static values.
Re: Kendo Funnel Chart
Thanks Steve - that works... its easy when you know what you're doing huh! Cheers.
Rod. Aware 8.6 (latest build), Developer Edition, on OS Linux (Ubuntu) using GUI hosted on AWS EC2, MYSQL on AWS RDS