I have a data set which looks something like this.
var toolTip = [ ["IN001", "IN002"], "IN003", "IN004", ["IN005", "IN006", "IN007"] ];
I have a scatter plot which uses these tooltips to show data in it.
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [ [0,100],[1,100],[2,100],[3,100] ],
tooltip: {
pointFormatter: function(){
return "Incident " + toolTip[this.series.data.indexOf( this )] ;
}
}
},
Now this shows the data in a line in tooltip. I want a next line in case there is more than one data in a tooltip. For example
IN0001
IN0002
instead of IN0001, IN0002.
How do i get the next line. I don't know how to parse this data in this case.
One more doubt i have is, Each name should be a hyperlink.
How do i make every word in the toolTip array to appear as a link in the tooltip?
Any help is appreciated.
Here is a working model of the following.
jsFiddle
You can change your pointFormatter function so you will meet your requirements. You can add breaking lines using 'br' and you can add links using 'a' like in normal HTML. You can use Highcharts.each() for iterating over your array and adding next elements to your string.
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
string += '' + p + '<br>'
})
return "Incident<br>" + string + "<br />";
}
Here you can see an example how it can work: http://jsfiddle.net/o2zmLngr/5/
Related
I'm trying to customize the category field text of my Kendo Chart.
The text is too long so I wanted to make part of it bold to distinguish what was written
The Chart looks like this: What I have now
But what I want should look like this: Expected result
My code for the chart looks like this:
var seriesConfig = [{
field: "Duration",
categoryField: "AlarmDescription",
axis: "duration",
name: textJSLayout["Duration"],
type: seriesType,
tooltip: {
template: "${series.name} : #=mpm.functionHelper.time.getFormattedTime(value)#" +
"<br> #=textJS['PercentageString']# : ${dataItem.Pareto} %" +
"<br> #=textJSLayout['Occurrences']# : ${dataItem.Occurrences} "
},
labels: {
template: "${dataItem.Occurrences}",
visible: true
}
}];
I also tryed using a template but it looks like there is no such a thing for the categoryField...
Any solutions?
The only way that I can see you doing this would be to leverage the categoryAxis' Label's Visual property: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryaxislabelsvisual
You would do this by appending the text with a new kendo.drawing.Text with bolded font. See this example: https://dojo.telerik.com/oGulOZim
The issue that you will run into is when to break the bolding font and when to start the normal font. That will need to take some trial and error on your part.
I have created a Stockchart using Amcharts available in https://codepen.io/Volabos/pen/PyzmYd
Where everything looks good, I however want to get rid of the Thousand-k suffix from Y-axis lables as well as from Baloon, instead I desire to have Thousand seperator + rounded value upto 2.
Is there any possibility to achieve such?
Besides, I also want to set various CSS properties of the div class = 'Right' dynamically based on the value of "value2" e.g. if its value is greater than 500 then Font-color would be green otherwise red.
Any pointer would be highly appreciated.
For the y-axis, change usePrefixes in your panelSettings to false:
"panelsSettings": {
"usePrefixes": false
},
For the balloon, implement balloonFunction to customize the formatting:
stockGraphs: [{
"id": "g1",
...
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
return "<div>Value<br/>" + Math.round(value).toLocaleString('en-us'); + "</div>";
}
}]
Updated pen
EDIT
Here is the updated pen to include dynamic balloon colors based on value2. The new balloonFunction looks like this:
function(graphDataItem, graph) {
var value = graphDataItem.values.value;
var value2 = graphDataItem.dataContext.rawData[0].value2;
return "<div style='color:" + (value2 > 500 ? 'green' : 'red') + "'>Value<br/>" +
Math.round(value).toLocaleString('en-us'); +
"</div>";
}
You can clean this up with string interpolation and CSS classes as well, but this is basically the technique.
I am using Dygraph. I have requirement that when I click a datapoint I want to display Row Index of the array / ID level information.
Please see the working example below
When I click any datapoint, I want to display the ID.
In the first datapoint the result displayed is
ID = 89,
Row Index = 1.
g = new Dygraph(
document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
"X,Y,Z,ID\n" +
"1,0,3,89\n" +
"2,2,6,56\n" +
"3,4,8,\n" +
"4,6,9,\n" +
"5,8,9,\n" +
"6,10,8,\n" +
"7,12,6,\n" +
"8,14,3,\n",
{
visibility: [ true, true, false ],
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template',
pointClickCallback: function(e, pt) {
alert(JSON.stringify(pt));
}
}
);
You can use pt.idx to get the row number and getValue() to query the data in another column for that row. In your case:
pointClickCallback: function(e, pt) {
alert(this.getValue(pt.idx, 3));
}
here's a working fiddle.
I am using Extjs for creating UI. So I created grid, with column. My task is to add tool tip to some cells but only on part of text.
I tried to use meta.tdAttr = 'data-qtip="Activity is in use"'; looks like it works, but sets tooltip on whole cell, when I want only on some text.
Here is my realization:
{
hideable : false,
width : 200,
flex : 1,
dataIndex : 'name',
text : 'Name',
renderer : function(value, meta, record) {
meta.tdCls += ' '
+ this.getValidation()
.getHighestLevelCls(
record.modelType,
record.id);
var inUseClass = '';
if (record.get('descendants').length > 0) {
meta.tdAttr = 'data-qtip="Activity is in use"'; // here is tool tip setter
inUseClass = Glyphs
.getIconClass('dot-circle-o');
} else {
inUseClass = Glyphs
.getIconClass('circle-o');
}
return Glyphs.wrapClass(inUseClass,
'font-size:10; color:black;',
' ')
+ value;
}
}
As you can see in cell I print Glyph (it is some kind of icon interpretated as text, taken from AwesomeFonts.com) + value (text value), so I need to show tooltip when I hover with mouse only Glyth. Maybe someone can suggest me any sollution?
You could try returning a <span> from the renderer, applying all the attributes to it instead:
renderer: function(value) {
return '<span data-qtitle="QTip Example" data-qwidth="200" '+
'data-qtip="This is a quick tip from a custom renderer!">'+
value+'</span>';
}},
A fiddle here. (I tried with normal text, but the concept is similar)
Updated
I have problems to point data with the custom formatter.
I am using jqgrid's custom formatter.
function myformatter ( cellvalue, options, rowObject )
{
....
Now, my custom formatter seems to point always on the last row of the grid. In fact, if I get rowObject[0], for example, I have the value of the [column 0, last row] of my grid. Why?
The grid's data is correctly compiled and I already checked Json object content.
Here's my custom formatter:
......
{ name: 'act', index: 'Detail', width: 50, sortable: false, search: false,
formatter: function (cellvalue, options, rowObject) {
i = options.rowId;
var tst = '<a class="nau" name="nau" onClick="alert(i);return false;" href="#"></a>';
var det = '<a class="det" name="det" onClick="alert(this.name);return false;" href="#"></a>';
return tst + det;
}
}
....
Update
I noticed that the formatter works fine if I return the string I want directly (for example return rowObject[0] works fine), while I have problems when I use variables. Moreover, if I try to do onclick=alert(rowObject[0]) I get an exception saying rowObject does not exists. I think this is the problem: if I set t = rowObject[0], then the formatter use t as static variable instead of updating it for each row. The same if I set i = options.rowId, where i remains static...WHY? What I should do?
I succeed to get it work...I must say that I feel a little embarrassed ... it was a stupid mistake. I hope we can still help some inexperienced like me, anyway. I did not put variables outside of quotes:
......
{ name: 'act', index: 'Detail', width: 50, sortable: false, search: false,
formatter: function (cellvalue, options, rowObject) {
i = options.rowId;
var tst = '<a class="nau" name="nau" onClick="alert('+i+');return false;" href="#"></a>';
var det = '<a class="det" name="det" onClick="alert(this.name);return false;" href="#"></a>';
return tst + det;
}
}
....
I quote the precious help from #Oleg: "The code in onclick will be executed separately so you have to use values of the variables and not the names. For example 'onclick="alert(rowObject[0]);return false;"' will produce error because global array rowObject is not exist. You have to change the code to use 'onclick="alert(' + rowObject[0] + ');return false;"' which will place the value of rowObject[0] in the code."
I suppose that you have some problems in filling of the grid. If options.rowId is the same for all rows then you fill the grid with the wrong data where the id is always 1.
If you will don't localize the wrong place in your code you should include the code and the test data which you use.
Moreover you should use onclick instead of onClick. Your current code can work now, but it will be not more work it your would change the DOCTYPE.