I'm using primefaces with jqplot library.
In my piechart i have the extender property and in the javascript function i have this:
this.cfg.highlighter = {
show:true,
tooltipLocation: 'n',
tooltipAxes: 'y',
useAxesFormatters: false,
tooltipFormatString: '%s'
}
The tooltip shows section value, but not section percentage.
Anybody knows how to show percentage value in tooltip?
Thanks.
You can bind the highlight event in order to modify the tooltip :
$("#chart1").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
var highlightToolTip = $(".jqplot-highlighter-tooltip");
var pct = Math.round(data[1]/total*100);
highlightToolTip.html(data[0]+", "+pct+"%");
});
Where :
data1 is the value of the highlighted slice,
data[0] is the label of the highlighted slice,
total is a variable containing the total value of your plot built here :
data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
var total = 0;
$(data).map(function(){total += this[1];})
Please see a working example on
fiddle here
Related
I found this code from Highchart website: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/
I want to show data on a chart with empty default series and put dateTime as xAxis. I don't want to use jQuery and do not want to add point on load event in chart. I just want to add point when page is loaded completely. I used this
const chart = new Highcharts.chart('container', {
...
...
...
}
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
console.log(chart)
setInterval(function() {
console.log(values[i])
chart.series[0].addPoint(values[i], true, true);
i++;
}, 1000);
})
I used the chart structure like the link above. values[i] is a point which is [dateTime, Number] that I get it from my an API. I found some solutions that uses category for xAxis but I need to use dateTime and show the dateTime there not category.
You can not add a point with shift to a series without data. Add first point without shift or do not use shift: http://jsfiddle.net/BlackLabel/0h9jz3t1/
const chart = new Highcharts.chart('container', {
series: [{}]
});
const values = [[100, 20], [200, 20], [300, 20], [400, 20], [500, 20]];
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
chart.series[0].addPoint(values[i], true, false);
i++;
setInterval(function() {
chart.series[0].addPoint(values[i], true, true);
i++;
}, 1000);
});
Live demo: http://jsfiddle.net/BlackLabel/oqp30tna/
API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
I made a Morris.js graph: http://thuis.xitro.nl/
I do not want to set a value in ymin, I have this on "auto".
I now have very long numbers because of that, example: 55.29999999999999
I want that to show just 55.
It would be even better if my graph just showed: 20, 30, 40, 50, 60, 70.
How can I achieve this? I know some HTML/PHP/MySQL but I'm pretty new to JavaScript.
EDIT: Fixed it myself by using: yLabelFormat: function(y) {return y = Math.round(y);},
Any idea how I can get my chart like this: 20,30,40,50,60,70?
Morris.Line({
// ID of the element in which to draw the chart.
element: 'morris-line-chart-dcr',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [<?php echo $chart_data_dcr; ?>],
// The name of the data record attribute that contains x-visitss.
xkey: 'time',
// A list of names of data record attributes that contain y-visitss.
ykeys: ['eff', 'avg', 'rep'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Decred Effective','Decred Average','Decred Reported'],
lineColors: ['#337ab7','#ffa500','#5cb85c'],
pointFillColors: ['#337ab7','#ffa500','#5cb85c'],
pointStrokeColors: ['#337ab7','#ffa500','#5cb85c'],
pointSize: 3,
hideHover: true,
ymax: "auto",
ymin: "auto",
// Disables line smoothing
smooth: false,
resize: true
});
yLabelFormat: function(y) {return y = Math.round(y);},
Fixed it for me.
Now I only would like to know how I can make them look like: 20,30,40,50,60,70.
Use the following code inside Morris.line Graph
yLabelFormat: function(y) {
return y = Math.round(y);
}
this will format the Y axis labels.
I want to retrieve the value of the column header when a user clicks on 1 of the bars of the chart. A report should be generated with the parameters I retrieve from the chart. This is what I have so far:
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.arrayToDataTable([
['Month', '2014', '2015'],
['Jan', 0, 200.00],
['Feb', 0, 400.00],
['Mar', 0, 700.00],
['Apr', 0, 100.00],
['May', 400.00, 900.00],
['Jun', 1100.00, 0],
['Jul', 3400.00, 0],
['Aug', 2500.00, 0],
['Sep', 2450.00, 0],
['Oct', 3170.00, 0],
['Nov', 2500.00, 0],
['Dec', 1979.00, 0]
]);
var options = {
title: 'Raised'
};
var chart = new google.charts.Bar(document.getElementById('chart_div_month'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var month = data.getValue(selectedItem.row, 0);
var year = data.getValue(0, selectedItem.column);
window.location = 'report.php?submit=Submit&year=' + year + '&month=' + month;
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
I am able to retrieve the month parameter, but not the year.
Reading about google chart tables at their API page it says that
getSelection() - Standard getSelection implementation.
Selection elements are all row elements.
Can return more than one selected row.
So getSelection() doesn't select any column, and therefore var year = data.getValue(0, selectedItem.column);won't work.
Why it is like this I don't know, as the getSelection() returns both a row and a column, but the column is always null (thought it hasn't always been like this, there are loads of examples where people show how it works, but they are all broken today).
I have seen an approach that uses standard javascript (or was it jQuery?) to detect which column is clicked (clicked, not selected) by listening for mouseclicks on tds and getting the column property that way, but I can't seem to find it.
I had implemented the HighCharts in the framework in my company, and I can say that we are super satisfied with it. But we have a problem, we don't know how to solve.
In column graphs, when a column has its value equal to zero, it is no visual information about it, the column is just omitted. I want it displayed in a tooltip when the user mouses over the space of the column where the value is equal to 0.
Watch the fiddle below where it generates a bar chart with several columns with value 0, or worthless.
JsFiddle
The method where the chart runs:
GraficoBarra(arrayPropriedades, arrayDados, arrayDrillDown);
Why not make it a shared tooltip like this:
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y +'m';
});
return s;
},
shared: true
},
Demo here. Note that I have added a 0 point value. If there is no point there then there is nothing to show, right?
{
name: "2012",
data: [
[0, 69347.35],
[1, 120753.55],
[2, 0],
[12, 95050.45]
]
}
As #wergeld said, you need to pass 0-based values to options, otherwise you won't get displayed nothing at all. For nulls it's no possible, since this doesn't have value.
Now,you need to set minPointLength, to some value (like 10), then even 0-values will be displayed as small bars. See demo: http://jsfiddle.net/EJK4e/12/
Just to be on the same page - to display tooltip, you need point graphic, otherwise there will be no hover event for triggering tooltip to show up.
Given the data for a pie chart:
data = new google.visualization.arrayToDataTable([
['Sales', 'Revenue Distribution'],
['Author', 5],
['Company', 2],
['Tax', 0.4],
['Payment Processors', 0.9]
]);
drawChart();
How can I make it display as dollar amounts? Either in the tooltip or on the actual graph itself (both would be preferable!)
For example, ideally this would work:
data = new google.visualization.arrayToDataTable([
['Sales', 'Revenue Distribution'],
['Author', '$5'],
['Company', '$2'],
['Tax', '$0.4'],
['Payment Processors', '$0.9']
]);
drawChart();
It is possible and it will apply it to both the slice and the tooltip. What you need to include is a number formatter.
The key things are to apply the following before you 'create' the chart.
var formatter = new google.visualization.NumberFormat({
prefix: '$'
});
formatter.format(data, 1);
var options = {
pieSliceText: 'value'
};
This first creates the formatter and applies it to the data, the next option then forces the pie chart to show the formatted value, rather than the calculated percentage. You can see it working in this jsfiddle.
Inspired and adapted by the answer here: Formatting google charts programmatically