How to get SparkLine to update when changing DataSource URL?

2 posts, 0 answers
  1. Nse
    Nse avatar
    12 posts
    Member since:
    Feb 2016

    Posted 28 Oct Link to this post

    I have a Kendo UI Sparkline as part of my dashboard. I have a dropdown control that has dates in it and I want my Sparkline to change when the date is changed on the date dropdown. I've checked the URL of the datasource and it updates when the dropdown is changed, however the sparkline doesn't make the API call when I perform a datasource sync. How do I get the sparkline to update? I'm trying to mimic the functionality present in the Northwind sample app located here: http://demos.telerik.com/aspnet-mvc/html5-dashboard-sample-app/

    Here is my code:

    <div class="row">
        <div class="col-md-12">
            <input type="search" id="sparklineDropdown" style="width: 200px;float:right;"/>
        </div>
    </div>
    <div class="row">
        <div id="RevenueContainer" class="col-md-4">
            <h4>REVENUE</h4>
            <p><span style="font-weight:bold;font-size:1.5em;" id="RevenueLabel"></span></p>
            <span id="Revenue" class="k-sparkline" style="width: 100%;line-height: 175px;"></span>
            <script>
            </script>
        </div>
     
        <div id="WorkOrderContainer" class="col-md-4">
            <h4>WORK ORDERS</h4>
            <p><span style="font-weight:bold;font-size:1.5em;" id="WorkOrderLabel"></span></p>
            <span id="WorkOrders" class="k-sparkline" style="width: 100%;line-height: 175px;"></span>
        </div>
     
        <div class="col-md-4">
                <script>
                    function createChart() {
                        ...
                    }
     
                    $(document).ready(createChart);
                    $(document).bind("kendo:skinChange", createChart);
                </script>
            </div>
        </div>
     
    </div>
     
        <div id="grid"></div>
        <script>
            $(document).ready(function() {
                var data = [
                    { text: "This month", value: "0" },
                    { text: "September 2016", value: "1" },
                    { text: "August 2016", value: "2" },
                    { text: "July 2016", value: "3" }
                ];
     
                $("#sparklineDropdown").kendoDropDownList({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: data,
                    change: onChange
                });
            });
     
            function onChange() {
                var d = new Date();
                d.setMonth(d.getMonth() - $("#sparklineDropdown").val());
     
                var wosparkline = $("#WorkOrders").data("kendoSparkline");
                wosparkline.dataSource.transport.options.read.url = "/api/workorder/workordersbymonth/all/" + d.getFullYear() + "/" + (d.getMonth() + 1);
                wosparkline.dataSource.sync();
            }
     
            function createWOSparklines() {
     
                var workorderDataSource = new kendo.data.DataSource({
                    type:  "json",
                    transport: {
                        read: {
                            url: "/api/workorder/workordersbymonth/all/2016/10",
                            contentType: "application/json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        model: {
                            fields: {
                                Date :  { type: "date" },
                                WorkOrders: { type: "number" }
                            }
                        }
                    }
                });
                $("#WorkOrders").kendoSparkline({
                    theme: "metro",
                    series: [{
                        type: "column",
                        field: "WorkOrders",
                        color: "#1996e4",
                        gap: 0.2,
                        categoryField: "Date",
                        aggregate: "sum"
                    }],
                    categoryAxis: [{
                        type: "date",
                        baseUnit: "days"
                    }],
                    dataSource: workorderDataSource,
                    autoBind:  true,
                    dataBound: function onDataBound(e) {
                        $('#WorkOrderLabel').text(e.sender.dataSource.total());
                    }
                });
            }
     
            function createSparklines() {
                // Create
     
                var revenueDataSource = new kendo.data.DataSource({
                    type: "json",
                    transport: {
                        read: {
                            url: "/api/workorder/revenuebymonth/all/2016/10",
                            contentType: "application/json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        model: {
                            fields: {
                                Date: { type: "date" },
                                Revenue: { type: "number" }
                            }
                        }
                    }
                });
                $("#Revenue").kendoSparkline({
                    theme: "metro",
                    series: [{
                        type: "column",
                        field: "Revenue",
                        color: "#1996e4",
                        gap: 0.2,
                        categoryField: "Date",
                        aggregate: "sum"
                    }],
                    categoryAxis: [{
                        type: "date",
                        baseUnit: "days"
                    }],
                    dataSource: revenueDataSource,
                    tooltip: {
                        format: "{0:c2}"
                    },
                    autoBind: true,
                    dataBound: function onDataBound(e) {
                        $('#RevenueLabel').text("$" + e.sender.dataSource.total() + ".00");
                    }
                });
            }
     
            $(document).ready(createSparklines);
            $(document).bind("kendo: skinChange", createSparklines);
            $(document).ready(createWOSparklines);
            $(document).bind("kendo: skinChange", createWOSparklines);
            </script>

     

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 01 Nov Link to this post

    Hello Nse,

    The recommended approach to make changes to the Chart's dataSource is via the setDataSource() method. It sets the new dataSource, and rebinds the Chart. I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Kendo UI is VS 2017 Ready
Back to Top