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

Several datasources with callback and JSONP in one HTML??

2 Answers 164 Views

Charts

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

Vaughn Myers asked on 18 Jul 2013, 07:52 PM

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 Answers, 1 is accepted

Accepted