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.
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
>