or
<!doctype html>
<
html
>
<
head
>
<
title
>Basic usage</
title
>
<
link
href
=
"../../shared/styles/examples.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../../shared/styles/examples-offline.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../../../source/styles/kendo.common.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../../../source/styles/kendo.default.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../../../source/js/jquery.min.js"
></
script
>
<
script
src
=
"../../../source/js/kendo.core.js"
></
script
>
<
script
src
=
"../../../source/js/kendo.data.js"
></
script
>
<
script
src
=
"../../../source/js/kendo.chart.js"
></
script
>
</
head
>
<
body
>
<
a
href
=
"../index.html"
>Back</
a
>
<
div
class
=
"description"
>Basic usage</
div
>
<
div
id
=
"example"
class
=
"k-content"
>
<
div
class
=
"chart-wrapper"
>
<
div
id
=
"chart"
);"></
div
>
</
div
>
<
script
>
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Internet Users"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6]
}, {
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009],
plotBands: [{
from: 2006,
to: 2007,
color: "#000",
opacity: 0.2
}]
},
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
// Initialize the chart with a delay to make sure
// the initial animation is visible
}, 400);
$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});
</
script
>
</
div
>
</
body
>
</
html
>