i m trying make world map, on hover tooltip with custom values.
However although map looks fine, but i couldn't able to add custom values and replace the '0' showing on the tooltip upon hover.
My code so far :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>world map</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 500px;
width: 800px;
margin: 0 auto;
}
// data labels
.highcharts-data-label-box {
fill: #a4edba;
stroke: gray;
stroke-width: 1px;
}
.highcharts-data-label {
font-weight: normal;
}
.highlight .highcharts-data-label-box {
fill: red;
stroke-width: 2px;
stroke: black;
}
.highlight.highcharts-data-label text {
font-weight: bold;
fill: white;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
<script type="text/javascript">//<![CDATA[
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {
var countryData = [{
"key": "in",
"index": 2
}, {
"key": "us",
"index": 2
}, {
"key": "de",
"index": 2
}];
var pointData = [{
"countryCode": "in",
}];
// Initiate the chart
Highcharts.mapChart('container', {
series: [{
mapData: Highcharts.maps["custom/world"],
data: countryData,
joinBy: ['hc-key', 'key'],
name: "Country Info",
}]
});
});
//]]></script>
</body>
</html>
The map works fine, but i would like to replace the '0' with custom value upon hover.,
Here's a working jsfiddle
JSFiddle
Any help is greatly appreciated..
In order to show custom values in map, you need to add "value" field in your countryData array. Otherwise value 0 would be returned for all the mentioned county code.
Working sample : JSFiddle
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {
var countryData = [{
"key": "in",
"index": 2,
"value": 100
}, {
"key": "us",
"index": 2,
"value": 200
}, {
"key": "de",
"index": 2,
"value": 300
}, {
"key": "au",
"index": 2,
"value": 0
}];
var pointData = [{
"countryCode": "in",
}];
// Initiate the chart
Highcharts.mapChart('container', {
series: [{
mapData: Highcharts.maps["custom/world"],
data: countryData,
joinBy: ['hc-key', 'key'],
name: "Country Info",
}]
});
});
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 500px;
width: 800px;
margin: 0 auto;
}
// data labels
.highcharts-data-label-box {
fill: #a4edba;
stroke: gray;
stroke-width: 1px;
}
.highcharts-data-label {
font-weight: normal;
}
.highlight .highcharts-data-label-box {
fill: red;
stroke-width: 2px;
stroke: black;
}
.highlight.highcharts-data-label text {
font-weight: bold;
fill: white;
}
<script src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
Related
how are you?. I'm making several exercises from a book but because the code in the book appears to be run in pastebin or some related then I'm doing it with vscode and debbuging it on google chrome. The code of index.html is the following
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="variables-3.js"></script>
<link rel="stylesheet" href="style.css">
</body>
</html>
the code in style.css is the following
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
body {
color: #f0f;
font-family: Arial, Helvetica, sans-serif;
}
and the javascript code in varable-3.js is the following
var div,
container = document.getElementById('container');
for(var i = 0; i<5;i++)
{
div = document.createElement('div');
div.onclick = function()
{
alert('This is box #'+i);
}
container.appendChild(div);
}
my launch.json is
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/",
"webRoot": "${workspaceFolder}/wwroot",
"runtimeExecutable":"C:/Program Files/Google/Chrome/Application/chrome.exe"
},
and my settings.json is
{
"liveServer.settings.port": 5500,
"liveServer.settings.CustomBrowser" : "chrome",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-
port=9222",
"liveServer.settings.NoBrowser" : false,
"liveServer.settings.ignoreFiles" : [
".vscode/**",
"**/*.scss",
"**/*.sass"
]
}
this suppose to show the background in some kind of sea blue and in the boddy around five squares in other color but only shows all the page in sea blue and I don't know why that is happening.
NOTE: here are code from several sources and including from other posts, I'm also using vscode-live-server.
How can I solve that problem?
Thanks in advance for the help.
First I wanna point that the following is only a modification of what the author did more a rearange than other thing, now the files:
index.html is
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Let</title>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Click on a box</h1>
<div id="container"></div>
<h1>
<script src="variables-3.js"></script>
<link rel="stylesheet" href="style.css">
</h1>
</body>
</html>
variable-3.js is the same.
style.css is
#container {
display: flex;
justify-content: space-around;
}
#container>div {
height: 5em;
width: 5em;
background-color: purple;
}
And now it works.
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 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>
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>