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

Sparklines very erratic when there are many in one page

4 Answers 62 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Vaughn Myers
Top achievements
Rank 1
Vaughn Myers asked on 16 Jul 2013, 06:59 PM
I have several sparklines in my HTML and they're being populated by a web service. It seems that they don't always fill out; I refresh and a few fill out, I refresh again and others fill out. The only way I've been able to fill them all out is by displaying an 'ALERT' for every function called. It seems it's a problem with a refresh.

Is it possible that I'm calling the web service too many times and it has become erratic?
Here's the code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.rtl.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    </head>
<body>
    <div>
            <table class="history" >
                <tr>
                    <td class="style7">Department C 1</td>
                    <td class="spark" style="width: 210px;"><span id="hum-log"></span></td>
                    <td class="style6">Department  C 1</td>
                    <td class="spark" style="width: 210px;"><span id="press-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 2</td>
                    <td class="spark" style="width: 210px;"><span id="2c-log" style="line-height: 60px"></span></td>
                    <td class="style6">Department C 2</td>
                    <td class="spark" style="width: 210px;"><span id="temp-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 3</td>
                    <td class="spark" style="width: 210px;"><span id="3c-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 4</td>
                    <td class="spark" style="width: 210px;"><span id="4c-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 5</td>
                    <td class="spark" style="width: 210px;"><span id="5c-log" style="line-height: 60px"></span></td>
                </tr>
            </table>
    </div>
    <script>
        function createSparklinesDepartment1C() {
            // Binding directly to an array
            alert('Entered');
            var rowDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1",
                        type: 'GET',
                        jsonpCallback: 'callback',
                        dataType: "jsonp"
                    }
                }
            });
            $("#press-log").kendoSparkline({
                    dataSource: rowDataSource,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Green"
                    }]
                });
                //second one
                // Third one
            // Binding directly to an array
        }          
        $(document).ready(createSparklinesDepartment1C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment1C);
    </script>
  
 <script>
        function createSparklinesDepartment2C() {
            alert('Entered 2c');
            var rowDataSource2 = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2",
                        type: 'GET',
                        jsonpCallback: 'callback',
                        dataType: "jsonp"
                    }
                }
            });
            $("#temp-log").kendoSparkline({
                    dataSource: rowDataSource2,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Red"
                    }]
                });
        }
        $(document).ready(createSparklinesDepartment2C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment2C);      
 
    </script>
 
 <script>
        function createSparklinesDepartment1C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#hum-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Black"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment1C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment1C);      
 
    </script>
<!-- The new ones -->
 <script>
        function createSparklinesDepartment2C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#2c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Blue"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment2C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment2C);      
 
    </script>
 <script>
        function createSparklinesDepartment3C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=3",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#3c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Purple"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment3C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment3C);      
 
    </script>
 <script>
        function createSparklinesDepartment4C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=4",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#4c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Orange"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment4C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment4C);      
 
    </script>  
 <script>
        function createSparklinesDepartment5C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=5",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#5c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Magenta"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment5C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment5C);      
 
    </script>  
    <style scoped>
        .chart-wrapper {
            width: 200px;
            height: 100%;
            margin: 0 auto 30px auto;
            padding: 0 0 30px 0;
            font-weight: bold;
            text-transform: uppercase;
        }
        .climate, .temperature, .conditioner {
            margin: 0 30px;
            padding: 30px 0 0 0;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 1.2em;
        }
        .history {
            border-collapse: collapse;
            width: 480px;
            height: 248px;
        }
        .history td {
            padding: 0;
        }
        .history td.item {
            text-align: right;
            line-height: normal;
            vertical-align: bottom;
        }
        .history td.spark {
            text-align: left;
            line-height: 50px;
            padding: 0 5px;
        }
        .history td.value {
            font-size: 2em;
            font-weight: normal;
            line-height: normal;
            vertical-align: bottom;
        }
        .history td.value span {
            font-size: .5em;
            vertical-align: top;
        }
        .stats {
            text-align: center;
        }
        #temp-range {
            width: 400px;
            line-height: 50px;
        }
        .style6
        {
            width: 59px;
            font-family: Calibri;
        }
        .style7
        {
            width: 100px;
            font-family: Calibri;
        }
    </style>
 
 
</body>
</html>

4 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 19 Jul 2013, 12:32 PM
Hello,

We've seen similar behavior when using the ASP.NET development web server.

Does it help if you host the service on IIS?

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vaughn Myers
Top achievements
Rank 1
answered on 19 Jul 2013, 12:52 PM
It's hosted in IIS. The problem is that I'm calling the service cross-domain and the callback and/or JSONP  is causing this 'refresh'. If I host my charts in the same place where my service is, and remove both callback and use JSON instead of JSONP, it works correctly. Unfortunately, in my case, I have to use both callback and JSONP.

It's easy to reproduce the error: use Kendo's own pie chart remote example, but move the service to another server/domain and wrap the JSON data with 'callback'. 

Would you know why this would happen?
0
T. Tsonev
Telerik team
answered on 22 Jul 2013, 01:07 PM
Hello,

Thank you for the additional information. The problem is likely by the execution of multiple JSONP requests with the same callback name.

The requests are asynchronous and will complete in random order. The callback lives in the global namespace and will be overridden by the different requests. You can see how this is a recipe for disaster.

My recommendation is to use unique callback names on each data source. The drawback is that the data will be requested multiple times, but I don't think that we can do anything better.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Vaughn Myers
Top achievements
Rank 1
answered on 22 Jul 2013, 02:18 PM
Hi T. Tsonev,

Thanks for the info. That was indeed the problem. Everything works great once I make the requests with different callback names.

Considering that charts/reports will always be hosted at one place and services in another, for future reference, I think you should modify the piechart remote data example so that it shows how one can populate the charts under these circumstances: 1) from a service hosted somewhere else, 2) when a service will be called more than once in the same document.

In my case, I'm working on a dashboard that will have sparklines, piecharts, barcharts, and God knows what else. Before your reply, my alternatives were to put everything (html and wcf) in the same folder or return all the data with one call.

Thanks again.
Tags
Sparkline
Asked by
Vaughn Myers
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Vaughn Myers
Top achievements
Rank 1
Share this question
or