I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?
You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo
Related
I am trying to create a single drag navigator over multiple highchart to highlight chart between ranges. like below attachment.
Can someone please let me know how can I do this? I explored highchart but could not find appropriate options to create this. Are there any other options?
Here is what I have tried:
(function(H) {
H.wrap(H.Chart.prototype, 'zoom', function(proceed, event) {
var navMin = event.xAxis[0].min,
navMax = event.xAxis[0].max;
H.each(Highcharts.charts, function(chart) {
if (chart.userOptions.chart.customNavigator) {
chart.xAxis[0].setExtremes(navMin, navMax);
}
});
});
}(Highcharts));
$.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
var newMin = data[0][0],
newMax = data[data.length - 1][0];
Highcharts.stockChart('container-main', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main1', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main2', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-navigator', {
chart: {
height: 600,
zoomType: 'x',
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
navigator: {
enabled: true,
height:540,
opposite:true,
maskInside:false
},
rangeSelector: {
enabled: true
},
scrollbar: {
enabled: false
},
xAxis: {
min: newMin,
max: newMax,
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
yAxis: {
visible: false
},
series: []
});
});
#container {
height: 200px;
min-width: 200px;
}
#container-navigator{ position:absolute; top:0; width:100%}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<div id="container-main" style="height: 200px; min-width:200px"></div>
<div id="container-main1" style="height: 200px; min-width:200px"></div>
<div id="container-main2" style="height: 200px; min-width:200px"></div>
<div id="container-navigator"></div>
also attached jsFiddle what I have tried: jsFiddle
I am also open to any other library achieving this type of result.
In the current solution you can create a timeline using SVGRenderer as below I show how I rendered the button. For visibility, I added them to the container navigator.
chart: {
events: {
load: function() {
const chart = this;
chart.renderer.button('Change visible time range', 100, 50)
.attr({
zIndex: 40,
})
.on('click', function() {
chart.xAxis[0].setExtremes(navMin, navMax))
})
.add()
}
}
}
In your solution with the navigator stretched to full height, the navigator covers all the charts and the tooltip cannot be shown that way, it's under the navigator container.
Demo: https://jsfiddle.net/BlackLabel/u6gjdzsn/2/
Whats the best way to achieving the below chart using Highcharts library?
You can create additional pie charts as data labels:
chart: {
events: {
load: function() {
var points = this.series[0].points,
container;
points.forEach(function(p) {
container = p.dataLabel.div.querySelector('.dataLabelChart');
Highcharts.chart(container, {
chart: {
margin: 0,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
innerSize: 30,
dataLabels: {
enabled: false
},
type: 'pie',
data: [1, 2, 3]
}],
legend: {
enabled: false
}
});
});
}
}
},
series: [{
dataLabels: {
verticalAlign: 'middle',
enabled: true,
useHTML: true,
formatter: function() {
return '<div class="dataLabelChart" id="' + this.point.index + '"></div>'
}
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/y46ubx1L/
API Reference: https://api.highcharts.com/highcharts/series.scatter.dataLabels.formatter
since I need to add a description text to some of my y-axis titles I need to set the height of the ticks in a highcharts bar chart. Does anyone know how to get this working? Is there perhaps an automatic height calculation possible?
new Highcharts.Chart({
credits: { enabled: false },
chart: {
renderTo: 'parameterAnalysisChart{0}'.format(chartCount),
type: 'bar',
height: parameters.length * categories.length * 20 + (parameters.length + 1) * 40,
spacingRight: 20
},
title: { text: i18n.t('misc.valueCategory_plural') },
xAxis: {
categories: xAxis
},
yAxis: {
min: 0,
title: { text: null },
labels: { overflow: 'justify' },
allowDecimals: false
},
tooltip: { enabled: false },
legend: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<strong>'+ this.series.name +':</strong> ' + this.y;
}
}
},
series: {
minPointLength: 5,
stickyTracking: false
}
},
series: series
});
I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},