Several datasources with callback and JSONP in one HTML??

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

    Posted 18 Jul 2013 Link to this post

    My HTML has 7 charts, so for every chart, I call a function that creates a datasource and binds the datasource  to the chart. I'm including the code.

    After much testing and no support from Kendo, I noticed that when I use JSONP and callback, the charts become erratic in the sense that all of them are never rendered. For example, sometimes 3 charts are seen, then when I refresh, 4 are filled, then maybe 2, so on.

    If I move the HTML to the same domain where my wcf resides and I use JSON (no callback), all the charts are displayed.

    Why would this happen? On cross-domain, if I only use JSONP and no "callback", then the nothing is displayed. So I have to use both jsonp and callback.

    Thanks.
    <!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 id="example" class="k-content absConf">
                <table class="history" >
                    <tr>
                        <td class="spark" style="border: 1px solid red"><span id="Old1T"></span></td>
                        <td class="spark" style="border: 1px solid red"><span id="Old2T"></span></td>
                        <td class="spark" style="border: 1px solid red"><span id="New1T"></span></td>
                        <td class="spark" style="border: 1px solid red"><span id="New2T"></span></td>
                        <td class="spark" style="border: 1px solid red"><span id="New3T"></span></td>
                        <td class="spark" style="border: 1px solid red"><span id="New4T"></span></td>
                        <td class="spark" style="border: 1px solid red"><span id="New5T"></span></td>
                    </tr>
                </table>
        <script>
        function bindChart(tech, Side) {
                var rowDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetLaunchedSites?Technology=" + tech + "&Side=" + Side,
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
                $("#" + tech + Side + "T").kendoSparkline({
                        dataSource: rowDataSource,
                        series: [{
                            field: "count",
                            color: "Green"
                        }],
                            seriesDefaults: {
                                type: "area"
                            },                 
                    });
            }
            function drawChart()  {
                bindChart("Old", 1);
                bindChart("Old", 2);
                bindChart("New", 1);
                bindChart("New", 2);
                bindChart("New", 3);
                bindChart("New", 4);
                bindChart("New", 5);
            }
            $(document).ready(drawChart);
            $(document).bind("kendo:skinChange", drawChart);
            </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;
            }
            .history td.spark {
                text-align: left;
                line-height: 50px;
                padding: 0 5px;
            }
        </style>
     
        </div>
     
    </body>
    </html>
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Jul 2013 Link to this post

    Hello Vaughn,

    When using JSONP it will always require a callback function:

    http://en.wikipedia.org/wiki/JSONP

    Probably you are hitting some limit when serializing the data:

    http://stackoverflow.com/questions/1262376/is-there-a-limit-on-how-much-json-can-hold

    Consider sending a sample project which we can run to investigate further.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Answer
    Vaughn Myers
    Vaughn Myers avatar
    5 posts
    Member since:
    Apr 2006

    Posted 23 Jul 2013 Link to this post

    The problem is resolved by making each call with a different callback name.

    http://www.kendoui.com/forums/kendo-ui-dataviz/sparkline/sparklines-very-erratic-when-there-are-many-in-one-page.aspx
Back to Top