JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<button id="btnShowWindow1">Show Chart1</button>
<button id="btnShowWindow2">Show Chart2</button>
<div id="window1">
<div id="chart1" style="width:400px;"></div>
</div>
<div id="window2">
<div id="chart2" style="width:400px;"></div>
</div>
JavaScript
$(document).ready(function() {
$("#chart1").kendoChart({
dataSource: {
//Limits result set
transport: {
read: {
url: "/echo/json/",
//using jsfiddle echo service to simulate JSON endpoint
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([
{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
},
{
"country": "Spain",
"year": "2007",
"unit": "GWh",
"solar": 508,
"hydro": 30522,
"wind": 27568,
"nuclear": 55103
},
{
"country": "Spain",
"year": "2006",
"unit": "GWh",
"solar": 119,
"hydro": 29831,
"wind": 23297,
"nuclear": 60126
}
])
}
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series:
[{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name:...