or
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Test</
title
>
<
script
src
=
"scripts/jquery.min.js"
></
script
>
<!--
* Kendo UI Complete v2014.1.318 (http://kendoui.com)
* Copyright 2014 Telerik AD. All rights reserved.
-->
<
script
src
=
"scripts/kendo.all.min.js"
></
script
>
<!--
* Kendo UI Complete v2014.1.318 (http://kendoui.com)
* Copyright 2014 Telerik AD. All rights reserved.
*
-->
<
script
src
=
"scripts/kendo.dataviz.min.js"
></
script
>
<
style
>
.k-sparkline span{
font-size: 100px;
}
</
style
>
</
head
>
<
body
>
<
span
id
=
"spark"
></
span
>
<
script
type
=
"text/javascript"
>
jQuery(document).ready(function () {
jQuery("#spark").kendoSparkline({
type: "column",
data: [
16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
22, 21, 16, 15, 15, 16, 19, 20, 20, 21
]
});
});
</
script
>
</
body
>
</
html
>
$(
"#sparkQtyVehicles"
).kendoSparkline({
series: [{
name:
"QtyVehicles"
,
aggregate:
"avg"
,
type:
"column"
,
field:
"QtyVehicles"
}],
categoryAxis: {
type:
"date"
,
baseUnit:
"months"
,
field:
"Date"
},
tooltip: {
visible:
true
,
shared:
false
,
template: $(
'#sparkQtyVehiclesTemplate'
).html()
},
theme:
"bootstrap"
});
01.
createChart:
function
(e) {
02.
var
list = e.sender;
03.
var
data = list.dataSource.data();
04.
for
(
var
i = 0; i < data.length; i++) {
05.
var
item = list.wrapper.find(
"[data-uid='"
+ data[i].uid +
"']"
);
06.
var
chart = item.find(
".chart"
);
07.
var
metric = data[i];
08.
this
.metrics[data[i].uid] = metric.MetricType;
09.
chart.kendoSparkline({
10.
type:
"column"
,
11.
dataSource:
new
kendo.data.DataSource({
12.
transport: {
13.
read: {
14.
url: metric.MonthService,
15.
dataType:
"json"
16.
},
17.
parameterMap:
function
(options, operation) {
18.
if
(operation ===
"read"
) {
19.
options.hotelId = 2;
// _model.get('hotelId');
20.
options.year = 2013;
//_model.get('date').getYear() + 1900;
21.
options.month = 7;
//_model.get('date').getMonth() + 1;
22.
return
options;
23.
}
24.
return
options;
25.
}
26.
}
27.
}),
28.
series: [{
29.
type:
'column'
,
30.
field: metric.MonthValue,
31.
color:
'#ff0000'
,
32.
negativeColor:
'#0099ff'
,
33.
metricType: metric.MetricType
// Hack? or Extension
34.
}],
35.
tooltip: {
36.
format:
function
() {
37.
switch
(metric.MetricType) {
38.
case
0:
// Graduacion
39.
return
"{0:N2}"
;
40.
break
;
41.
case
1:
// Cantidad
42.
return
"{0:N0}"
;
43.
break
;
44.
case
2:
// Moneda
45.
return
"{0:C2}"
;
46.
break
;
47.
case
3:
// Indice
48.
return
"{0:N2}"
;
49.
break
;
50.
case
4:
// Porcentaje
51.
return
"{0:P2}"
;
52.
break
;
53.
case
5:
//Clasificacion
54.
return
"{0}"
;
55.
break
;
56.
}
57.
},
58.
visible:
true
,
59.
shared:
false
60.
}
61.
});
62.
}
<
div
data-role
=
"sparkline"
data-series
=
"[{ 'name': 'Orders', 'type': 'column', 'field': 'Combined.OrderCount' }]"
data-tooltip
=
"{ template: $('#rangeTooltipTemplate').html() }"
data-bind
=
"source: dataSource"
>
</
div
>
@using (Html.BeginScripts("Daily.Range.Order.Count"))
{
<
script
type
=
"text/html"
id
=
"rangeTooltipTemplate"
>
<
div
>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</
div
>
<
div
>Count: #: value #</
div
>
</
script
>
}
<
div
data-role
=
"sparkline"
data-theme
=
"bootstrap"
data-series
=
"[{ 'name': 'Out the door', 'type': 'line', 'field': 'Performance.AvgOutTheDoor' }]"
data-tooltip
=
"{ template: $('#PerformanceToolTipOutTheDoor').html() }"
data-bind
=
"source: dataSource, visible: showCharts"
>
</
div
>
@using (Html.BeginScripts("Performance.Range.OutDoorTime", Area.Foot))
{
<
script
id
=
"PerformanceToolTipOutTheDoor"
type
=
"text/template"
>
<
div
>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</
div
>
<
div
>Out the door: #: value #</
div
>
</
script
>
}
<!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
>