or
<!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
>
$("#grid").kendoGrid({
dataSource: {
data: testData,
pageSize: 10
},
groupable: false,
sortable: false,
pageable: {
refresh: true,
pageSizes: true
},
columns:
[
{
field: "FileName",
title: "File Name",
template: "<
input
id
=
'f'
,
type
=
'file'
/>"
}
]
});
<
div
id
=
"menuTest"
>
<
ul
id
=
"menu"
>
<
li
onclick
=
"javascript:$('#grid').data('kendoGrid').addRow()"
><
img
src
=
"Images/help_videos_16x16.png"
/>New</
li
>
</
ul
>
</
div
>
<
div
class
=
"km-loader"
data-role
=
"loader"
style
=
"display: none;"
>
<
span
class
=
"km-loading km-spin"
></
span
>
<
span
class
=
"km-loading-left"
></
span
>
<
span
class
=
"km-loading-right"
></
span
>
<
h1
>Loading...</
h1
>
</
div
>
.km-ios .km-loading {
background-color
:
#FFF
}
.km-ios .km-loader .km-loading-
left
{
background-color
:rgba(
255
,
255
,
255
,
0.55
) }
.km-ios .km-loader .km-loading-
right
{
background-color
:rgba(
255
,
255
,
255
,
0.2
) }
.km-ios .km-loader h
1
{
color
:
#FFF
;
text-shadow
:
0
1px
0
rgba(
0
,
0
,
0
,
0.8
); }