I use Highcharts Bubble as example from its official website and try to modified it using Framework CodeIgniter.
I run it in GoogleChrome and Firefox but not show anything.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>STATISTIK</title>
</head>
<link href="http://10.16.107.77/statistik/public/css/main.css" rel="stylesheet">
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery.validate.js"></script>
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 10px;
}
</style>
<body>
<div id="content">
</div>
<!--link rel="stylesheet" type="text/css" href="http://10.16.107.77/statistik/public/css/CreativeCSS3AnimationMenus/css/demo.css" /-->
<script src="http://10.16.107.77/statistik/public/jquery/highcharts.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/highcharts-more.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Formasi Tenaga Kerja'
},
series: [{
data: [[97,36,1000]],
name: 'Area Medan'
}, {
data: [[25,10,1000]],
name: 'Area Lubuk Pakam'
}, {
data: [[47,47,1000]],
name: 'Area Binjai'
}, {
data: [[75,80,1000]],
name: 'Area Sibolga'
}, {
data: [[60,25,1000]],
name: 'Area Rantau Prapat'
}, {
data: [[100,80,1000]],
name: 'Area Padang Sidempuan'
}, {
data: [[80,55,1000]],
name: 'Area Nias'
}, {
data: [[75,80,1000]],
name: 'Area Pematang Siantar'
}]
});
});
</script></body>
</html>
Thnks for every reply.
regards
try importing highcharts-more.js file.
Look at the working example here :
DEMO
code:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
Related
I have dynamically create charts on div class col-sm 4 which append on #container div, and now I am trying to zoom highchart as fullscreen when I click on it. Like is it on this fiddle below text. I done something similar but have no idea why is not working,Can someone help me pls ?
In my example when i click on chart everything disappears
I would like to have zoom method like is it from this example http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/
My example: https://codepen.io/anon/pen/rZjJbq
chart.blade.php
#extends('index.app')
#section('main')
<style type="text/css">
.col-sm-4 {
margin-bottom: 20px;
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.modal .col-sm-4 {
height: 90%;
width: 90%;
max-width: none;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="main2">
<div id="col-sm-4" id="col-sm-4"></div>
</div>
<script type="text/javascript">
$.getJSON( "http://localhost:8000/api/devices", function( res) {
var result = [];
var namesDev = new Array();
console.log(res);
$.each(res, function(c) {
var deviceNames = res[c].clientAllias;
var clientId = res[c].clientId;
clientNames.push(namesDev);
$.each(res[c].clientData, function(g) {
$.each(data[c].clientData[g], function(key, val) {
clientId2 = data[c].clientData[g].clientId;
var cpu = data[c].clientData[g].cpuUsage;
var time_usages = data[c].clientData[g].timestamp;
final= [];
final.push(time_usages, cpu, clientId2);
result.push(final);
});
});
});
result.sort();
console.log('result', result);console.log('result', result);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientAllias"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId");
var clients = [];
_.forEach(mappedClients, function(clientId, clientAllias) {
var tempClient = {
Allias:mappedClientsAllias[clientAllias],
name: clientId,
data: []
};
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push(
[clientData.timestamp, clientData.cpuUsage, clientId]
);
})
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var a =_.forEach(clients, function(client) {
$('<div class="col-sm-4">').css('position','relative')
.appendTo('#container')
.highcharts('StockChart',{
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
],
title: "sat",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
xAxis: {
title: {
enabled: true,
text: "Processor unit USAGE"
},
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [
{
name: "Process unit USAGE",
data: client.data.sort()
}
],
chart: {
renderTo: "main"
},
events: {
}
});
})
});
$('#main').bind('mousedown', function () {
$(this).toggleClass('modal');
$('#main', this).highcharts().reflow();
});
</script>
#endsection
app.php.blade.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
#include('file.hed')
#include('file.bar')
<div class="container ">
#include('file._info')
#yield('main')
</div> <!-- /container -->
#include('file.down')
</body>
</html>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
Add this to the CSS :
.col-sm-4.modal {
position: fixed !important;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
max-width: none;
padding:1%;
}
JS
$(".col-sm-4").bind("mousedown", function() {
$(this).toggleClass("modal");
$(this).highcharts().reflow();
});
Pen edited
I am developing a pie chart using HighCharts. Using asp.net MVC.
I try to feed the java a data string using a ViewData like this:
data: (#ViewData["data"])
When I view this data in the JSON viewer, it looks like this:
[{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
When I put it hardcoded behind the ' data: ' property, the pie is neatly shown.
However it failes when I try to feed it from the action method. In that case, it looks like this:
"[{\"name\":\"Bouwend\",\"y\":0},{\"name\":\"Failed\",\"y\":12},{\"name\":\"Succes\",\"y\":19}]"
How can I make the JSON data without all the escape strings, so the Highcharts accepts it?
#model SATS.Tools.Tfs.Extensions.ServiceApi.Controllers.CruiseControlChart
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="../../Scripts/jquery-1.10.2.min.js"></script>
<script src="../../scripts/highcharts.js"></script>
<meta name="viewport" content="width=device-width" />
<title>CruiseControlChart</title>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart / configure the highcharts
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '#ViewData["charttitle"]'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
colorByPoint: true,
data: (#ViewData["data"])
data: [{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
//onderstaand is een setje statische test data
//data: [{
// name: "Bouwend",
// y: 3
//}, {
// name: "Build succesvol",
// y: 64,
// sliced: true,
// selected: true
//}, {
// name: "Build gefaald",
// y: 33
//}]
}]
});
});
</script>
<style type="text/css">
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="display: block">
<a href="http://vm-eli-007/ccnet/ViewFarmReport.aspx" target="_parent">
#*<div class="col-md-1" id="container" style=" min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>*#
<div class="col-md-1" id="container" style=" min-width: 90%; height: 90%; max-width: 600px; margin: 0 auto"></div>
</a>
<br/>
<div class="col-centered"><span> Oldest build time: #ViewData["eldestbuildtime"]</span></div>
</div>
</div>
</body>
</html>
Try updating code like this:
data: JSON.parse("#Html.Raw(#ViewData["data"])")
I am very new to JavaScript. I want to use w2ui panels to create a webpage for data visualization using D3.js.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
d3.select("body")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
</script>
</body>
</html>
My question is how to specify D3js to draw a rectangular in left pane (or any specified pane) of the w2ui panel. Thank you!
First, you should probably check out the w2ui docs for layouts / panels and learn about the different methods to fill the panels (content(), set(), load(), html(), ...).
The below example will draw your blue box into the main panel.
It's not the best method to do what you want (check out onContent for an alternative to the timeout), but it should give you an idea how to achieve your goal.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: '<div style="height: 100%; width: 100%" id="my_div"></div>' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
setTimeout(function(){
d3.select("#my_div")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
}, 100);
</script>
</body>
</html>
I have the following code that make a simple line chart of price during the day
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flot Line Graph</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h4 { width: 450px; margin-left:200px; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative;}
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: -55px; top: 10px; width: 80px !important; }
.legend table { border: 3px solid #555; padding: 5px; font-weight:800; }
.col-md-1{width:50px !important;;
padding:0px !important;;}
.col-md-4{padding: 0px !important;;}
form{font-weight: 800;}
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class = "col-md-1" style="width:100px; margin-left:100px; margin-top:40px">
<form>
<input id="price_cat" type="radio" name="price_val" value="0" checked> LMP<br>
<input id="price_cat" type="radio" name="price_val" value="1"> MLC<br>
<input id="price_cat" type="radio" name="price_val" value="2">MCC
</form>
</div>
<div class="col-md-4">
<h4 id ="title"></h4>
<div id="placeholder" style = "width:850px; height:450px"></div>
<h4>Hour</h4>
</div>
</div>
</body>
<script type="text/javascript">
//Rome, Italy
var mkt_data = $.getJSON('https://bc2.demo.socrata.com/resource/9kzc-t3jm.json', function(response) {
console.log(response);
});
$.when(mkt_data).then(function(data) {
var price_data = data
var collection = []
var lmp_c =[]
var mcc_c = []
var mlc_c = []
var series = []
data.forEach(function(a) {
var lmp_s = []
var mcc_s = []
var mlc_s = []
lmp_s.push(Number(a.hour.replace("HE","")),Number(a.lmp));
lmp_c.push(lmp_s);
mcc_s.push(Number(a.hour.replace("HE","")), Number(a.mcc));
mcc_c.push(mcc_s)
mlc_s.push(Number(a.hour.replace("HE","")), Number(a.mlc));
mlc_c.push(mlc_s)
})
series.push({label:"LMP", data: lmp_c},{label:"MLC", data: mlc_c},{label:"MCC", data: mcc_c})
console.log(series[0].label);
$("#title").html("Average LMP per hour of the Day Jan - June 2016")
$.plot($("#placeholder"), [series[0]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
$("input:radio[name=price_val]").change(function(){
var price_series = Number($('input:radio[name=price_val]:checked').val());
console.log(price_series, typeof price_series);
$("#title").html("Average "+series[price_series].label+" per hour of the Day Jan - June 2016")
$.plot($("#placeholder").fadeIn(500), [series[price_series]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
});
});
the chart work and so does the change listener but I can't get the fade in to work properly. I would usually attached it to the element selector but the flot libraries $.plot() function is making it unclear to me where I should put the call to fadeIn(). I just want to achieve a smoother transition when changing datasets. The fade in call is at line 114.
I have the below chart that fills the width and height of the display. The Height is always just a little bigger than the screen so a scroll bar appears to show the bottom 20 px or so.
Is there a way to make Kendo UI show 100%, not 105% height?
Online example: http://SandApps.com/SOF.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.k-chart { overflow: hidden; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="chart-wrapper">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>
<script>
$(function () {
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column",
opacity: .7
},
series: [{
data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000],
color: "#005984"
}],
valueAxis: {
labels: {
format: "{0:C0}"
},
line: {
visible: false
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0:C0}",
template: " #= value #"
}
});
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
</script>
</body>
</html>
I found this to be the solution:
Add this to the CSS:
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; }
Here's the full HTML if you need a 100% width and height html solution for android and ios
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.k-chart { overflow: hidden; }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<!-- NOTE: Leave the styles here as Kendo will do funny things with a css class -->
<div class="chart-wrapper" style="height: 100%; min-height: 100%; width: 100%;">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>
<script>
$(function() { $("#chart").kendoChart({ legend: { visible: false }, seriesDefaults: { type: "column", opacity: .7 }, series: [{ data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000], color: "#005984" }], valueAxis: { labels: { format: "{0:C0}" }, line: { visible: false } }, categoryAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], majorGridLines: { visible: false } }, tooltip: { visible: true, format: "{0:C0}", template: " #= value #" } }); });
$(window).on("resize", function() { kendo.resize($(".chart-wrapper")); });
</script>
</body>
</html>