I want to customise tooltip in google visualization chart so I did
final OrgChart orgChart = new OrgChart();
Options options = Options.create();
options.setSize(Size.MEDIUM);
options.setAllowHtml(true);
options.set("tooltip.isHtml", true);
MyDataTable dataTable = MyDataTable.create();
dataTable.addColumn(ColumnType.STRING, "InstanceID");
dataTable.addColumn(ColumnType.STRING, "ParentID");
addTooltipColumn(dataTable);
dataTable.setValue(row, 0, "TEST");
dataTable.setValue(row, 2, "<div><b>test</b></div>");
orgChart.draw(dataTable, options);
private native void addTooltipColumn(MyDataTable data) /*-{
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
}-*/;
But it doesn't show tooltip in html format that have added, How I can format tooltip text and change background color and add image to it? Can somebody help me?
Thanks,
Related
I have created a bar chart using google charts, this is a CORE Chart
I have tried getting the bar chart to change colours and adding an additional tooltip information to it, so that the tooltip shows a bit more information
I have gone through the google documentation and i cant see what i am doing wrong
For easy reading this is the output of my code on the source
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exams = [["Date", "Score",({type: 'string', role: 'tooltip'})], ["18 Oct", 39,"TEST"], ["26 Oct", 20,"TEST"], ["26 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"]];
if(exams.length > 1){
var data = google.visualization.arrayToDataTable(exams);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Results",
width: 1170,
height: 700,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
else{
$("#columnchart_values").html('No Data found to show graph');
}
}
This is the google documentation i have been following, its slightly different
to mine as i am getting my data from a database, but it should give the same output.
I have gone through many examples and i am replicating them as close as possible and just not having any luck
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
I also have the exact same problem with color, i cant get colors on bar charts to change both having the same problem that it just doesn't do anything
Am i missing something??
the tooltip column is not being included in the data view.
view.setColumns([0, 1]);
to add the tooltip...
view.setColumns([0, 1, 2]);
I am using google charts and have a page of mixed charts, some pie, a column chart and a gauge chart
The page has an option to generate a pdf, so I am converting the charts to PNG to use in the pdf..
all the charts are generated in the same manner, using a div to display the google chart and a hidden div to store the png image
var chart = new google.visualization.Gauge(document.getElementById('gauge'));
var hidden = new google.visualization.Gauge(document.getElementById('gauge_hidden'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
gauge_hidden.innerHTML = '<img src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
this code works fin on he pie and column charts, but on the gauge chart I am seeing
chart.getImageURI is not a function
any ideas how I can get the png?
CHeers
I was facing this same issue, but after some reading i've come to this solution:
I'm using jQuery to make this a little easier.
First, use XMLSerializer to convert the SVG chart to a string and then use btoa to convert that to base64.
You can use this string this way:
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var base64String = "data:image/svg+xml;base64," + window.btoa(s);
In my case i needed to draw the gauge chart to a PDF and DOMPDF doesn't support this format, so if you need a "data:image/png;base64," string, you can continue with this solution.
You need to set the "svg+xml;base64" as src of a new Image and then draw that image to a Canvas. After that you can use toDataURL method from canvas to get the content as base64 png.
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var image = new Image();
image.width = 640;
image.height = 480;
image.src = 'data:image/svg+xml;base64,' + window.btoa(s);
var myCanvas = document.createElement('canvas');
myCanvas.width = 640;
myCanvas.height = 480;
var myCanvasContext = myCanvas.getContext('2d');
myCanvasContext.drawImage(image,0,0);
// get google chart gague to base64, yey!
var base64String = myCanvas.toDataURL();
Thanks to the author of this answer and this post
Is there any way to make google charts tooltip always visible, no matter where the mouse pointer is?
it should be constantly on after page load
The best I could come up with is:
http://jsfiddle.net/xDfLd/
But if you interact with the chart (ie, click on different pie segments, or different line segments), the tooltip will disappear. Setting enableInteractivity:false I'll file a bug that tooltips and selections should still display when interactivity is off anyway.
I combined what Jeremy posted with Yasen's comment and came to this solution:
var options = {
enableInteractivity: false,
selectionMode: 'multiple',
tooltip: {
trigger: 'selection'
}
};
google.visualization.events.addListener(chart, 'ready', function(e) {
var selected_rows = [];
for (var i = 0; i < your_total_number_of_rows - 1; i++) {
selected_rows.push({row: i, column: null});
}
chart.setSelection(selected_rows);
});
chart.draw(data, options);
This shows all the tooltips on load and prevents the user from messing around with them. Works great with the Pie Chart.
Use tooltip: { trigger: 'selection' } when defining options for the chart.
I tried to customize tooltip for google pie chart but I cannot success. Is there anyway to custom the pie tooltip? I need a tooltip like this: Pie with tooltip
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p: {html:true}});
data.addRows([
['Woman',100,'Woman Number'],['Man',200,'Man Number'],['Couple',300,'Couple Number']
]);
var options = {
'width':360,
'height':200,
tooltip: {isHtml: true},
colors: ['#fda4b7', '#7eb9de', '#a5d454']
};
var chart = new google.visualization.PieChart(document.getElementById('chartid'));
chart.draw(data, options);
Finally I found the way to change the tooltip HTML for Pie Chart.
google.visualization.events.addListener(chart, 'onmouseover', function (e) {
// e.row contains the selected row number in the data table
$(".google-visualization-tooltip").html("your html here");
});
Maybe this will be usefull to you. I made a piechart by myself. It's light and you can customize it: http://jsfiddle.net/cbWC4/5/
You create a cake:
//create the pieces of the pie (size, Name, color, relative size-will be calculatet later)
var p1= new Kuchenstueck(33,"Stueck1","949bc2",0);
var p2= new Kuchenstueck(10,"Stueck2","5d5f6c",0);
var p2= new Kuchenstueck(20,"Stueck3","96ccae",0);
var kuchen = {kuchenstuecke: [p1,p2,p3], auffuellen:true, absoluteGroesse:0, mx:180, my:180, r:180, imgSizeX:360, imgSizeY:360};
and apend it to a html element:
$(".torte").append(createKuchen(kuchen));
please note: some parameters are not yet implemented and kuchen is the german word for pie :)
I am using GWT api for google charts and having some issues:
colums from the start and end values missing for the column chart
BarChart width is trimmed is half for first/last value
To solve this I tried viewWindowMode property
HorizontalAxisOptions opt = HorizontalAxisOptions.create();
opt.set("viewWindowMode","pretty");
but this does not work.
Any ideas on how to solve?
Code:
private Options createOptions(ChartDataProxy response) {
Options options = Options.create();
options.setWidth(chartPanel.getOffsetWidth() - 2 * chartBorderWidth);
options.setHeight(chartPanel.getOffsetHeight() - 2 * chartBorderWidth);
HorizontalAxisOptions opt = HorizontalAxisOptions.create();
opt.setTitle(response.getxAxisName());
opt.setSlantedText(true);
opt.set("viewWindowMode","pretty");
options.setHAxisOptions(opt);
AxisOptions vopt = AxisOptions.create();
vopt.setTitle( response.getyAxisName());
vopt.set("viewWindowMode","pretty");
options.setVAxisOptions(vopt);
options.setTitle(response.getCaption() + " " + response.getSubCaption());
options.setLegend( LegendPosition.BOTTOM );
options.setPointSize(4);
return options;
}
I'm having similar problem, although I was using javascript. Maybe, you can adapt it into GWT.
Basically DataView can fix it. You just need to handle the first column with DataView and return whatever you need to return when not using DataView -- however, as string. I (don't) know, it's weird.
Given I had two columns: date, number. I will use this kind of code:
var data = new google.visualization.DataTable();
data.addColumn('date', 'month');
data.addColumn('number', 'users');
// trick to prevent the bar chart from being cut in half at both edge of our graph
var dataView = new google.visualization.DataView(data);
dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_monthly_users'));
chart.draw(dataView, options);
Hope it helps. I merely gather the scattered solutions.