it's my first qestion in stack !
I try to add multiple hidden value in tooltip
my data example :
var sample1= [{y:3.1,ext1:'14.5',ext2:'14.5',color:'#0ef43c'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#30ff21'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#42ff2c'},etc...
var sample2= [{y:3.1,ext1:'14.5',ext2:'14.5',color:'#0ef43c'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#30ff21'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#42ff2c'},etc...
and my tooltip
tooltip: {
shared: true,
formatter: function() {
var txt = Highcharts.dateFormat("<b>%Hh</b>", this.x);
txt += "<br /><b>Sample 1: </b>"+ this.points[0].point.y + " m - " + this.points[0].point.ext1 + "s" + this.points[0].point.ext2+ "s";
txt += "<br /><b>Sample 2: </b>"+ this.points[1].point.y + " m - " + this.points[1].point.ext1+ "s" + this.points[1].point.ext2+ "s";
txt += "<br />Sample 3: :" + this.points[2].point.y + " m";
return txt;
}
},
But there is problem with hidden data , so is there a way for use a code as
sample1.data.point.ext1
instead of this.points[0].point.ext1 ?
Thanks
Related
I have the following highcharts graph
https://jsfiddle.net/deemgfay/
and I am trying to display the "Consum Test" values in the tooltip but without adding them to the series. I just want to add Consum (l/100km)
Total Consum (l) to the series. Is that possible with hightcharts? Please see the screenshot below.
You can set the extra series to be hidden and ignored in legend:
visible: false,
showInLegend: false
Then use tooltip formatter function (useHTML must be enabled) to display points from all series in the shared tooltip regardless of their visibility:
formatter: function() {
var html,
originalPoint = this.points[0];
// header
html = "<span style='font-size: 10px'>" + originalPoint.x + "</span><br/>";
// points
originalPoint.series.chart.series.forEach(function(series) {
var point = series.points.find((p) => p.x === originalPoint.point.x);
html += "<span style='color: " + series.color + "'>\u25CF</span> " + series.name + ": <b>" + point.y + "</b><br/>"
});
return html;
}
Live demo: https://jsfiddle.net/kkulig/1oggzsx0/
API references:
http://api.highcharts.com/highcharts/tooltip.formatter
http://api.highcharts.com/highcharts/tooltip.useHTML
This can be done by using tooltip.formatter. Here I append to tooltip info based on index of current series from index of required extra array.
formatter: function() {
var s = '<b>' + this.x + '</b>';
var reqpoint = 0;
$.each(this.points, function() {
var reqpoint = this.point.index
s += '<br/>' + this.series.name + ': ' +
this.y.toFixed(2) + 'm';
if (this.series.index == 1) {
s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
}
});
return s;
},
Fiddle demo
I have this code, it works if i run it from Script Editor, but doesnt run when i change the cell to "Send Melding". The script runs until it comes to MailApp.sendEmail, then it stops..
Heres the code :
function onEdit(e) {
var s = SpreadsheetApp.getActiveSheet(), r, colCell;
if(s.getName() === 'SkapOversikt') { //checks that we're on the correct sheet
r = s.getActiveCell();
colCell = r.getColumn();
if(colCell === 1 || colCell === 6) { //checks the column
nextCell = r.offset(0, 0);
if(nextCell.getValue() === 'Send Melding') { //Inneholder "Send Melding", kjør script
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var cell = ss.getActiveCell().getA1Notation();
var row = sheet.getActiveRange().getRow();
var cellvalue = ss.getActiveCell().getValue().toString();
var recipients = sheet.getRange(7, 7).getValue();
var subject = 'Skapoversikt har blitt oppdatert på : '+sheet.getRange(4, 2).getValue();
var body = 'Blåse info på ' + sheet.getRange(4, 2).getValue() + ' har blitt oppdatert. ' + '\n' + '\nFølg link for å se endringer : ' + ss.getUrl() + '\n' + '\n' + 'Melding fra melder : ' + '\n' + '" ' + sheet.getRange(6, 7).getValue() + ' " ' + '\n ' + '\n (Dette er en generert mail fra Google Sheets og vil ikke kunne besvares) ' + '\n' + '\n - AK AS ';
MailApp.sendEmail(recipients, subject, body);
var sheet = SpreadsheetApp.getActive().getSheetByName('SkapOversikt');
sheet.getRange('G6').setValue('Ingen Melding');
sheet.getRange('A6').setValue('Velg');
Browser.msgBox('Takk for det - Meldingen er sendt!' , 'Meldingen er sendt til : '+sheet.getRange(7, 7).getValue()+ '\n' + ' - (Fra epost : )', Browser.Buttons.OK);
}
}
}
}
I don't think you can send emails on a simple onEdit trigger. Try changing the name of your function (e.g: sendMails(e) ) and add an installable trigger by going into Resources > add a trigger > sendMails > from spreadsheet > on Edit.
See if it then works ?
I am using a stock chart to show trend data. On the backend I am getting what the valueSuffix should be (or valuePrefix as the case may be). I am also formatting the date display in the tooltip. Here is the important part of the series declaration:
...
name: 'Wages',
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
Here is the tooltip formatter:
...
tooltip: {
formatter: function () {
var s = '<b>';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + 'Q1';
}
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + 'Q2';
}
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + 'Q3';
}
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + 'Q4';
}
s = s + ' ' + Highcharts.dateFormat('%Y', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color: ' + point.series.color + '">' + point.series.name + ':</span>' + point.y;
});
return s;
}
}
...
Example jsFiddle.
If you notice the prefix for the dollar sign is not showing on the Wage series. I am not really sure what I am missing here.
The fix is to break up the label formatting and the value formatting into distinct sections. See example jsFiddle.
Set the chart.tooltip like:
...
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
xDateFormat: '%Q'
},
...
On the xAxis I replaced the label formatter with:
...
format: '{value: %Q}'
...
Inside the series I kept my suffix/prefix/decimals the same:
...
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
The big change came when I found that you can set your own date format label. I created one for Quarters (which is what I did the original cumbersome code for):
Highcharts.dateFormats = {
Q: function (timestamp) {
var date = new Date(timestamp);
var y = date.getFullYear();
var m = date.getMonth() + 1;
if (m <= 3) str = "Q1 " + y;
else if (m <= 6) str = "Q2 " + y;
else if (m <= 9) str = "Q3 " + y;
else str = "Q4 " + y;
return str;
}
};
I now get the tooltip to show the correct labels.
Unless something has changed in a recent version, you can't set your tooltip options within the series object. You can set anything that you would set in the plotOptions on the series level, but not the tooltip.
You can set a check within your main tooltip formatter to check for the series name, and apply the prefix accordingly.
{{edit::
This appears to be an issue of the formatter negating the valuePrefix setting.
Old question... but I spent hours looking for an acceptable way to do this.
/!\ : Before OP's answer...
If someone is looking for a way to use the formatter provided by highcharts (pointFormat attribute) (Doc here: LABELS AND STRING FORMATTING), you will find a (bad) example here :
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/pointformat/
Why "bad" ? because if you change :
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
with :
pointFormat: '{series.name}: <b>{point.y:,.1f}</b><br/>',
you add thousand separators (useless here) and force number format to 1 decimal ... and loose the suffix.
The answer is : series.options.tooltip.valueSuffix (or series.options.tooltip.valuePrefix)
Example :
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y:,.0f}{series.options.tooltip.valueSuffix}</b><br/>',
Hope this will save you some time.
Now OP's Answer :
Based on what I said, you can change :
$.each(this.points, function (i, point) {
s += '<br/><span style="color: ' + point.series.color + '">' + point.series.name + ':</span>' + point.y;
});
For this :
$.each(this.points, function (i, point) {
s += '<br/><span style="color: ' + point.series.color + '">'
+ point.series.name + ':</span>'
+ (typeof point.series.options.tooltip.valuePrefix !== "undefined" ?
point.series.options.tooltip.valuePrefix : '')
+ point.y
+ (typeof point.series.options.tooltip.valueSuffix !== "undefined" ?
point.series.options.tooltip.valueSuffix : '');
});
This will add prefix and/or suffix if they exists
I am having an issue using a single page approach. When I move to my "filter page" I want to populate a list of applications via ajax i simulated the call here.
function populateList()
{
$('#drpApplication').empty().listview('refresh');
if (typeof cache["FilterCounter"] == "undefined") {
cache["FilterCounter"] = 1;
}
var listItem = "<option value=" + '\'' + '1' + '\'' + ">" + 'Name1' + "</option>";
$('#drpApplication').append(listItem);
var listItem2 = "<option value=" + '\'' + '2' + '\'' + ">" + 'Name2' + "</option>";
$('#drpApplication').append(listItem2);
var listItem3 = "<option value=" + '\'' + '3' + '\'' + ">" + 'Name3' + "</option>";
$('#drpApplication').append(listItem3);
}
Clicking apply puts me to another page, then when I go back to the filter page the application list Appends a new set of data. Eventhough I tell it to empty the dropdown first. Also selecting an application in the dropdown is suppose to add the selection to another listview on the page
$('#drpApplication').change(function () {
$("#drpApplication option:selected").each(function () {
var filterItemId = 'liApplicationName' + cache["FilterCounter"].toString();
$('#lstApplicationList').append('<li value="' + $(this).val() + '" id="' + filterItemId + '"data-icon="delete"><a onclick="removeFilterItem(\'' + filterItemId + '\')">' + $(this).text() + '</a></li>').listview('refresh');
cache["FilterCounter"] = cache["FilterCounter"] + 1;
});
}).change();
What happens on subsequent visits is when you select an application from the dropdown it puts 2 of the same entries in the listview on the second visit and 3 entries every 1 one selection on the 3rd visit to the page and so on.
It seems that the DOM is caching its contents or something and i cannot stop it?
I started a jfiddle for this but my function to populate the list isnt running. I just started using jfiddle so maybe I have the simulation setup incorrectly?
http://jsfiddle.net/D2gbq/27/
It looks like you are emptying the selects, then refreshing the listview, and then appending the new options. You need to refresh the listview after you append the options in order to make them appear.
Try this:
function populateList()
{
$('#lstApplicationList').empty();
$('#drpApplication').empty();
if (typeof cache["FilterCounter"] == "undefined") {
cache["FilterCounter"] = 1;
}
var listItem = "<option value=" + '\'' + '1' + '\'' + ">" + 'Name1' + "</option>";
$('#drpApplication').append(listItem);
var listItem2 = "<option value=" + '\'' + '2' + '\'' + ">" + 'Name2' + "</option>";
$('#drpApplication').append(listItem2);
var listItem3 = "<option value=" + '\'' + '3' + '\'' + ">" + 'Name3' + "</option>";
$('#drpApplication').append(listItem3);
$('#lstApplicationList').listview('refresh');
$('#drpApplication').listview('refresh');
}
I am using highcharts in vaadin application . It works in a best manner for single line graph.
If i put 49 lines and each lines contain 2048 values . I have disabled the marker , shadow,
tooltip,animation . But still the graph takes 30 seconds to display in google chrome and more than 30 seconds in firefox. How to display in a fast manner .The code is given below
String s = "";
s+="chart = Highcharts.setOptions(Highcharts.theme);"+
" chart = new Highcharts.Chart({\n" +
" chart: {\n" +
" renderTo: 'container5',\n" +
" type: 'line',\n" +
" },\n" +
" title: {\n" +
" text: 'Intensity Graph'\n" +
" },\n" +
" xAxis: {\n" +
" min:0,\n"+
" max:2100,\n"+
" tickInterval:100,\n"+
" labels: {\n" +
" rotation: -45,\n" +
" align: 'right',\n" +
" style: {\n" +
" fontSize: '13px',\n" +
" fontFamily: 'Verdana, sans-serif'\n" +
" }\n" +
" }\n" +
" },\n" +
" yAxis: {\n" +
" title:{\n" +
" text:''\n" +
" },"+
" min:0,\n"+
" max:255,\n"+
" tickInterval:20,\n"+
" },\n" +
"plotOptions: {\n" +
" series: {\n" +
" marker: {\n" +
" enabled: false,\n" +
" shadow : false,\n"+
" animation : false\n"+
" },"+
"color: '#00FF00',\n"+
" lineWidth: 0.1"+
" },"+
" },"+
" tooltip: {\n" +
" enabled: false\n" +
" },"+
" legend: {\n" +
" enabled: false\n" +
" },\n" +
// " tooltip: {\n" +
// " formatter: function() {\n" +
// " return '<b>'+ this.x +'</b><br/>'+\n" +
// " 'lux: '+ Highcharts.numberFormat(this.y, 1) +\n" +
// " ' px';\n" +
// " }\n" +
// " },\n" +
" series: [{\n" +
" name: 'Ejection Count',\n" +
" data: [" +
"],\n" +
" dataLabels: {\n" +
" enabled: true,\n" +
" rotation: -90,\n" +
" color: '#FFFFFF',\n" +
" align: 'right',\n" +
" x: -3,\n" +
" y: 10,\n" +
" formatter: function() {\n" +
" return this.y;\n" +
" },\n" +
" style: {\n" +
" fontSize: '13px',\n" +
" fontFamily: 'Verdana, sans-serif'\n" +
" }\n" +
" }\n" +
" }]\n" +
" });" +
" });");
long len = 2,kk1 = 0;
Highchart hc = new Highchart();
byte[] cor = new byte[4584];// I am adding this array content to the graph
StringBuffer sb = new StringBuffer();
try
{
for (long l = 0; l < len; l++)
{
sb.append(" this.chart.addSeries({\n" +
" data: [" );
for (int i = 0; i < 2; i++)
{
if(i == 0)
{
//2048 points
for (int j = 0,k = 276; k < 2324; j++,k++)
{
if(j == 2323)
{
sb.append(cor[k]) ;
}
else
{
sb.append((cor[k] +",");
}
}
}
}
sb.append("],"+
" redraw :false,\n"+
" animation:false\n"+
"});") ;
}
}
catch (FileNotFoundException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
sb.append("this.chart.redraw();");
hc.drawChart(sb.toString());
}
Highcharts are not so fast to display 100k points. For that purpose I advice to use Highstock, see example with 54k points: http://www.highcharts.com/stock/demo/data-grouping where charts are build within 0.2 sec. The main speed up in Highstock is dataGrouping.