My chart is very simple and is something like this:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['week', 'rate'],
['1', 0.156],
['2', 0.232],
['3', 0.446],
['4', 0.832],
['5', 0.702],
['6', 0.773],
['7', 0.842],
['8', 0.413],
['9', 0.278],
['10', 0.323],
['11', 0.312],
['12', 0.309],
['13', 0.134],
['14', 0.137]
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 1}}
);
}
But I have NO IDEA how to format the data column to show as a pecentage in the tooltip. Can you guys give a hand?
Use a NumberFormatter:
var formatter = new google.visualization.NumberFormat({pattern: '#%'});
formatter.format(data, 1); // format column 1
You may also want to format the y-axis:
vAxis: {
maxValue: 1,
format: '#%'
}
Add a column like this
{role: 'tooltip'}
I had the same problem and fixed it.
See for yourself!
Related
I have an html table defined based on dynamic data. The table contains a thead, tfoot and tbody. The tfoot is mapped to specific values within my json. However, when using JSPDF Autotable and exporting to PDF the footer is not rendered. I have seen information but no code examples of the showfoot option and have tried it after the doc.autotable, and even after the style options but to no avail. The footer is not exported. I'm sure it super simple - but I can't seem to figure it out. Note: I do not want JSDPF Autotable to 'create' a footer - it is defined, it is part of my table - I simply want it rendered on the pdf. I found an old stackoverflow from 2016 where this was mentioned - Simon B. commented it would be added - the topic was closed - but I couldn't find a code example anywhere.
Here is my jspdf autotable code where I have tried to 'show my footer' - but to no avail. Any assistance appreciated.
<script>
function generate() {
//Creation of PDF document
let doc = new jsPDF('l', 'pt');
const totalPagesExp = '{total_pages_count_string}';
var elem = document.getElementById('${pm.info.requestId}');
var data = doc.autoTableHtmlToJson(elem);
doc.autoTable(data.columns, data.rows, {
headStyles: {
cellWidth: 'wrap',
fontSize: 10,
lineWidth: 0,
lineColor: [0, 0, 0],
textColor: [0, 0, 0],
fillColor: [255,255,255]
},
bodyStyles: {
cellWidth: 'wrap',
fontSize: 8,
lineWidth: 0,
lineColor: [0, 0, 0],
textColor: [0, 0, 0],
fillColor: [255,255,255]
},
footStyles: {
cellWidth: 'wrap',
fontSize: 10,
lineWidth: 0,
lineColor: [0, 0, 0],
textColor: [0, 0, 0],
fillColor: [211,211,211]
},
//Formatting of pages
didDrawPage: function (data) {
//Summa logo on top of the page
doc.addImage('${pm.variables.get("summa")}', 'PNG', 20, 20, 145, 42.63);
//Font sizes of report information
doc.setFontSize(8);
//Report information: portfolio name, knowledge time and report time
doc.text(35, 75, '${pm.variables.get("portfolioName")}');
doc.text(35, 85, '${pm.variables.get("reportTime")}');
doc.text(35, 95, '${pm.variables.get("knowledgeTime")}');
//Page numbers
var str = "Page " + doc.internal.getNumberOfPages()
if (typeof doc.putTotalPages === 'function') {
str = str + " of " + totalPagesExp;
};
//Page size
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
doc.text('Theme "plain"', 14, 16);
},
margin: {
top: 100
},
});
//Number of pages
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
},
//--------------------------------------------------------------------------------------------------START
//Change name of report if desired
doc.save('${pm.info.requestName}${pm.variables.get("reportTime")}.pdf');
//--------------------------------------------------------------------------------------------------END
}
Not sure if you already managed to export footer totals to the jspdf. I got it to working, with a small adjustment.
Replace the var elem = document.getElementById('${pm.info.requestId}'); to var elem = document.getElementById('NAME');
And replace the doc.autoTable(data.columns, data.rows, { to doc.autoTable({html: '#NAME',
I am using highcharts for statistical data displaying. I want to display , on the stack label , the average of all the values .
Below is what i am doing but i cant seem to get it right :
yAxis: {
min: 0,
title: {
text: 'Task'
},
stackLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function() {
return (this.axis.series[1].yData[this.x]).toPrecision(2) + '%';
}
}
},
The above only takes the last value on the stack and shows the percentage. For instance , if the last value is 50 , the above displays 50% as the stack value . I want to take an average of all the values. Any help would be appreciated.
If you want to show any stack's percentage mean if your stacked column has two stack A-5 and B-10 , then the % of B in column is 66% and % of A is 33%. If you want to show that use following in formatter function ( refer This Fiddle Link)
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
}
Updating as per OP 's comment Refer Working fiddle here
Use following code : Make your data in a variable and calculate the sum
var seriesData = [{
name: 'Incomplete',
data: [1, 3, 4, 7, 20]
}, {
name: 'Complete',
data: [3, 4, 4, 2, 5]
}];
var total = 0;
$.each(seriesData,function(item){
$.each(seriesData[item].data,function() {
total += this;
});
});
And then use following in stacklabel formatter :
formatter: function() {
return ( this.total/ total * 100).toPrecision(2) + '%';
}
series:seriesData
hope it helps :)
This doesn't seem to be as easy as it should be.
I would accomplish this by pre-processing the data to generate an array of averages, and then referencing that array from the stackLabels formatter function.
Example, build the averages (assumes array 'data' with sub array for each series data values):
var sum = 0;
var averages = [];
var dataLen = data.length;
$.each(data[0], function(x, point) {
sum = 0;
for(var i = 0; i < dataLen; i++) {
sum += data[i][x];
}
averages.push(sum/dataLen);
})
And then in the formatter:
yAxis : {
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(averages[this.x],2);
}
}
}
Example:
http://jsfiddle.net/jlbriggs/vatdrecb/
If I could find a way to get a reliable count of the points in each stack, you could just use
return this.total/countOfPoints;
in the formatter without needing to build an array, but I can't seem to reliably get that count.
Is it possible not to connect points between years? See screenshot of graph below. I've been told it's misleading. My only solution so far is to create year end nulls for each sample year of each station. That's about 750 entries in SQL table. Seems crude. Can anyone come up with a more elegant and programmatic solution.
Data is retrieved via json from Postgresql.
Any suggestions or references would be greatly appreciated,
Gaps in series can be created through null value points.
Other option is to place data for each year in different series that will be linked together and have same color options and names.
Example: http://jsfiddle.net/kcccL6vw/1/
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
pointStart: Date.UTC(2013, 11, 30),
pointInterval: 3,
pointIntervalUnit: 'month',
data: [1,2,3,4,5],
name: 'Series',
id: 'S1',
color: '#fa0'
},{
pointStart: Date.UTC(2015, 0, 15),
pointInterval: 3,
pointIntervalUnit: 'month',
data: [1,2,3,4,5],
name: 'Series',
linkedTo: 'S1',
color: '#fa0'
}]
});
});
Use scatter plot instead of line chart if you dont want to connect points.
type:'scatter'
It's ugly but it works for now. I got the year range of existing data then appended records with all year end('12/31/20xx')null values to existing data. connectNulls: false prevented any points connecting to them.Then sorted the array by date which was unnecessarily difficult.
I know my JavaScript skills suck, so if anyone sees a way to tighten it up, please respond. I need all the help i can get. Here's my jsfiddle I was working from
Thanks to all for help and suggestions,
Michael
var cruiseDate = [];
for (var i = 0; i < data.length; i++) {
sampleDate = data[i][1];
thisDate = moment(sampleDate).format('MM/DD/YYYY');
cruiseDate.push([thisDate]);
}
var minDate = moment(cruiseDate[0], "MM/DD/YYYY").year();
var maxDate = moment(cruiseDate[cruiseDate.length - 1], "MM/DD/YYYY").year();
console.log('first year: ' + minDate + ' last year: ' + maxDate);
for (var i = minDate; i <= maxDate; i++) {
temp = null;
insertDate = moment('12/31/' + i).valueOf();
console.log('epoch: ' + insertDate + ' ' + moment(insertDate).format("MM/DD/YYYY"));
data.push(["year-end-null", insertDate, 0, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp])
}
function compare(a, b) { // from stackoverflow
var aDate = new Date(a[1]);
var bDate = new Date(b[1]);
if (aDate < bDate) return -1;
if (aDate > bDate) return 1;
return 0;
}
data.sort(compare);
I am new to Highcharts.
I have a line chart. Here is the categories:
["9/7/14", "9/8/14", "9/9/14", "9/10/14", "9/11/14", "9/12/14", "9/13/14", "9/14/14", "9/15/14", "9/16/14", "9/17/14", "9/18/14", "9/19/14", "9/20/14", ...]
Here is the data series:
[1, 4, 0, 2, 1, 1, 1, 5, 3, 1, 0, 0, 6, 8, ... ]
I added zoom to my chart, very similar to this jsfiddle demo: http://jsfiddle.net/348sh/3/
chart: {
renderTo: 'container',
zoomType: 'x'
},
I would like to get the total of only those Y values within the zoomed-in window, not the total of the entire data series. For this, I need to capture what values are included in the x axis in the zoomed window. So I added the following based on my research:
xAxis: {
type: 'line',
events: {
setExtremes: function(event) {
console.log(event.min);
console.log(event.max);
}
}
}
However, the values for event.min or event.max are numbers such as 3.6552511415525117, 7.10730593607306. I have no way to know which x values are included in the zoomed window. How can I find which x values are included? Any way to get the start and end x values ?
Thanks!
I did further research. I notice that I may have answered my question already in my question. It turns out that the numbers I gave in my question are very helpful, not clueless. Math.ceil(min) and Math.floor(max) are just the beginning and ending index of the data points in the data series that are show up in the zoomed window. The another thing to note is to use afterSetExtremes event. This is the moment where chart finalizes the starting and ending points in the X axis. So the complete answer is:
xAxis: {
type: 'line',
events: {
afterSetExtremes: function(event) {
var start = Math.ceil(event.min);
var end = Math.floor(event.max);
}
}
}
I am new to Highcharts and love to get corrected if I am wrong.
Cheers.
This may help you . Try this fiddle : http://jsfiddle.net/7kv9a25r/ .
chart: {
events: {
selection: function (event) {
var text,
label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
},
zoomType: 'x'
},
I've gotten examples of this working in highcharts, but I am having trouble getting this to work in highstocks. I am trying to get my tooltip to show some extra information about the point provided in the series but it seems like the values I put in my series data hash aren't being saved properly. The X and Y fields are being set ok since I can see the graph coming out correctly, but my other "fruit" and "name" fields are reporting null in the tooltip.
Here is an example of my series data:
{
name: 'food1',
fruit: 'apple',
x: Date.UTC(2010, 0, 1),
y: 216.4
},
{
name: 'food2',
fruit: 'banana',
x: Date.UTC(2010, 0, 4),
y: 116.4
}
And here is my loop inside my tooltip formatter:
$.each(this.points, function(i, point) {
s += '<br/>Name is = '+ point.name;
s += '<br/>y is = '+point.y;
s += '<br/>Fruit is = ' +point.fruit;
});
The tooltip will show:
Name is: undefined
y is: 216.4
Fruit is: undefined
And I want it to show:
Name is: food1
y is: 216.4
Fruit is: apple
Here is the jsfiddle link:
http://jsfiddle.net/hYtUj/5/
you are accessing the attributes in a wrong way
it dhould be like this
$.each(this.points, function(i, point) {
s += '<br/>Name is = '+ point.point.name;
s += '<br/>y is = '+point.y;
s += '<br/>Fruit is = ' +point.point.fruit;
});
updated your fiddle here
I hope this will help you