How to get SparkLine to update when changing DataSource URL?

[Nse]

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>

 

 

[Dimiter Topalov]

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