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