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 107 Views

Sparkline

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

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>

<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

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?

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!

Accepted

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.