I am wondering if anyone knows how you would go about adding tooltips to multiple lines of data with Google Line Charts using DataTable, addColumn and addRow?
I've seen it done using other methods, but that is quite hard in my project and I feel like dumbass for not figuring this out. Anyways, I've dumbed down my code to present the essentials of my problem.
As you see, the tooltip shows for Line 2, but not for Line 1. My question is this: How do I add a tooltip to Line 1 using this method?
My code:
http://jsfiddle.net/Qquse/550/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow([1, 1, 2, "Some fancy tooltip"]);
data.addRow([2, 2, 4, "Some fancy tooltip"]);
data.addRow([3, 3, 6, "Some fancy tooltip"]);
data.addRow([4, 4, 8, "Some fancy tooltip"]);
data.addRow([5, 5, 10, "Some fancy tooltip"]);
var options = {
title: 'Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
I tried adding both DataColumns first, then the tooltips. Turns out it had to be in this order:
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
instead of
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});
Updated working fiddle: http://jsfiddle.net/Qquse/1207/
Related
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Male', 51],
['Female', 49],
]);
// Set options for Sarah's pie chart.
var options = {title:"",
width:600,
height:400,
is3D: true};
Above is my code. I'm looking to remove the value on the hover but keep the percentages in the pie chart. So on my chart it says Male: 51(51%) Female: 49(49%). It won't let me attach a picture since I'm fairly new so I apologize for that as well.
Just add one more configuration tooltip in options object:
var options = {
title:"",
width:600,
height:400,
tooltip: {
text: 'percentage'
},
is3D: true
};
Here is demo : https://jsfiddle.net/fs6tc5nq/1/
I want to display the results of students using a single chart.
There are 4 exam phases in a year and 5 activities in each phase and each activity has grades ranging from A to G.
I'm using google line chart for this purpose.
Code for Generating the graph
[<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Phase');
data.addColumn('string', 'Activity 1');
data.addColumn('string', 'Activity 2');
data.addColumn('string', 'Activity 3');
data.addColumn('string', 'Activity 4');
data.addColumn('string', 'Activity 5');
data.addRows([
['1', 'A','B','C','D','E'],
['2', 'E','D','C','B','A'],
['3', 'A','B','C','D','E'],
['4', 'E','D','C','B','A'],
]);
var options = {
title: 'Student Result',
width: 600,
height: 550,
legend: { position: 'bottom' },
vAxis: { ticks: ['A','B','C','D','E','F','G']}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
Link to the Output of this code
The axis is null. It is not generating the chart as per data.
if you check the data format for a line chart,
only the first column in the data table may be of type 'string',
the rest should be 'number'
in this case, you could convert each grade to a number.
then use object notation to show the grade instead of the number.
using object notation allows you to provide the value (v:) and the formatted value (f:)
{v: 0, f: 'A'}
the formatted value is displayed by default.
next, if you want to customize the vertical axis, by using ticks,
you won't be able to use a material chart --> google.charts.Line
you will need to use a classic chart instead --> google.visualization.LineChart
there are several options that are not supported by material charts, including ticks
see Tracking Issue for Material Chart Feature Parity for more info.
see following working snippet for an example...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var scale = {
'A': 0,
'B': 1,
'C': 2,
'D': 3,
'E': 4,
'F': 5,
'G': 6
};
var grades = [
['1','A','B','C','D','E'],
['2','E','D','C','B','A'],
['3','A','B','C','D','E'],
['4','E','D','C','B','A']
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Phase');
data.addColumn('number', 'Activity 1');
data.addColumn('number', 'Activity 2');
data.addColumn('number', 'Activity 3');
data.addColumn('number', 'Activity 4');
data.addColumn('number', 'Activity 5');
grades.forEach(function (activities) {
var row = [];
activities.forEach(function (grade, indexGrade) {
if (indexGrade === 0) {
row.push(grade);
} else {
row.push({
v: scale[grade],
f: grade
});
}
});
data.addRow(row);
});
var options = {
title: 'Student Result',
width: 600,
height: 550,
legend: {
position: 'bottom'
},
vAxis: {
ticks: [
{v: 0, f: 'A'},
{v: 1, f: 'B'},
{v: 2, f: 'C'},
{v: 3, f: 'D'},
{v: 4, f: 'E'},
{v: 5, f: 'F'},
{v: 6, f: 'G'}
]
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>
Using this code from google line charts I get the following error all the time:
Uncaught SyntaxError: missing ) after argument list
code:
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);
google.charts.setOnLoadCallback(drawLogScalesLTC);
function drawLogScales() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'PTH/s');
data.addRows([
[new Date(2016-12-15 21:23:07), 0.78],
[new Date(2016-12-14 21:23:07), 5.31],
[new Date(2016-12-13 21:23:07), 8.38],
[new Date(2016-12-12 21:23:07), 0.72],
[new Date(2016-12-11 21:23:07), 3.27],
[new Date(2016-12-10 21:23:07), 0.78],
]);
var options = {
hAxis: {
title: 'Time (h)',
logScale: true
},
vAxis: {
title: 'PTH/s',
logScale: false
},
colors: ['#a52714', '#097138']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I'm totally baffled where things go wrong. The synatx is fine I think.
The problem is actually how you're creating your dates. Since you're passing in a string you should declare a new date with quotes around the date string:
new Date('2016-01-01 01:01:01')
To get your code working I also cast each date to a string and changed the column type for the dates from 'number' to 'string'. See fiddle for working code.
https://jsfiddle.net/nz5yto73/
I am using the google charts api to display data from php. I am displaying this information in a material style bar chart (vertical).
I am trying to add annotations to show the values inside the bars however it isn't working.
JavaScript:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawLastPackets);
function drawLastPackets() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows(<?php echo json_encode($chartLastPackets); ?>);
var toAdd = ["Day", "Packets Packed", {"role": "annotation"}];
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
vAxis: {
title: 'Packets'
}
};
var chart = new google.charts.Bar(document.getElementById('lastPackets'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
The contents of the php array $chartLastPackets is:
[["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]
However all I can see is the chart itself without the annotation.
annotations.* are listed among the several options that don't work on Material charts
you can use the following option, to get the chart close to the look & feel of Material
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]);
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
theme: 'material',
vAxis: {
title: 'Packets'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('lastPackets'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lastPackets"></div>
Okay so I'm really new at this, so please bear with me. I'm trying to create a Google interactive line chart with custom HTML tooltips that are images from other sources around the web. But I can't get this to work; it won't even show up. This is what I have so far (guided by developers.google.com):
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', 'Slices');
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addRows([
['January 1, 2015', 3, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 2, 2015', 2, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 3, 2015', 5, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 4, 2015', 4, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 5, 2015', 2, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">']
]);
// Set chart options
var options = {
tooltip. {isHtml: true},
focusTarget: 'category',
'title':'How Much Pizza I Ate',
'width':900,
'height':400,
legend: { position: 'bottom' }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</head>
I know I'm probably doing something completely wrong. I would appreciate someone's help. Thank you!
This is an error:
tooltip. {isHtml: true}
should be:
tooltip: {isHtml: true}
If that doesn't fix the issue, also try moving your callback into the load:
google.load('visualization', '1', {"callback" : drawChart, 'packages': ["corechart"]});
//google.setOnLoadCallback(drawChart);