Kendo Funnel Chart

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
RLJB
Posts: 914
Joined: Tue Jan 05, 2010 10:16 am
Location: Sydney, Australia

Kendo Funnel Chart

Post by RLJB »

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
idpSteve
Posts: 201
Joined: Thu Jul 27, 2017 6:13 am
Location: Johannesburg, South Africa
Contact:

Re: Kendo Funnel Chart

Post by idpSteve »

From the example on their site:

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>
Paste this in render script:

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%;
        }
All works for me...

You can obviously reference some Aware IM attributes in the render script rather than static values.
RLJB
Posts: 914
Joined: Tue Jan 05, 2010 10:16 am
Location: Sydney, Australia

Re: Kendo Funnel Chart

Post by RLJB »

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
Post Reply