I am using the Highcharts to draw chart from googlespreadsheet. I have written the code as below. The google spread sheet key is as below:
1eKSDvJYgNBVWTbmD813OTBCoz2FB6wpxcwgveVRaQn8
It works for line chart but not for bubblechart. Please help.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com
/jquery-.9.1.js"> </script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<title>Highcharts Demo</title>
<script type='text/javascript'>//<![CDATA[
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: {googleSpreadsheetKey: '1eKSDvJYgNBVWTbmD813OTBCoz2FB6wpxcwgveVRaQn8'},
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
//]]>
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px; min-width: 310px;max-width:
600px; margin: 0 auto"></div>
</body>
</html>
I changed the position of the DATA: object and it worked for me. Below is the working code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<title>Puneeth's Assignment</title>
<script type='text/javascript'>//<![CDATA[
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
},
title: {
text: 'Puneeths Assignment'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
data: {googleSpreadsheetKey: '1nacibKQ5YVgbkp7ElsLxF0x3PDNOjvKKV8dpG0kWnns'},
series: [{
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
//]]>
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
Related
I'm a css novice... I have a chart that looks great and an HTML table that looks very basic. I want the table to match the style of the chart (font, font size, etc.).
I've included the highcharts.css file in the head of the HTML and added styledMode: false to the charge definition.
<head>
<link rel="stylesheet" type="text/css" href="code/css/highcharts.css">
</head>
<body>
<script src="code/highcharts.js"></script>
<script src="code/modules/data.js"></script>
<script src="code/modules/drilldown.js"></script>
<table border='1' width='100%'>
rows here...
</table>
<div id="container2" style="min-width: 310px; max-width: 100%; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
styledMode: true,
},
title: {
text: 'Web Firewall - Top 3',
style: {"fontSize": "15px", "color":"red" },
},
subtitle: {
text: 'Source: Something Firewall'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Block %',
colorByPoint: true,
data:
[{"name":"www.blah.org","y":44124},{"name":"menus.foo.org","y":1602},{"name":"mmm.boo.org","y":508}] }]
});
</script>
</body>
How can I show multiple series with rowsUrl?
Example fiddle: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/livedata-rows
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Live Data (Rows JSON)'
},
subtitle: {
text: 'Data input from a remote JSON file'
},
data: {
rowsURL: 'https://demo-live-data.highcharts.com/time-rows.json',
firstRowAsNames: false,
enablePolling: true
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Use seriesMapping property:
data: {
...,
seriesMapping: [{
x: 0,
y: 1
}, {
x: 0,
y: 2
}]
}
Live demo: https://jsfiddle.net/BlackLabel/k8gt2vLp/
API: https://api.highcharts.com/highcharts/data.seriesMapping
I want to dispaly label text in one line on horizontal bar in highcharts. below is the code.I want to dispaly label text in one line on horizontal bar in highcharts. below is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>
</div>
</div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
marginLeft:120,
marginBottom: 100,
type:'bar'
},
credits: {enabled: false},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
color: '#006666',
pointWidth: 40,
data: [2, 2, 1, 1, 1]
}, {
name: 'Jane',
color: '#00FF00',
pointWidth: 40,
data: [2, 2, 2, 1, 2]
}, {
name: 'Joe',
color: '#FF8C00',
pointWidth: 40,
data: [1, 1, 1, 1, 1],
}],
xAxis: {
categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
labels: {
align:'left',
x:5,
style: {
fontSize: '1em',
color:'#fff'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
});
});
</script>
</body>
</html>
There is a better example of what I want to accomplish
I want to dispaly label text in one line on horizontal bar in highcharts. below is the code.I want to dispaly label text in one line on horizontal bar in highcharts. below is the code
You need to set an width for your labels
...
style: {
fontSize: '1em',
color:'#fff',
width:'500px'
}
Fiddle
As you can see the 4th bar is too short so you will have to set the width for a second line appear
Try to use below property in label
label{
display:block
}
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">