I have a Highcharts Graph that is displaying three different energy costs. I can't seem to get my legend to show nor can I get the axis titles to show.
The Legend should have the titles on; Gas, Electric, Oil and they should also be on the axis too.
The link to the JSFiddle is:
http://jsfiddle.net/petenaylor/HHEfW/3/
(function ($) { // encapsulate jQuery
$(function () {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['Electric', 'Oil', 'Gas'],
colors = Highcharts.getOptions().colors;
$.each(names, function (i, name) {
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: 100,
borderWidth: 0
},
rangeSelector: {
selected: 12
},
title: {
text: 'Energy Prices'
},
yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
series: [
{
name: 'Electric',
yAxis:0,
data: [
[1072915200000, 5.73],
[1073001600000, 5.81],
[1073088000000, 5.23],
[1073174400000, 5.32]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Oil',
yAxis:1,
data: [
[1072915200000, 29.73],
[1073001600000, 29.73],
[1073088000000, 29.73],
[1073174400000, 29.73]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Gas',
yAxis:2,
data: [
[1072915200000, 0.823],
[1073001600000, 0.82],
[1073088000000, 0.82],
[1073174400000, 0.82]
],
tooltip: {
valueDecimals: 2
}
}
]
});
});
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
labels: {
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Electric',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Oil',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Gas',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
})(jQuery);
Can anyone help me show the legend and axis titles?
The legend also needs to be click-able so that each line disappears and reappears when clicked.
Many thanks for your help
Pete
For legend you should add enabled parameter with true value.
http://jsfiddle.net/HHEfW/5/
legend: {
enabled: true
}
yAxis titles don't work, because are not defined, so you should add title parameter with text value. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-text/
Related
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
NET MVC Project, where I use Highcharts. In my charts i have columns and a spline.
I have already implemented drilldown for my chart and it works perfectly, but only for the columns. On the first level the columns and the spline is shown, but when I trigger drilldown only the columns are shown. data2 should be the spline.
var mychart = Highcharts.chart('container', {
chart: {
zoomType: 'xy',
spacingBottom: 40,
spacingTop: 40,
events: {
// DRILLDOWN
drilldown: function (e) {
//Some variables id, func
$.getJSON(`/Home/GetDataForMinuteDrilldown?id=${id}&function=${func}`, function (data) {
console.log(data);
var durationArrMinutes = data.map(function (item) {
return item['minuteavg'];
});
var errorArrayMinutes = data.map(function (item) {
return item['errorsperminute']
});
var minuteArray = data.map(function (item) {
return {
name: drill + ":" + item['minute'],
y: item['minuteavg'],
drilldown: item['minute']
};
});
data2 = {
name: 'Errors per Minute',
type: 'spline',
data: errorArrayMinutes,
tooltip: {
valueSuffix: ' '
}
}
data = {
name: 'Average Duration per Minute',
type: 'column',
yAxis: 1,
data: minuteArray,
tooltip: {
valueSuffix: ' ms'
},
data2 //I think this is the error, but I i know no solution
}
console.log('Data:')
console.log(data);
mychart.hideLoading();
mychart.addSeriesAsDrilldown(e.point, data);
});
}
}
},
title: {
text: 'Performance and Error Analytics'
},
subtitle: {
text: 'Analytics of: ' + func
},
xAxis: [{
type: 'category',
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Errors',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration in ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 50,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Average Duration per Hour',
type: 'column',
yAxis: 1,
data: durationPerHourArray,
tooltip: {
valueSuffix: ' ms'
}
}, {
name: 'Errors',
type: 'spline',
data: errorArray,
tooltip: {
valueSuffix: ' '
}
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'normal',
color: 'black'
},
series: []
}
});
The addSeriesAsDrilldown method allows to add only one series to drilldown. From source code:
Chart.prototype.addSeriesAsDrilldown = function (point, options) {
this.addSingleSeriesAsDrilldown(point, options);
this.applyDrilldown();
};
Instad of addSeriesAsDrilldown, you can use internal addSingleSeriesAsDrilldown method to add both series and call applyDrilldown:
mychart.addSingleSeriesAsDrilldown(e.point, data);
mychart.addSingleSeriesAsDrilldown(e.point, data2);
mychart.applyDrilldown();
Live demo: http://jsfiddle.net/BlackLabel/obukspae/
Source code: https://code.highcharts.com/modules/drilldown.src.js
I have data like this
var data = [];
for(var i=1;i<201;i++){
data.push([i,(Math.random() * (80 - 40 + 1)) + 40])
}
And I'm creating chart like this:
$('.reactivityCont').highcharts('StockChart', {
chart: {
marginTop: 140
},
credits: {
enabled: false
},
rangeSelector : {
selected : 1
},
scrollbar: {
enabled: false
},
navigator: {
top : 40,
xAxis: {
labels: {
formatter: function() {
return this.value;
}
}
}
},
xAxis: {
labels: {
y: 50,
formatter: function() {
return this.value;
}
},
events: {
setExtremes: function (e) {
start = parseInt(e.min);
koniec = parseInt(e.max);
$('.nt').hide();
for(var i = start-1;i<koniec;i++){
$('.nt').eq(i).show();
}
main();
}
}
},
series : [{
type: 'column',
name : 'reactivity',
data : data,
showInLegend: false,
tooltip: {
valueDecimals: 2
}
},
{type: 'spline',
name: 'experiment 1',
data: data2,
color: 'green',
visible: false,
tooltip: {
valueDecimals: 2
}
},
{type: 'spline',
name: 'experiment 2',
data: data3,
color: 'red',
visible: false,
tooltip: {
valueDecimals: 2
}
}
],
legend :{
enabled: true,
margin: 0
},
rangeSelector : {
buttons: [
{
type: 'millisecond',
count: seqLength/5,
text: '0.25'
}, {
type: 'millisecond',
count: seqLength/3,
text: '0.3'
}, {
type: 'millisecond',
count: seqLength/2,
text: '0.5'
}, {
type: 'all',
text: '1.0'
}
],
inputEnabled: false, // it supports only days
selected : 4 // all
}
});
But unfortunately, my plot starts with 0, but it should not, because there is no such a value.
I tried fix it, e. g. by setting plotOptions:pointStart but that didn't work.
This is caused by using column type series, where columns always starts from 0. To prevent this set threshold: null, like this:
series : [{
type: 'column',
threshold: null,
...
}]
You can use theXAxis's min param.
For Example.
xAxis: {
labels: {
formatter: function() {
return this.value;
}
},
min: myInitValue,
max: myEndValue
}
Hope It Helps.
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';
}
},
I have Drilled the "Column chart".
& Now I want to Drill down the "Pie chart"
my code for showing Pie chart is as below,
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
}
}
}
},
series:
[{
type:'pie',
data: model.mixchart
}]
});
});
});
How can I do drilldown in this ?
After Drilldown It should show the Pie chart only. So what should I do for that in the code abve?
At least just Give me some reference links for drilldown in Pie chart so that I can Prefer that one.
There are two methods you can drill down pie chart.
Either you can modify same chart data
You can draw new pie chart using the clicked refrence to previous
chart.
here is my Jsfiddle link.
I have drilled down the pie chart to show column chart.
To drill down a pie chart,What you need is the clicked slice.
to do that what you need is,
plotOptions: {
pie: {
point: {
events: {
click: function() {
//logic for drill down goes here
}
}
}
}
},
Note : If you are drilling down in the same chart..
You will also need plot options for that chart type,If you are drilling down to different chart type.
I hope this helps.
cheers :)
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: '#e2dfd3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
//credits for highcharts
credits: {
enabled: false
},
title: {
text: 'Country/Region',
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
borderWidth: 0, // border color control
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
},
dataLabels: {
enabled: true,
color: '#000', //label colors
connectorColor: '#000', // connector label colors
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Country/Region',
data: [
{
name:'United States',
y: 45.0,
},{
name:'Germany',
y: 26.8
},{
name: 'France',
y: 12.8,
sliced: true,
selected: true,
/*drilldown: {
name: ['Disney'],
categories: ['2001', '2002', '2003','2004','2005','2006','2007','2008','2009','2010','2011'],
data: [32591, 29256, 28036, 27113, 26441, 27848, 29210, 29251, 28447, 28731],
color: colors[12]
},*/
},{
name:'Japan',
y: 8.5
},{
name:'United Kingdom',
y: 8.5
},{
name:'Switzerland',
y: 8.5
},{
name: 'South Korea',
y: 6.2
},{
name:'Italy',
y: 6.2
},{
name:'Canada',
y: 0.7
},{
name:'Finland',
y: 0.7
},{
name:'Netherlands',
y: 0.7
},{
name:'Spain',
y: 0.7
},{
name:'Sweden',
y: 0.7
}
]
}]
}/**/
});
});
</script>
Rahul , check out this code. its just sample
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: { renderTo: 'container', type: 'bar'},
title: { text: '' },
xAxis: {
categories: model.buckets,
},
yAxis: {
title: { text: '' }
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var range=this.category[0];
if (step==0) { // drill down
$.ajax({
type: 'POST',
url: root + "analytics/standard_prospects_prospectaging/?json",
data: { range: range, what: 'drill' },
success: function (o) {
setChart("", o.buckets, o.pcounts, '#e48801');
rebind(o.aging);
step = step + 1;
},
dataType: "json"
});
} else { // restore
console.log(this);
$.ajax({
type: 'POST',
url: root + "analytics/standard_prospects_prospectaging/?json",
data: { oppname: range },
success: function (o) {
window.location.href = "/prospects/index/" + o.oppid;
},
dataType: "json"
});
}
}
}
},
}
},
series: [{
name: 'Prospect Aging',color:'#e48801',
data: model.pcounts
}]
});
});