I am after making high charts graph and tooltip when it is 100 + and 1000 + Have a symbol after it on the toolbar but also have it so that shared: true. Also on the graph when it is say 2394 I am after it to round it down to 2.39 so the graph is not so large and then on the tool bar it would show 2.39K.
I have tried quite a bit and I am not able to figure this out look all over stack overflow and not found anything.
http://jsfiddle.net/sb7n32zn/22/
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area',
backgroundColor: 'transparent',
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
itemStyle: {
color: '#c4c4c4',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
title: {
style: {
display: 'none'
}
},
plotOptions: {
series: {
lineColor: '#808080'
}
},
pane: {
size: '80%',
},
xAxis: {
categories: ['Win Rate', 'Kills', 'Deaths', 'Assits',
'Minions Killed', 'Gold Earned', 'Damage Dealt'],
tickmarkPlacement: 'on',
lineWidth: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
style: {
color: '#c4c4c4',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
style: {
color: '#c4c4c4',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
},
series: [{
name: 'Aatrox',
color: 'rgba(184, 70, 70, 0.7)',
data: [3843, 7, 7, 6, 15.7, 11.78, 22.05],
pointPlacement: 'on'
}, {
name: 'Gay Something',
color: 'rgba(85, 184, 70, 0.5)',
data: [6245, 9, 6, 5, 18.6, 13.54, 23.46],
pointPlacement: 'on'
}]
});
<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 450px; height: 400px; margin: 0 auto"></div>
This is what i currently have:
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
}
You can use the formatter option in tooltip for more complex formatting. See:
tooltip: {
shared: true,
formatter: function () {
console.log(this);
var txt = this.x + ": <br />";
for(var i=0;i<this.points.length;i++){
var value = this.points[i].y;
if(value>=1000){
value = (value/1000).toFixed(2) + 'k';
}
txt = txt + '<span style="color:' + this.points[i].color + '">'
+ this.points[i].series.name + ': <b>' + value + '</b><br/>';
}
return txt;
}
},
In this function if your series value is more or equal than 1000, then it divides by 1000 and fixes 2 decimal cases, furthermore, it adds the 'k' label in the end.
However, the graph is still large because the value is a lot bigger than the others. I think you have to do a preprocessing of the data for that.
Hope it helps! :D
Related
i need add point to highchart x,y . i cannot add my custom xaxis in the label. label automaticly add index of potit .how can i add my text in new point xaixs label ?
var chartPresure = $('#PresureContainer').highcharts();
var series = chartPresure.series[0];
var newpointPresure = updatedresult.Pressure;
if (lastDate != updatedresult.RegisterDatePersian) {
var x = updatedresult.RegisterDatePersian,
y = updatedresult.Pressure;
series.addPoint([x, y, updatedresult.RegisterDatePersian], true);
series.drawPoints();
lastDate = updatedresult.RegisterDatePersian;
}
You can update the axis labels after point add event
function addPoint() {
chart.series[0].addPoint(
Math.floor(Math.random() * 6) + 1,
true,
false
);
//console.log(chart.xAxis[0].categories)
chart.xAxis[0].categories.push(chart.series[0].data.length + 'th element')
//console.log(chart.xAxis[0].categories)
//update chart with category
chart.update({
xAxis: {
categories: chart.xAxis[0].categories
},
});
}
var chart = new Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}]
});
function addPoint() {
chart.series[0].addPoint(
Math.floor(Math.random() * 6) + 1,
true,
false
);
//console.log(chart.xAxis[0].categories)
chart.xAxis[0].categories.push(chart.series[0].data.length + 'th element')
//console.log(chart.xAxis[0].categories)
chart.update({
xAxis: {
categories: chart.xAxis[0].categories
},
});
}
<script src="https://code.highcharts.com/highcharts.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>
<button onclick="addPoint()" class="autocompare">Add point</button>
I need to style it to look like this:
This is the closest I've gotten. The trouble I'm having is achieving that gray background. I tried to do it with CSS but the html generated by highcharts makes that very difficult for me.
http://jsfiddle.net/60x7vkc2/1/
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '95%'],
size: '190%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#ddd',
outerRadius: '100%',
innerRadius: '90%',
shape: 'arc',
borderColor: 'transparent',
}
},
tooltip: {
enabled: false
},
title: {
style: {
color: '#666',
fontSize: '16px',
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
}
},
// the value axis
yAxis: {
stops: [
[0.1, '#c62026'], // red
[0.25, '#e77525'], // orange
[0.75, '#70be44'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 0,
tickWidth: 0,
title: {
y: -50
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
innerRadius: '90%',
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
},
}
},
credits: {
enabled: false
},
};
// ON TARGET
$('#ex-gauge').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100
},
title: {
text: 'Title',
},
series: [{
name: 'customers',
data: [63.7],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;' +
'black' + '">{y}%</span>'
}
}]
}));
});
I added the "prc" class to the div and created new css rules.
Fiddle demo
CSS
.prc {
position: relative;
top: 0px;
width: 70px;
height: 35px;
background-color: #ddd;
border-radius: 70px 70px 0 0;
}
.prc span {
position: relative;
top: 12px;
}
Script
series: [{
name: 'customers',
data: [63.7],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-size:14px;' +
'black' + '">{y}%</span>'
}
}]
I did a chart and generally it works pretty good.
If I open my .html file with safari on MAC OX it works well.
If I open the file with Internet Explorer no chart appears. I now start the Debug Mode an I see an exception at highchairs.js line 167:
(I want to upload an image of this, but it says i need at least 10 reputations to post images).
Behind "_legendItemPos," "e=d[0]" ist marked and it says: Property "0" of an undefined or Zero-reference can not be recalled
My .html file looks like this, with 3 JSON Files named: Daten1, Daten2, Daten3
!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="Highcharts\exporting-server\phantomjs\jquery.1.9.1.min.js"></script>
var fullPath = document.getElementById('upload').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
alert(filename);
}
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: -30
}
}
},
title: {
text: 'Testgraph',
x: -20 //center
},
subtitle: {
text: '3 Datensätze mit 3 Y-Achsen',
x: -20
},
xAxis: {
lineWidth: 1,
//lineColor: Highcharts.getOptions().colors[1],
gridLineWidth: 1,
//gridLineColor: Highcharts.getOptions().colors[1],
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
},
tickPixelInterval: 150,
maxZoom: 60000,
title: {
text: 'Zeit',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
yAxis: [{
lineWidth: 0,
lineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
//gridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 5,
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperatur',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
},
{
//gridlineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 5,
gridLineWidth: 1,
labels:{
format: '{value}ml',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Volumen',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
},
{
//gridlineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 50,
labels:{
format: '{value}mbar',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Druck',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2)+
this.series.tooltipOptions.valuePrefix;
}
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'center',
layout: 'horizontal',
borderWidth: 1
},
series: [{
name: 'Temperatur',
data: [],
tooltip: {
valuePrefix: '°C'
},
color: Highcharts.getOptions().colors[0]
},
{
name: 'Volumen',
yAxis:1,
data: [],
tooltip: {
valuePrefix: 'ml'
},
color: Highcharts.getOptions().colors[3]
},
{
name: 'Druck',
yAxis:2,
data: [],
tooltip: {
valuePrefix: 'mbar'
},
color: Highcharts.getOptions().colors[2]
}
]
}
$.getJSON("Daten1.json", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
$.getJSON("Daten2.json", function(json) {
options.series[1].data = json;
chart = new Highcharts.Chart(options);
});
$.getJSON("Daten3.json", function(json) {
options.series[2].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="Highcharts\js\highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>
I have no idea what ist not working correct. I have the latest Highcharts Version.
Any hint would be helpful. Thanks for your help, Patrick
The IE / Chrome / FF doens't call ajax locally. So you need to setup your own webserver and run your code.
how to hide datalabels of a heatmap based on condition i.e. i want to hide all the datalabels which are (==0 or <50). As there is a bug in Highcharts api, when ever i restore the browser the zero's show up in unusual order.
Bug Link
As of now i found a workaround replacing 0 with '0' but i dont want to show that on the heatmap. Here is the fiddle jsfiddle , in fiddle its working but when implemented on application it's replicating that bug.
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
plotBackgroundColor: {
linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
stops: [
[0.03, 'rgb(247, 88, 45)'],
[0.5, 'rgb(255, 224, 80)'],
[0.67, 'rgb(54, 64, 207)'],
[0.99, 'rgb(13, 163, 35)'],
[1, 'rgb(217, 186, 50']
]
}
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
},
yAxis: {
categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
title: null
},
colorAxis: {
min: 0,
minColor: 'transparent',
maxColor:'transparent'
//maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,0],[0,1, 0],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
});
I'm using Jasper studio the workaround snippet is
series.dataLabels.formatter:{function(){ if(this.point.value == 0) { return '0';} else { return this.point.value;}}}
The simples way is using datalabels formatter which allows to add condition.
plotOptions:{
series:{
dataLabels:{
formatter:function(){
if(this.point.value >=50)
return this.point.value;
}
}
}
},
Example: http://jsfiddle.net/4aqhB/246/
Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC',
borderRadius:0,
margin: [0, 150, 30, 0]
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: '#E9E7DC',
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>';
}
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});
A more generic & dynamic answer:
legend: {
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
return this.name + '- Total: ' + total;
}
}
Figured it out. I added the total to the series, then called it with this.options. See updated code below:
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>';
}
},
series: [{
name: 'Honeywell',
total: 9150,
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
total: 10548,
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
total: 9301,
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});