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 :)
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]);
The y asis labels of my google charts are aligned with respect to the vertical bar while I want them to be aligned with the margin of the chart. I looked everywhere. Can anyone help. The left to right and right to left uses thechart margin as reference not the chart area left margin.
no options for label alignment...
but you can move them manually when the chart's 'ready' event fires
you can use the following chart method to get the bounds of each label
getChartLayoutInterface().getBoundingBox(id)
then set the labels's x attribute to the same value as the width
if the labels need more room, use option --> chartArea.left
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y0');
data.addRows([
['Brain Tree', 200],
['One Touch', 220],
['PayPal Email', 240],
['PayPal Here', 260],
['PayPal Invoice', 280],
['PayPal Mas', 300]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(container);
google.visualization.events.addListener(chart, 'click', function (gglClick) {
console.log(JSON.stringify(gglClick));
});
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var labelIndex = -1;
var labelWidth;
var axisLabels = container.getElementsByTagName('text');
Array.prototype.forEach.call(axisLabels, function(label) {
if (label.getAttribute('text-anchor') === 'end') {
labelIndex++;
labelWidth = chartLayout.getBoundingBox('vAxis#0#label#' + labelIndex).width;
label.setAttribute('x', labelWidth);
}
});
});
chart.draw(data, {
chartArea: {
left: 128
},
height: 600
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Just provide is-stacked as true in option if you want to align Y-axis names with bar
options={ isStacked: true}
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,
help me in upper or lower code problem must be appreciated
i want to make a bar chart and populate it from my collection from meteor i
want to print exercises with there status
but when i return one record from db it is working well graph is coming but
when coming two records its not working kindly help in it
Just help me that how i can make a correct JSON format for "google visualization graph" from meteor mongodb
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
console.log("graphData==========",graphData)
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Room' });
data.addColumn({ type: 'string', id: 'Name' });
data.addRows([
[ myDoc.status, myDoc.patientExerciseName]
])
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
Note : Foreach function when return two rows from database it not works
as i also try this
when i give JSON to my graph it is giving error "Invalid data table format:
must have at least 2 columns".
how i can make a JSON format which support Google visualization charts
please help me mine code is there
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var Mydoc=JSON.stringify(myDoc)
var data = new google.visualization.DataTable(Mydoc)
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
1) Check that the data is received: in Meteor it is sometimes tricky as publications may not be ready when you draw your chart. You need to make sure you wait for the publication to be ready. (Use console log to log the data and see if it's there, as within the debugger the data will be there by the time you look it up
2) once you are sure the data is there, read the GoogleChart docs: it is a fairly extensive library with lots of examples, so just make sure you data matches the right format.
this question and answer should help:
Building array and formatting JSON for Google Charting API
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.