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.
Related
I have datasets from my chart and I want to reorganize to make it look better.
This would be my chart
OriginalChart
and this would be my chart when I remove 2 elements labels from it and the idea would be to reorganize everything and delete the elements with the red boxes that have 0 as value or in other words, to only display data with values different than 0 ...
ChartWithDataToOrganize
the idea would be simple, just filtering all data value that is equal to 0, but I don't really if there is a tool for it but also to reverse it as well when you display all data again.
labels
I achieved to see how to hide elements when clicking on the legends but how can I achieve to hide the data inside which is == 0 and then get it reversed when I unhide it and see it like the first time..
legend: {
display: true,
onClick: function(e, legendItem) {
var index = legendItem.datasetIndex;
var actualChart = this.chart;
//If the actual label is not hidden, I set it up as false, otherwise is null
var alreadyHidden = (actualChart.getDatasetMeta(index).hidden === null) ? false : actualChart.getDatasetMeta(index).hidden;
actualChart.data.datasets.forEach(function(e, i) {
var meta = actualChart.getDatasetMeta(i);
if (i === index) {//I check if the selected label is already hidden otherwise I hide it
if(!alreadyHidden){
meta.hidden = true;
}else{
meta.hidden = null;
}
}
});
actualChart.update();
},
},
I'm using ChartJs 2.8.0
on Chrome
I did not put any data entry as labels are just names and the others returnData() are just %
I managed to do it by creating a copy of the actual copy of my datasetsLabels and set up the new configuration and in case I show again the selected label I just replace the new dataSetLabel for the previous dataset that I had before.
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/
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)
I am preparing a VU Meter graph in Highcharts to display an array of values.
These values are displayed one at a time, by choosing an <OPTION> of a <SELECT>.
I managed to understand how to change the title of the graph to match the selected label of the <OPTION>, but unfortunately I am a noob and I was not able to properly update the data of the series.
A minimal working example is available on jsFiddle. In particular, the following function is fired when the <SELECT> is changed:
$('#receptorsList0').change(function() {
var selectedOption = $("#receptorsList0 option:selected");
var selectedValue = selectedOption.val();
var selectedText = selectedOption.text();
alert("i: "+selectedOption+", val: "+selectedValue+", text: "+selectedText);
// 1. Possible?
chart.yAxis.setTitle({ text: table[selectedText] + '<br/><span style="font-size:8px">' + selectedText + '</span>' });
// 2. Doesn't work, suggestions? Same with chart.series[0].update(...)
chart.series[0].setData([selectedValue], true);
chart.setTitle({ text: selectedText });
// 3. Unneeded, right?
chart.redraw();
});
My questions are the following:
Is the change of the yAxis's title supported? This is similar to the command to update the graph's title, but it doesn't work, of course.
How am I supposed to change the data? Both chart.series[0].setData(...) and chart.series[0].update(...) only made the needle to disappear to to stay still. data is not properly formatted, maybe? Could you please point me out my mistake?
This is unneeded, right (provided that the above works)?
Thanks in advance for any suggestion you may provide!
Thanks to Sebastian Bochan who pointed me towards the right direction, I managed to solve the above problems! Please find below the final version of the above function:
$('#receptorsList0').change(function () {
var selectedOption = $("#receptorsList0 option:selected");
var selectedValue = parseFloat(selectedOption.val());
var selectedText = selectedOption.text();
chart.yAxis[0].update({
title: {
text : table[selectedText] + '<br/><span style="font-size:8px">'+selectedText+'</span>',
y : -40
}
});
chart.series[0].data[0].update(selectedValue);
chart.setTitle({
text: selectedText
});
});
Yes it is possible by update function on called on axis.
http://api.highcharts.com/highcharts#Axis.update()
update, works on point, so it should be chart.series[0].data[0].update(20);