i m using highcharts JoeKuan, but i have tried set title, all failed.
JoeKuan HighCharts : https://github.com/JoeKuan/Highcharts_Sencha/
a lot of example i have tried, maybe JoeKuan's High Chart set title is bug?
this is the example i have tried: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-settitle/
chart.setTitle({
text: 'New title ' + i++
});
Error : TypeError: chart.setTitle is not a function
or
chart.options.subtitle.text = 'Sales';
or
chart.title = "a"
any idea?
Related
I am attempting to customize my Highcharts legend to html with in line style tag in order to change the color using this.color
I am using
labelFormatter: function () {
return "Total amount of <b style='" + this.color + ">" + this.name + " Percentage"
}
in attempt to accomplish this. I would like the legend of graph to display "Total amount of LOW Percentage" I am able to accomplish this but I am now trying to add styling to "LOW", "MEDIUM" or "HIGH" which is coming from this.name; I would like to make that color the same color that it is in the graph such as :
LOW = Green,
MEDIUM = Orange
HIGH = RED
I attempted to accomplish this by using this.color but it did not have any affect on my legend.
Here is a jsfiddle with my code: https://jsfiddle.net/uyr2tb7n/3/
The returned string should look like this:
legend: {
...,
labelFormatter: function() {
return "Total amount of <span style='color:" + this.color + "'>" + this.name + "</span> Percentage"
}
}
Live demo: https://jsfiddle.net/BlackLabel/jv3p5z8t/
API Reference: https://api.highcharts.com/highcharts/legend.labelFormatter
I created a sunburst chart with highcharts. I set the config object given to Highcharts.chart('type', config) in python. I want to have one different tooltip for each level of the sunburst chart.
I can do a big js function that search the level of the point in my data then give the level to the tooltip formatter to display the specific data, but that is not suitable I think.
Is there any highcharts function to get the point's level or to define the tooltip in series.levels[]?
You could get this based upon the slice's level property. You can do something like:
tooltip: {
formatter: function () {
console.log(this); // see what each slice's properties are
if (this.point.node.level == 4) {
return 'Population of <b>' + this.point.options.name +
'</b> is <b>' + this.point.options.value + '</b>';
} else {
return 'Level <b>' + this.point.node.level + '</b> has no tooltip';
}
}
}
Example jsFiddle
Tank you for your answer wergled. In fact what help me is the console.log(this)! I don't know why but this refers directly to the point in my code. And since I code in python, I have to format a js function into a python string, this is quite difficult.
So I ended with something like:
config['tooltip']['pointFormatter'] = (
"function(){"
"var level = this.node.level;"
"return"
f" {myValues}[level] + '<span style=\"text-transform: uppercase;font-weight:bold\">{myPythonVar}:</span> '"
f"+ {myJsFormatter}.call(this) + '<br>'"
"}"
)
It mixes python and js, it hard to read but needed in my case.
Im using Stacked area chart of nvd3-angularjs
This is my html
<div ng-controller="Eth2GraphController">
<nvd3-stacked-area-chart
data="GraphData"
noData="No Data For You!"
id="eth2Graphs"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
objectEquality="true"
margin="{left:100,right:100}"
useInteractiveGuideline="true"
tooltipcontent="toolTipContentFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Now, I have a function that should format the tooltipcontent, but its not working. Maybe it has something to do with the useInteractiveGuideline attribute. I used the same tooltipcontent function to edit the tooltip of my other charts, its working on those charts the only difference is that those chart dont use useInteractiveGuideline.
$scope.toolTipContentFunction = function() {
return function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
'<p>' + key + ' ' + y + '</p>';
}
};
I want x to be in the center, and other formatting for the data. How would I do that? Am I using the correct attribute that would format the tooltip?
Change tooltipcontent="toolTipContentFunction()" to:
tooltipContent="toolTipContentFunction"
useInteractiveGuideline must be set to false for the tooltipContent to work. I believe it is because useInteractiveGuideline uses it's own popup.
What would be the easiest way possible to display custom properties in the pie chart tooltip?
var pieData = [
{
value: 40,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Label 1",
description: "This is a description for label 1"
},
{
value: 60,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Label 2",
description: "This is a description for label 2"
}
];
var options = {
tooltipTemplate: "<%= label %> - <%= description %>"
};
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Doughnut(pieData, options);
};
I tried simply adding a "decription" property and then printing it, but without any luck. It just gives me an error saying description is not defined. I saw that there is a custom tooltip functionality, but that seemed like a lot of work for something trivial. Is there an easier way?
Charts doesn't support this feature officially. But you can customize tooltip with your data like this in case of LineChart.
first, make chart with datasets and options
var chart = new Chart(ctx).Line(dataset, opt);
and, add properties what you want show in tooltip
var points = chart.datasets[0].points;
for (var i = 0; i < points.length; i++) {
// Add properties in here like this
// points[i].time = '2015-04-23 13:06:24';
}
then, you can use these properties like this.
tooltipTemplate: "<%=time%> : <%=value%>"
I hope this is helpful to someone. :D
You should go:
var options = {
tooltipTemplate: "<%= label + '-' + %> <%= description %>"
};
It's not a solution really, but I solved it by adding just the description inside the label...
label: "Label 2 - Description",
Is there a more efficient way for displaying a tool tip once a cell is hovered? Using the structure attribute to format the datagrid, is there a way to use formatter to display a dijit toolTip rather than using the html title attribute.
Here is the column in which the toolTip is displaying.
var subscriberGridLayout = [
{
name: " ",
field: "ExpirationDate",
formatter: function(value){
if(value){
expDate = formatDateIE(value);
return toolTip();
}
else
return " ";
},
styles: "text-align: center;",
width: "30px"
},
Here is the function that displays a tooltip icon through the image tag but instead of a dijit toolTip it simply uses html's title to display a popup.
function toolTip(){
src = "'/Subscriber/resources/images/icons/icon_error.gif'/>";
if(dojo.date.difference(today, expDate) <= 0 ){
message = "Credential expired.";
return "<img title='"+ message + "' src=" + src + "";
} else if(dojo.date.difference(today, expDate) <= 60) {
message = "This Subscriber will expire in " + dojo.date.difference(today, expDate) + " days."
+ "
To prevent an interruption in the Subscriber’s access, please sumbit a request to " +
"renew the Subscriber within 30 days of the expiration date.";
return "<img title='"+ message + "' src=" + src + "";
} else {
return " ";
}
}
I would do something like:
new Tooltip({
connectId: grid.domNode,
selector: "td",
getContent: function(matchedNode){
return matchedNode.innerText
}
});
With grid.domNode you can get the generated DOM of your widget. A grid generates a table-structure, so you can get the cells by using the selector and getContent properties.
I must say it's not really the correct way to do it because now you're playing with the internal structure of the Dojo widget. If they once decide not to use a table as DOM structure your code won't work.
But I don't think there is a better way to achieve this, in the end you will always have to translate the Dojo cell to a DOM node (because tooltips are DOM based). You can of course connect a tooltip to each cell, but I tried that before and it was a little buggy (sometimes the tooltip didn't pop up).
I also made a JSFiddle to show you a working example.