I've embedded the HTML code generated from fusiontableslayer wizard into my Google blog and
found that I got only point features with the base map layer all disappeard.
When I zoom in and out, the layer briefly appears but then again goes away.
the link:
http://hkhahm61.blogspot.kr/2014/08/blog-post_21.html
I am a complete novice on javascript, so have no idea as to how to fix the problem.
Is there anay way I can fix this?
Thank you in advance.
The fusiontables HTML code
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(36.53506109154479, 128.38037449395748),
zoom: 7
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: -99 }
]
},
{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.country',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.province',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.locality',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.neighborhood',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col3",
from: "1aj360PsGiV0GOlmFI0-BaYUnTb2UWiNRC4KmBpyP"
},
map: map,
styleId: 2,
templateId: 2
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
The issue is this CSS:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
...which affects also the the images used for the map(especially the background-color)
Add this CSS to override it:
#map-canvas img{
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Related
I want to format my values on the y-axis using HighCharts. Suppose I pass 14000, it should print "14K" on the y-axis. How can I do that? I've benn trying using numeral.js, but to no avail.
<!DOCTYPE html>
<html>
<head>
<title>Charts demo </title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >
$(function () {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom : 50,
marginTop : 150,
height : 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y : 40,
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.5'
},
formatter: function() {
return "$"+ this.value ;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter: function() {
return "$"+ this.total ;
}
}
},
legend:{
enabled:false,
width: 600,
floating: false,
x:50,
align: 'left',
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular',
opacity : '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
credits : {
enabled : false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'FTE-OpEx ',
data: [5000, 30000, 40000, 700000],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [20000, 20000, 30000, 20000],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [30000, 40000, 4000, 2000],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}, {
name: 'HW/SW',
data: [3000, 4000, 4000, 20000],
pointWidth: 30
}, {
name: 'Other',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}]
});
});
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>
</body>
</html>
}
It's problem with your formatter which returns default value, see API. If you want to keep numeric symbols, call defaultLabelFormatter.
Demo: http://jsfiddle.net/BlackLabel/uL2jx0t9/1/
yAxis: {
labels: {
formatter: function() {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
}
Highcharts.chart('myChart', {
chart:{
backgroundColor: 'transparent',
//polar: true,
height: 615,
type: 'line',
//marginTop: 27 ,
margin: [90, 10, 90, 10]
},
title: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
yAxis: {
tickPixelInterval: 50,
offset: -19,
floor: 0,
ceiling: 100,
gridLineDashStyle: 'dash',
gridLineColor: '#676767',
title: {
text: null
},
labels: {
style: {
color: 'red'
},
y: -8,
x: 0,
format: '{value} %'
},
},
xAxis: {
tickmarkPlacement:'on',
type: 'category',
categories: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
max: 11,
gridLineColor: '#686868',
gridLineWidth: 1,
//offset: 50,
tickLength: 0,
lineColor: 'transparent',
labels: {
style: {
color: 'red'
},
x: 5,
//offset: -50
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 3,
marker: {
enabled: false
},
label: {
enabled: false
},
states: {
// hover: {
// enabled: true,
// lineWidth: 10
// },
},
events:{
click: function (event) {
lineWidth: 5
//event.point.series.chart.tooltip.refresh(e.point, e)
}
},
}
},
series: [{
name: 'PR',
data: [10,67,88],
color: '#35FEDB',
marker: {
states: {
hover: {
enabled: false
}
}
},
}, {
name: 'PREV',
data: [1, 9,27, 40, 57, 69, 93],
color: '#7EFF75',
marker: {
states: {
hover: {
enabled: false
}
}
},
}, {
name: 'GO',
data: [0, 28, 40, 42, 65, 69, 82],
color: '#EF4556',
marker: {
states: {
hover: {
enabled: false
}
}
},
}, {
name: 'Demo',
data: [0, 30,45, 45, 68, 88, 92],
color: 'white',
marker: {
states: {
hover: {
enabled: false
}
}
},
}],
tooltip: {
shared: false,
useHTML: true,
borderWidth: 0,
backgroundColor:'transparent',
style: {
fontWeight: 'bold',
fontSize: '13px',
padding: 0,
},
formatter: function() {
if (this.series.name == 'PR') {
$('.cyan-tooltip').text('PR '+this.y+'%');
return '<div class="pr-tooltip-head"style="color: black; background: #35FEDB; height: 80px; text-align: center; width: 190px; left: -7px; position: relative; padding: 5px;">' + this.series.name +
'<br/>'+ this.y +'%'+'</div>'
;
}
else if (this.series.name == 'PREV') {
$('.green-tooltip').html('PREVENDAS '+this.y+'%');
return '<div class="prevtooltip-head"style="color: black; background: #7EFF75; height: 80px; text-align: center; width: 190px; left: -7px; position: relative; padding: 5px;">' + this.series.name +
'<br/>'+ this.y +'%'+'</div>'
;
}
else if (this.series.name == 'GOB') {
$('.red-tooltip').html('GO '+this.y+'%');
return '<div class="go-tooltip-head" style="color: $secondary; background: #EF4556; height: 200px; text-align: left; width: 190px; left: -7px; position: relative; padding: 5px;">' + this.series.name +
'<br/>'+'Objetivo\'17'+'<br/>'+ '4.250.000.00'+ '<br/>'+'Objetivo Nov\'17'+'<br/>' + '<span class="seperator"></span><div style="text-align:center">'+ this.y +'%'+'</div>'+'</div>'
;
}
else if (this.series.name == 'Demo') {
return '<div class="demo-tooltip-head"style="color: black; background: $secondary; height: 80px; text-align: center; width: 190px; left: -7px; position: relative; padding: 5px;">' + this.series.name +
'<br/>'+ this.y +'%'+'</div>'
;
}
else return false;
},
},
responsive: {
rules: [{
condition: {
Width: 200
},
}]
}
});
(function (H) {
H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, point, e) {
if (e && e.type !== 'mousemove') {
proceed.call(this, point, e);
}
});
H.addEvent(H.Point.prototype, 'click', function (e) {
e.point.series.chart.tooltip.refresh(e.point, e);
//e.point.series.chart.lineWidth.refresh(10);
});
}(Highcharts));
<div id="myChart"></div>
How to customize a legend in highcharts as given in image.
And place it right to the given line chart
Now I created a line chart using highchart. And it has 3 lines. While loading the chart all lines are visible. And now I want to make:
Invisible each line while clicking on corresponding colors in required legend.That is while clicking on red spot make invisible the red line.
And make visible by clicking again on the red spot.Similarly for rest of lines in the chart.
When red spot is clicked make other spot to see as disabled but not
completely
chart must not be shown empty, minimum accepted 1 line chart
Inside the green region y-axis value to be displayed while hovering green spot after clicking on the green line.Until clicking the line disable the hovering property.This is similar to all other colors
Refer to this live demo: http://jsfiddle.net/kkulig/zp7rjzx3/
I create and configure custom legend in chart.events.load:
chart: {
events: {
load: function() {
// legend box
var div = document.createElement('div');
div.setAttribute('class', 'legend-box');
document.getElementsByClassName('highcharts-container')[0].appendChild(div);
// items
var ul = document.createElement('ul');
ul.setAttribute('class', 'item-list');
div.appendChild(ul);
this.series.forEach(function(s) {
var li = document.createElement('li');
li.setAttribute('class', 'menu-item');
li.style.color = s.color;
ul.appendChild(li);
li.addEventListener('click', function() {
s.setVisible();
});
});
}
}
}
Associated CSS:
#container {
background-color: pink;
width: 600px;
}
.legend-box {
width: 50px;
height: 200px;
background: #455;
position: absolute;
top: 100px;
left: 500px;
border-radius: 25px;
font-size: 30px;
}
.item-list {
margin: 20px 0 0 5px;
}
.menu-item {
margin: 0 0 10px 0;
cursor: pointer
}
setVisible method serves for toggling visibility of a series.
You can easily implement other functionalities using this demo as starting point.
API reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
i have a table in my main page in which left side i want to show one graph and right side i want to show second one. when iam redering both view from my index.html.erb its showing me above error and just showing me only one graph. if i show only one graph it doesn't give any error.
index.html.erb: here iam integrating my highcharts and rendering views
<head>
<!--Load the AJAX API-->
<%= javascript_include_tag "highcharts"%>
</head>
<tr>
<td width = "490">
<b><%= render :partial => 'new1' %></b>
</td>
<td width = "490" colspan = 2>
<b><%= render :partial => 'new' %></b>
</td>
</tr>
2. new1.html.erb:- its view which has to be showed left side
<head>
<script>
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#pie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'calculated',
data: <%= raw #result1 %>
}]
});
});
</script>
</head>
<div id="pie" style="width:500px; height:300px; vertical-align: top; display: inline-block; padding: 10px;">
3. new.html.erb:-> its view which has to be showed right side
<head>
<script>
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#highpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'calculated',
data: <%= raw #result %>
}]
});
});
</script>
</head>
<div id="highpie" style="width:500px; height:300px; vertical-align: top; display: inline-block; padding: 10px;">
conclusion:-> when iam redering both view from my index.html.erb its showing me above error and just showing me only one graph. if i show only one graph it doesn't give any error
Wow! Your index.html.erb it is not valid, should be in the css folder, js scripts in his. You have all scattered.
in my both view i was using the same code and method of highcharts. i think
it was clashing i changed the highcharts method a little bit it worked fine for me
this is the code:->
<head>
<script>
$(function () {
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.pie.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
// Build the chart
$('#highpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'calucated',
data: <%= raw #result %>
}]
});
});
</script>
</head>
<div id="highpie" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
I am trying to implement Highcharts Waterfall graph in rails 3.Currently I am just using the default data as provided by http://www.highcharts.com/demo/ Following is my view file for testing purpose
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: [{
name: 'Start',
y: 120000
}, {
name: 'Product Revenue',
y: 569000
}, {
name: 'Service Revenue',
y: 231000
}, {
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
name: 'Fixed Costs',
y: -342000
}, {
name: 'Variable Costs',
y: -233000
}, {
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
}],
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
Now what I want to achieve is firstly the data required should be dynamic basically the name: and the y: values. The values can be passed using a json object but how to build the json when the values are inconsistent as in case of
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
and
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
as there are no y: values. Kindly help me out as I am not able to figure out how to achieve dynamic data in this chart.
Here is the answer just in case if it helps out anyone. This is the example with dynamic data. http://www.highcharts.com/demo/waterfall .In the controller file
class GraphsController < ApplicationController
def index
defaults = [:name=>'Positive Balance', :isIntermediateSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for positive balance which would automatically be calculated once we pass the correct values in the json format
defaults_final = [:name=>'Balance', :isSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for final balance
positivegraph = Graph.all(:conditions =>'y > 0') # for the positive values
negativegraph = Graph.all(:conditions =>'y < 0') # for the negative values
positive_graph = positivegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of positive values
negative_graph = negativegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of negative values
#user_hash_array = positive_graph.concat(defaults) #concat arrays successively
#user_hash_array = #user_hash_array.concat(negative_graph)
#user_hash_array = #user_hash_array.concat(defaults_final).to_json
end
end
In the view file I have
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery.min' %>
<%= javascript_include_tag 'highcharts' %> <!--[if IE]> <%= javascript_include_tag 'excanvas.compiled' %> <![endif]-->
<%= javascript_include_tag 'highcharts-more' %>
<%= javascript_include_tag 'exporting' %>
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data:
<%= raw #user_hash_array %>
,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
In the database I have two fields 1 is the name field and the other field is y which has the integer values.
I have a problem with highcharts pie, i want to show my data into a pie, but the pie is very small, it is only shows like a small dot.
i have looking for the answer any where, but i can not find it. Please some body explain to me why is that, i just new for this tools...
i tried to post the image, but it can't...
below are my code :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,archive,follow">
<title>CIT Dashboard</title>
<link rel="stylesheet" media="all" href="css/dashboard.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
var chart1;
var chart2;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'pie1',
plotBackgroundColor: '#969696',
margin: 0,
padding: 0
},
legend: {
enabled: false
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
plotBorderWidth: 0,
plotShadow: false,
animation: false,
shadow: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor:'#000000',
distance: -40,
formatter: function() {
return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Transaction by LTS',
data: [<%=graph1 %>]
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'pie2',
plotBackgroundColor: '#969696',
margin: 0,
padding: 0
},
legend: {
enabled: false
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
plotBorderWidth: 0,
plotShadow: false,
animation: false,
shadow: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
distance: -40,
formatter: function() {
return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Transaction by LTS',
data: [<%=graph2 %>]
}]
});
});
</script>
</head>
Thanks
First of all, define your width / height, secondly you can modify size of chart by parameter:
http://api.highcharts.com/highcharts#plotOptions.pie.size
Try setting minimum width and height of the div container where you are generating chart like this
<div id="pie1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Had the same issue when working with mutliple piecharts. Only 1 of the piecharts appeared smaller in size. The reason being max-width was set for the div element. Once I removed the max-width attribute, it worked fine.
<div id = "ab" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
to
<div id = "ab" style="min-width: 310px; height: 400px; margin: 0 auto">