Sparklines very erratic when there are many in one page

5 posts, 2 answers
  1. Answer
    Vaughn Myers
    Vaughn Myers avatar
    5 posts
    Member since:
    Apr 2006

    Posted 16 Jul 2013 Link to this post

    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>
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 19 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Vaughn Myers
    Vaughn Myers avatar
    5 posts
    Member since:
    Apr 2006

    Posted 19 Jul 2013 Link to this post

    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?
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 22 Jul 2013 Link to this post

    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!
  6. Answer
    Vaughn Myers
    Vaughn Myers avatar
    5 posts
    Member since:
    Apr 2006

    Posted 22 Jul 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready