Kendo UI Chart Test111

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<div id="chart"></div>
<script id="template" type="text/x-kendo-template">
  <div>#: category #</div>
  # for (var i = 0; i < points.length; i++) { #
    <div>#: points[i].series.name# : #: points[i].value #</div>
  # } #
</script>

CSS

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/dataviz/line-charts/mvvm.html">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
	<link rel="stylesheet" href="../../content/shared/styles/examples-offline.css">
	<script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <div id="example" class="k-content">
    <div class="configuration-horizontal">
        <div class="config-section">
            <span class="configHead">Hover some series</span>
            <div data-role="chart"
                 data-legend="{ position: 'bottom' }"
                 data-series-defaults="{ type: 'line' }"
                 data-series="[
                                 { field: 'nuclear', name: 'Nuclear electricity' },
                                 { field: 'hydro', name: 'Hydro electricity' },
                                 { field: 'wind', name: 'Wind electricity' }
                             ]"
                 data-bind="visible: isVisible,
                            source: electricity,
                            events: { seriesHover: onSeriesHover }"></div>
        </div>
        <div class="config-section console-section">
            <div class="configHead">Console</div>
            <div class="console"></div>
        </div>
    </div>
    <div...

JavaScript

$("#chart").kendoChart({
  tooltip: {
    visible: true,
    template: "#: value.x # - #: value.y # (#: value.size #)"
  },
  series: [
    {
      type: "bubble",
      data: [ [1, 2, 3] ]
    }
  ]
});