When I trying to click in highchart graph legends it shows a error Aw, snap in chrome and In Firefox it's taking much time to display a graph
In attached image error is visible and legends of highcharts:
Please update your google chrome.
This code is best for you:
$(function () {
var data = {
"xCategories": ["Oct 13","Nov 13","Dec 13","Jan 14"],
"ySeries": [
{
"name": "Product1",
"data": [11023.06902288,1059.48907912,1269.79964983,1620.3101287],
"type": "column"
},
{
"name": "Total volume",
"data": [2185819284,2101885633.7272727,2553791958.4090905,3229867446],
"type": "spline",
"yAxis": 1
}
],
};
$('#container').highcharts({
chart: {
animation: false,
type: 'column'
},
title: {text: null},
xAxis: {
title: {text: 'month'},
categories : data.xCategories
},
yAxis: [{
title: {text: 'Monthly spend ($)'}
},{
title: {text: 'volume'}, opposite: true
}],
tooltip: {
shared: true,valueDecimals: 2,valuePrefix: '$'
},
plotOptions: {
column: {stacking: 'normal'},
spline: {
tooltip: {valuePrefix: '', valueSuffix: ' units.', valueDecimals: 0}
},
series : {animation: false}
},
series: data.ySeries
});
});
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Related
I am using highstocks in my application where I have following options of highstock chart.
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: 'Dummy Data Set'
},
credits: {
enabled: false
},
series: [{
tooltip: {
valueDecimals: 2
},
name: 'AAPL',
data: [
...
]
}]
HTML template is like this
<div style="border: 1px black solid" class='container'></div>
I am getting an ohlc stock chart but have extra space/margin at the bottom after navigator.
Is there any way to remove that extra space/margin.
You can control the space between the bottom edge of the chart and the content by setting appropriate chart.spacingBottom value.
Code:
Highcharts.stockChart('container', {
chart: {
spacingBottom: 5
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: [
[1539264600000, 214.45],
[1539351000000, 222.11],
[1539610200000, 217.36],
[1539696600000, 222.15],
[1539783000000, 221.19],
[1539869400000, 216.02],
[1539955800000, 219.31],
[1540215000000, 220.65],
[1540301400000, 222.73],
[1540387800000, 215.09],
[1540474200000, 219.8],
[1540560600000, 216.3],
[1540819800000, 212.24],
[1540906200000, 213.3],
[1540992600000, 218.86],
[1541079000000, 222.22],
[1541165400000, 207.48],
[1541428200000, 201.59],
[1541514600000, 203.77],
[1541601000000, 209.95],
[1541687400000, 208.49],
[1541773800000, 204.47],
[1542033000000, 194.17],
[1542119400000, 192.23],
[1542205800000, 186.8]
],
tooltip: {
valueDecimals: 2
}
}]
});
#container {
border: 1px solid red;
}
<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>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Demo:
https://jsfiddle.net/BlackLabel/krgxL7dv/1/
API reference:
https://api.highcharts.com/highstock/chart.spacingBottom
how can i toggle the data table in high-charts from another button not from the exporting options in high-charts , when i click it once it should show the data table below the chart again i clicked on that it should hide the data-table, and i have the N number of graphs so it should be dynamic for all the charts
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<button onclick="toggleDataTable()">
Toggle Datatable
</button>
<script>
function toggleDataTable(){
var chart= $('#container').highcharts()
chart.update({
exporting: {
showTable: true
}
});
}
Highcharts.chart('container', {
exporting:false,
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
</script>
for the reference please go through this link:
https://jsfiddle.net/GnanaSagar/roL5mhu1/6/
First, showTable is an attribute from the exporting options. You cannot set exporting: false then. You must set it like this if you don't want to see the exporting button on top right:
exporting: {
enabled: false
},
Then for the onclick function, you should probably use something like:
function toggleDataTable() {
var chart = $('#container').highcharts()
chart.update({
exporting: {
showTable: !chart.options.exporting.showTable
}
});
}
But it does not remove the table after clicking back.
So I suggest you manually remove the table element when chart.options.exporting.showTable is going from true to false:
if (chart.options.exporting.showTable) {
var element = document.getElementById("highcharts-data-table-0");
element.parentNode.removeChild(element);
}
See updated jsfiddle here.
(Might be a possible duplicate of How to create a single series bar graph with Highcharts)
I'm trying to create a simple Highcharts column chart with a single series and multiple labels in the legend as shown below
By toggling the legend( Series 1 ) it shows and hides both column charts.I need to control the individual column with the legends (which should be labelled Jan and Feb )
The code snippet for reference -
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb' ]
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [
{
data: [
{y: 6, name: 'First', color: 'blue'},
{y: 6, name: 'sec', color: 'red'}
]
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Currently I am using spiderweb highcharts with ColdFusion. Can i set two axis in the spiderweb? Besides that, how can i link to another page when i click on the x-axis'label with data passing?
Below is my code. TQ
<cfscript>
categories= ['Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'] ;
series = [{
'name': 'Last Month',
'data': [3.775,3.5, 3.9, 4, 3.7],
'pointPlacement': 'on'
}, {
'name': 'MTD',
'data': [ 3.775, 3.7, 3.5, 3.9, 4],
'pointPlacement': 'on'
}, {
'name': 'Target',
'data': [3.725, 3.8,3.5, 3.7, 3.9],
'pointPlacement': 'on'
}];
</cfscript>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="highcharts-more.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -1000
},
pane: {
size: '70%'
},
xAxis: {
categories: <cfoutput>#serializeJson(categories)#</cfoutput>,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 3,
endOnTick: true,
showLastLabel: true,
tickPositions: [3,3.5, 4, 4.5, 5]
}],
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: <cfoutput>#serializeJson(series)#</cfoutput>
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I am not sure about limitation in ColdFusion, but in Highcharts you can simply use xAxis.labels.formatter to use <a> tags in labels, see demo in the docs.
For multiple yAxes - it's the same, Highcharts supports multiple yAxes, simply use structure as yAxis: [ { ... }, { ... } ] and you will get two axes. Second yAxis will be empty, so don't forget to connect specific series to that axis using series.yAxis.
When you click on the 'Recycled Materials' section of the pie chart it drops down into more info about that section.
The problem is the back button has the default text 'Back to Brands' in it and I can't find anywhere in my code to change that.
My code is as follows:
Java:
$(function () {
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Green Up Amount Recycled'
},
subtitle: {
text: 'Click the Recycled Materials slice for more information.'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Landfill - 45,821 lbs",
y: 23.73,
}, {
name: "Recycled Materials - 147,276 lbs",
y: 76.27,
drilldown: "Recycled Materials"
}]
}],
drilldown: {
series: [{
name: "Recycled Materials",
id: "Recycled Materials",
data: [
["Tent Frames and Chairs - 6,400 lbs", 4.35],
["Aluminum Cans - 28,950 lbs", 19.66],
["Plastic PET Bottles - 36,420 lbs", 24.73],
["Glass - 40,950 lbs", 27.8],
["Cardboard - 30,000 lbs", 20.37],
["Solo Cups - 4,556 lbs", 3.09],
]
}]
}
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 500px; max-width: 500px; height: 400px; margin: 0 auto"></div>
Thanks for the help!
Simply change
name: "Brands"
to whatever you have, maybe "Materials", example