I'm trying to show the total in xAxis labels (categories) in the following JSFIDDLE:
...
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
formatter: function() {
return this.value + ' (' + 'total?' + ')';
}
}
},
...
Someone knows how could I get the total there?
The main problem here is that total and all other points are not yet generated, so you need to calculate total on your own, for example:
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
formatter: function() {
var index = this.axis.categories.indexOf(this.value),
sum = 0;
$.each(this.axis.series, function(i, s) {
sum += s.options.data[index];
});
return this.value + ' (' + sum + ')';
}
}
},
Demo: http://jsfiddle.net/jnkpvreL/
Related
I am using high chart in my project. Currently when user mouse over on the data points the tool tip will be displayed top to the data points. Some times the data are big and the tool tip will look very big, hence user wants to display the tool tip value next to the legend title during mouse over of the data points.
Example Legends should look like below:
Female % 23 Male % 22
Here 23 and 22 are the data points value which should be printed next to legend label when we mouse over on the data points.
The 23 and 22 value should be changed as per the mouse over on the data points.
enter code here
primaryChart = $('#container').highcharts('StockChart', {
chart: {
// my code
},
yAxis: [{
// my code
}],
xAxis: {
// my code
},
plotOptions: {
// my code
},
tooltip: {
//enabled: false,
followPointer: false,
useHTML: true,
formatter: function () {
//debugger;
var precision;
var s = '<b>' + Highcharts.dateFormat('%A, %b %e %Y, %H:%M:%S', new Date(this.x)) + '</b>';
$.each(this.points, function () {
precision = GetTooltipData(this.series.options.paramID);
s += '<br/ ><span style="color:' + this.series.options.color + '">' + this.series.name + '</span> : ' + parseFloat(this.y.toFixed(precision)) + ' ' + this.series.yAxis.axisTitle.textStr;
// s += "<div class='comment_filter'><a class='comments_buble' href='#' data-series='" + this.point.index + "'>Comment</a></div>";
});
return s;
},
shared: true
},
series: chartData,
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'left',
borderColor: '#909090',
verticalAlign: 'top'
},
credits: {
enabled: false
}
});
You can use positioner function for tooltip to place it next to a legend:
tooltip: {
positioner: function() {
var legend = this.chart.legend,
x = legend.group.translateX + legend.legendWidth,
y = legend.group.translateY;
return {
x: x,
y: y
};
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/3rsp4bdy/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner
enter code here
tooltip: {
followPointer: true,
useHTML: true,
split: false,
formatter: function () {
var s = '<span>' + this.series.name +'</span>';
this.series.legendItem.element.innerHTML = s;
return false;
},
shared: true,
},
I try to make a chart with multiple series type, lines and column.
Exemple here :Jsfiddle
$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
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
});
}
$.each(names, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions[i] = {
name: name,
data: data,
};
if(name == 'GOOG'){
seriesOptions[i].type = 'column';
}
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
When i'm not zooming i have wrong data (more than normal) and when i zoom in i have the good data.
what is the problem ? i don't know why the serie type can change datas
Thanks for you help !
Defaulty the Highstock uses the dataGrouping, which groups points according to units. You can disable that by the parameter.
plotOptions:{
series:{
dataGrouping:{
enabled: true
}
}
}
I have created a highcharts type column for 2 series Men and Women. I want to display the total counts which is Installs and display below Legend as shown in the image.
How do I use the HTML with Icons with the total values.
Here is my code for the highcharts and JSFiddle
$(function () {
$('#stats-container').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: null,
xAxis: {
categories: ['15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '45-50']
},
yAxis: {
min: 0,
max: 90,
pointInterval: 30,
labels: {
formatter: function () {
return this.value + 'K';
}
},
title: null
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y;
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top',
layout: 'horizontal'
},
series: [{
name: 'Men',
color: '#79ccde',
data: [57.56, 82, 32, 28, 12, 13, 7],
stack: 'male'
}, {
name: 'Women',
color: '#8787f5',
data: [33.66, 60, 35, 15, 10, 16, 9],
stack: 'female'
}]
});
});
How can I achieve the same legend with total counts and custom HTML?
For calculating total values of both series and displaying it in your legend you can use legend.labelFormatter:
http://api.highcharts.com/highcharts#legend.labelFormatter
Inside labelFormatter function you can iterate over all of your series points and add its value to sum you want to show in your label.
If you want to add image to your legend label you need to set legend.useHTML to true:
http://api.highcharts.com/highcharts#legend.useHTML
Then you can format your legend as HTML div. For example:
labelFormatter: function() {
var target = '<br>Target: ' + this.userOptions.target || 0,
installs = 1,
string, img;
Highcharts.each(this.userOptions.data, function(p, i) {
installs += p;
});
if (this.name === "Women") {
img = '<img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Woman_Silhouette_52.svg/2000px-Woman_Silhouette_52.svg.png" style = "width:45px"/> ';
} else if (this.name === "Men") {
img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/1/17/Human_outline.svg" style = "width:20px"/> ';
}
string = '<div style = "width: 200px">' + '<div class = "leg">' + img + '</div>' + '<div class = "leg">' + this.name + target + '<br>Installs: ' + installs + '</div>' + '</div>';
return string
}
For hiding standard legend symbol you can set its width to 0:
http://api.highcharts.com/highcharts#legend.symbolWidth
If you want to show your tooltip the same way as you show in your image, you can use tooltip.shared property:
http://api.highcharts.com/highcharts#tooltip.shared
example:
http://jsfiddle.net/am6zjhrj/10/
I am attempting to write a function to add a highchart to a page and a function that can update the data for that chart based on a streaming API. I added a setInterval to simulate the streaming api.
The issue occurs on line 80. I believe it is because I have not set the series array with the chart object properly. When I need to add new data via 'addPoint', the prototype is not there. What am I missing in my AddChart function that wires the series up to highcharts?
FIDDLE:
http://jsfiddle.net/puto3Lg0/2/
$(function () {
$(document).ready(function () {
var metrics = [];
Highcharts.setOptions({
global: {
useUTC: false
}
});
function AddChart(metric) {
$("#divMain").append('<div id="' + metric.key + '" style="min-width: 310px; height: 200px; margin: 0 auto"></div>');
$('#' + metric.key).highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
},
title: {
text: metric.Title
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Messages'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
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);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: metric.series
});
};
function ParseData(message) {
var jsonObj = JSON.parse(message);
$.each(jsonObj.Metrics, function(index, value) {
var metricName = value.Metric.Name.replace(' ', '');
if (metrics[metricName] == undefined) {
metrics[metricName] = {
"title": value.Metric.Name,
"key": metricName,
"series": [
{
name: value.Metric.Name,
data: []
}
],
}
AddChart(metrics[metricName]);
}
metrics[metricName].series.addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
});
};
setInterval(function () {
var m = "{\"Metrics\": [{\"Metric\":{\"Name\":\"Queue 01\",\"CurrentValue\":\"0\",\"TimeStamp\":\"\\\x2FDate(1415826323291)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 02\",\"CurrentValue\":\"3\",\"TimeStamp\":\"\\\x2FDate(1415826323344)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 03\",\"CurrentValue\":\"9\",\"TimeStamp\":\"\\\x2FDate(1415826323405)\\\x2F\"}}]}";
ParseData(m);
}, 1000);
});
});
First, you have metrics declared as an array. Should be an empty object:
var metrics = {};
Second, the data structure you've created, metrics[metricName].series is not a Highcharts series object. It's an object you created and used to supply Highcharts data. To get the real series object, you'll have to get it back from the chart.
// getting the chart from the DOM, then the first series...
$("#"+metricName).highcharts().series[0].addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
Updated fiddle.
I follow the following guide to create a live chart:
http://www.highcharts.com/documentation/how-to-use#live-charts
It catch the values and update the chart every '3' seconds. It works fine!
Now, is it possible to show the real time value on labels? Something like:
This should be change every polling..... Or at least, show the last generated value in other chart place?
This is my HTML/JS code to generate the chart:
<script type="text/javascript">
var chart; // global
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 30; // shift if the series is longer than 20
var series = chart.series[1],
shift = series.data.length > 30; // shift if the series is longer than 20
var series = chart.series[2],
shift = series.data.length > 30; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint([point[0], point[1]], true, shift);
chart.series[1].addPoint([point[0], point[2]], true, shift);
chart.series[2].addPoint([point[0], point[3]], true, shift);
setTimeout(requestData, 3000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 40 * 1000
},
yAxis: {
minPadding: 0.5,
maxPadding: 0.5,
showLastLabel: true,
title: {
text: '',
margin: 1
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M:%S', this.x) +'<br/>'+
'MDA: '+ this.y;
}
},
series: [{
name: 'Point1',
data: []
}, {
name: 'Point2',
data: []
}, {
name: 'Point3',
color: '#FF00FF',
data: []
}]
});
});
</script>
Here is the link of a topic on how to change legend text dynamically from highcharts forum. [http://highslide.com/forum/viewtopic.php?f=9&t=18805&p=76061&hilit=change+series+name#p76061][1]
[1]: http://highslide.com/forum/viewtopic.php?f=9&t=18805&p=76061&hilit=change%20series%20name#p76061 Hope it helps!