I'm using Highcharts to show the % difference between the columns.
The labels above the columns represent that bars total. The % between the columns show a % change between each bar. I have positioned the x-axis OK, but the y-axis values are difficult. My aim is to:
Align % values to 50% on the y-Axis (half the height of the chart) and in between the columns so it shows a straight line of values. Currently these numbers are relative to the height of the bar column values.
http://jsfiddle.net/tellmehow/1sr9ab6d/15/
See an image here:
My code as follows.
$(function(){
var data = [1000,800,700,300,250,234,10,1,0,0];
function percent(data) {
var result = [];
for (var i=0; i<data.length -1; i++) {
if(data[i] === 0) {
result[data[i]] = 100;
} else {
result[data[i]] = 100 - (data[i] - data[i +1]) * 100 / data[i];
}
}
return result;
} //percent
$('#highcharts-panel').highcharts({
chart: {
type: 'column',
events: {
redraw: function(event) {
refreshArrowPos();
}
}
},
xAxis: {
categories: [{
text: "various...",
}]
},
yAxis: {
min: 0,
title: {
text: 'whatever'
}
},
tooltip: {
enabled: false,
followTouchMove: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels: {
enabled: true
},
}, //col
series: {
marker: {
enabled: false
},
shadow:false,
borderWidth:0,
dataLabels:{
useHTML: true,
enabled:true,
formatter:function() {
var percents = percent(data);
return (Highcharts.numberFormat(this.y,0) + "<div class='dataPercent'>" + (this.y == data[data.length - 1] ? '' : Highcharts.numberFormat(percents[this.y]) + '%' + "<div class='arrow'></div>") + "</div>");
},
style: {
fontSize: "14px",
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Total users',
data: data,
}],
}
);
function refreshArrowPos() {
$('.dataPercent').each (function(){
var colWidth = ($('#highcharts-panel').width() / data.length);
var colHeight = ($('#highcharts-panel').height() / data.length);
$(this).css({ left: ($(this).position().left + (colWidth / 2) - ($(this).width() / 4 )) + 'px',
top: ($(this).position().top + (colHeight / 2)) + 'px'
}); //end css
}); //dataPErcent fun
} //refreshArrowPos
refreshArrowPos();
});//highCharts Func
<div id="highcharts-pannel" class="funnelChart"></div>
Related
I am Trying to Display The Total Users on the PieChart. But my "getting the Total Code" is not Working. It Displays Nothing.
Here is The Code that I am Using :
events: {
load: function(event) {
var total = 0;
for(var i=0, len=this.series[0].yData.length; i<len; i++){
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
If I Can Show You My Full Code Here it is :
var data = <?php echo $data ; ?>
data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});
Highcharts.chart('pieDiv', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function(event) {
var total = 0;
for(var i=0, len=this.series[0].yData.length; i<len; i++){
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y}
Users)'
},
plotOptions: {
pie: {
colors:
Highcharts.map(["#59deed","#e86e65","#de8f14","#589bcf","#a05195","#35cc95",
"#72a7b3"], function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
}),
states: {
inactive: {
opacity: 1
}
},
allowPointSelect: true,
cursor: 'pointer',
fillOpacity: 1,
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} % <br/>
({point.y} Users)',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Users',
colorByPoint: true,
data: data
}]
});
I am Able to Get the Data on the Pie Chart . but the Total is not being Displayed. It was supposed to be appear on the top Left Corner of the Box
You've made a simple mistake in js for loop code using , instead of ;. Check the code and working demo with total data rendered properly.
Code:
chart: {
events: {
load: function() {
var total = 0,
len = this.series[0].yData.length,
text;
for (var i = 0; i < len; i++) {
total += this.series[0].yData[i];
}
text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add();
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/o4bx6139/1/
Consider the following codesample donut chart using jquery-flot , now as i have added the 'image' class on click of the donut, i want to dynamically add the degree in the 'image' class so that the clicked item will be facing down at the bottom ( like on the -ve side of the y-axis ).`
var data = [{
label: "Pause",
data: 150
}, {
label: "No Pause",
data: 100
}, {
label: "yes Pause",
data: 80
}, {
label: "Sleeping",
data: 250
}];
var options = {
series: {
pie: {
show: true,
innerRadius: 0.5,
radius: 1,
startAngle: 1,
}
},
grid: {
hoverable: true,
clickable: true
},
legend: {
show: false
},
stroke: {
width: 4
},
tooltip: true,
tooltipOpts: {
cssClass: "flotTip",
content: "%s: %p.0%",
defaultTheme: false
}
};
$("#pie-placeholder").bind("plotclick", function(event, pos, obj) {
$("#pie-placeholder").addClass('image')
});
var plot = $.plot($("#pie-placeholder"), data, options);
`
Note:- this is done using Jquery flot
Here you can find my solution to your problem if I got you right.
$("#pie-placeholder").bind("plotclick", function(event, pos, obj) {
if (obj) {
var percentInRads = 0.02;
var currSegmentInRads = percentInRads * obj.datapoint[0]
var currSegmentOffset = currSegmentInRads / 2;
var currSegmentStart = currSegmentOffset >= 0.5 ? -0.5 + currSegmentOffset : 0.5 - currSegmentOffset;
var total = 0;
var beforeTotal = 0;
for (var idx = 0; idx < data.length; idx++) {
var segment = data[idx];
if (idx < obj.seriesIndex) {
beforeTotal += segment.data;
}
total += segment.data;
}
var beforePart = (beforeTotal / total * 100) * percentInRads;
var chartStartAngle = currSegmentStart - beforePart;
options.series.pie.startAngle = chartStartAngle;
$.plot($("#pie-placeholder"), data, options);
console.log(obj.series);
}
});
I made a few graphs with the possibility of putting a mark inside, but I don't understand how to make the mark hoverable with the y-axis value.
$.plot($("#flot-chart-#ControlID"), series_#ControlID, {
series: {
lines: {
lineWidth: 2,
fill: #((Model.Series.Count() == 1).ToString().ToLower()),
},
bars: {
barWidth: 0.6,
align: "center"
},
points: {
fill: #((Model.Series.Count() == 1).ToString().ToLower()),
}
},
xaxis: {
ticks: xlabels_#ControlID,
tickDecimals: 0
},
colors: #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())),
grid: {
color: "#999999",
hoverable: true,
clickable: true,
borderWidth: 0,
#if (Model.LimitLine != null)
{
<text>
markings: [
{ color: '#000', lineWidth: 1, yaxis: { from: #Model.LimitLine, to: #Model.LimitLine }},
]
</text>
}
},
legend: {
show: true
},
tooltip: true,
tooltipOpts: {
content: function(label, xval, yval) {
var content = getLabel_#(ControlID)(xval) + ": " + yval;
return content;
},
}
});
How can i show a tooltip with the value?
Graph example:
You can't do that with the tooltips plugin, but it is possible when doing the tooltips yourself. Something like this:
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) { // hovering over a datapoint
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
var hideTooltip = true;
// you need to save the Flot object for this (here as "plot")
$.each(plot.getOptions().grid.markings, function(idx, marking) {
if (Math.abs(pos.y - marking.yaxis.to) < 10) {
$("#tooltip").html("Limit: " + marking.yaxis.to)
.css({top: pos.pageY + 5, left: pos.pageX + 5}).fadeIn(200);
hideTooltip = false;
return false;
}
});
if (hideTooltip) {
$("#tooltip").hide();
}
}
});
Based on this example.
With the Highcharts value-in-legend plugin http://www.highcharts.com/plugin-registry/single/10/Value-In-Legend, I have been able to kind of implement a sort of multiple series total, but I do not understand how to get a total for a clicked y-axis point.
For example when I click, one day I will get the 3 separate series numbers, but I would like to get a total somehow as well, but I only know the y points on load and the visible y-points on redraw. I think the difficulty is getting the total of the 3 series points versus getting the individual point's value.
$(function() {
// Start the standard Highcharts setup
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// 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++;
if(seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function(event) {
console.log('load');
var total = 0;
for(var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].yData[i];
}
totalText_posts = this.renderer.text('Total: ' + total, this.plotLeft, this.plotTop - 35).attr({
zIndex: 5
}).add()
},
redraw: function(chart) {
console.log('redraw');
console.log(totalText_posts);
var total = 0;
for(var i = 0, len = this.series[0].yData.length; i < len; i++) {
if(this.series[0].points[i] && this.series[0].points[i].visible) total += this.series[0].yData[i];
}
totalText_posts.element.innerHTML = 'Total: ' + total;
}
}
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return(this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
y: 35,
labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>',
borderWidth: 0
},
plotOptions: {
series: {
compare: 'percent',
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: seriesOptions
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/value-in-legend/master/value-in-legend.js"></script>
<div id="container" style="height: 400px; min-width: 500px"></div>
I was able to find out a way to put the total result as a title in a multi series by reading the source code for the Highcharts value-in-legend plugin https://rawgithub.com/highslide-software/value-in-legend/master/value-in-legend.js.
$(function () {
var seriesOptions_likes = [],
seriesCounter_likes = 0,
names_likes = ['MSFT', 'AAPL', 'GOOG'],
totalText_likes = 0;
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createLikesChart() {
Highcharts.stockChart('container_likes', {
chart: {
},
rangeSelector: {
selected: 4
},
title: {
text: 'Total Results: '
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions_likes,
legend: {
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
y: 65,
borderWidth: 0
},
});
}
$.each(names_likes, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions_likes[i] = {
name: name,
data: data
};
// 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_likes += 1;
if (seriesCounter_likes === names_likes.length) {
createLikesChart();
}
});
});
});
(function (H) {
H.Series.prototype.point = {}; // The active point
H.Chart.prototype.callbacks.push(function (chart) {
$(chart.container).bind('mousemove', function () {
var legendOptions = chart.legend.options,
hoverPoints = chart.hoverPoints,
total = 0;
if (!hoverPoints && chart.hoverPoint) {
hoverPoints = [chart.hoverPoint];
}
if (hoverPoints) {
var total = 0,
ctr = 0;
H.each(hoverPoints, function (point) {
point.series.point = point;
total += point.y;
});
H.each(chart.legend.allItems, function (item) {
item.legendItem.attr({
text: legendOptions.labelFormat ?
H.format(legendOptions.labelFormat, item) :
legendOptions.labelFormatter.call(item)
});
});
chart.legend.render();
chart.title.update({ text: 'Total Results: ' + total.toFixed(2) });
}
});
});
// Hide the tooltip but allow the crosshair
H.Tooltip.prototype.defaultFormatter = function () { return false; };
}(Highcharts));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container_likes" style="height: 400px; min-width: 600px"></div>
I'm using highcharts solid gauge with decimal value. Here is the jsfiddle http://jsfiddle.net/7hm1mkbn/
$('#container-temp').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 10.39,
max: 23.83,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Temperature',
data: [23.23],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">C</span></div>'
},
tooltip: {
valueSuffix: ' C'
}
}]
}));
The min-max labels are misplaced. Any suggestion?
If you only want min and max ticks (with labels) you can replace your tickPixelInterval with a static definition of tickPositions. For example (JSFiddle):
yAxis: {
tickPositions: [10.39, 23.83]
}
If you may want more ticks (and labels) you may want to make a more dynamic function using tickPositioner. For example (JSFiddle):
yAxis: {
tickPositioner: function () {
var positions = [],
numberOfTicks = 5;
tick = this.min,
increment = (this.max - this.min) / (numberOfTicks - 1);
for (tick; tick - increment <= this.max; tick += increment) {
positions.push(Math.round(tick * 100) / 100);
}
return positions;
}
}