This is a migrated thread and some comments may be shown as answers.

How to get SparkLine to update when changing DataSource URL?

1 Answer 37 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Nse
Top achievements
Rank 1
Nse asked on 28 Oct 2016, 07:13 PM

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>

 

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 01 Nov 2016, 09:21 AM
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.
Tags
Sparkline
Asked by
Nse
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or