Labels overflow outside the box. Some lables are well inside the box. Others just draw outside.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '2', 'Johndc Adams', new Date(1790, 2, 4), new Date(1810, 2, 4) ],
[ '4', 'Johndc Adams', new Date(1770, 2, 4), new Date(1810, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
Related
I am using a Google timeline chart it's good but getting three issues in the first column :
Text is not showing properly, how to increase text length
Unable to render Html in the first column
verticle lines, how can I remove(see image)
My code is as:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Bleeding Protocol<br/><div class="assmInfoData">Access, Complement, Factor Xa, Andexxa</div>', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Account part of the REMS/emergency stock program?<br/><div class="assmInfoData">General, Obtained from account</div>', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State <br> A good state', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 400px;"></div>
I have read some other answers here and accordingly added the role property but it did not work.
<Chart
width={'500px'}
height={'300px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
[
{ type: 'string', id: 'President' },
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' },
{type: 'string', role: 'style'}
],
['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4), 'gold'],
['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4), 'color: #ccc'],
['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4), 'gold'],
]}
options={{
showRowNumber: true,
}}
rootProps={{ 'data-testid': '1' }}
/>
refer: https://react-google-charts.com/timeline-chart
on the timeline chart, the style role will only work when used as the third column.
so you will also need to add the second column for bar label.
but you can use null values for that column, if needed...
<Chart
width={'500px'}
height={'300px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
[
{ type: 'string', id: 'President' },
{ type: 'string', id: 'Bar' }, // <-- add bar label here...
{ type: 'string', role: 'style' }, // <-- add style role here...
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' }
],
['Washington', null, 'gold', new Date(1789, 3, 30), new Date(1797, 2, 4)],
['Adams', null, '#ccc', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['Jefferson', null, 'gold', new Date(1801, 2, 4), new Date(1809, 2, 4)],
]}
options={{
showRowNumber: true,
}}
rootProps={{ 'data-testid': '1' }}
/>
I got it! I sorted the bars according the role attribute.
I used the role property in data structure.
const data = [ [ { type: "string", id: "Phases" },{ type: "string", id: "Name" }, { type: 'string', role: 'style' }, { type: "date", id: "Start" }, { type: "date", id: "End" } ]];
<Chart chartType="Timeline" data={[...data, ...firstArray, ...secondArray]} width="100%" height={setChartHeight((firstArray.length+secondArray))} options={{ timeline: { } }} />
enter image description here
This is my second answer on Stackoverflow. I still don't understand how to indent the code in the answer.
I am using Google Charts API for my Data Visualisations. I would like to retrieve the date of the selected day on the Chart.
What I retrieve is quite strange.. I am using a selectHandler on the chart as recommended by documentation.
function selectHandler() {
console.log(chart.getSelection()[0]);
}
google.visualization.events.addListener(chart, 'select', selectHandler);
On clicking following date, I am reading following output on console:
22/04/2020 : 1587513600000
19/06/2020 : 1592524800000
What kind of date format is this?
Can anyone help me?
this is the date represented as the number of milliseconds since the Unix Epoch.
it is the same value as returned by the getTime() method on a date object.
you can pass the value received from the selection to the date constructor to get the date...
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedDate = new Date(selection[0].date);
}
see following working snippet...
google.charts.load('current', {
packages: ['calendar']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
function selectHandler() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedDate = new Date(selection[0].date);
console.log(selectedDate);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
note: you should check the length of the selection before accessing the contents.
the select event is also called when a date is un-selected.
in this case the selection array will be empty...
I have a very simple question that I'm struggling to find out:
Instead of this
I want this:
The problem is that google charts resizes it based on the screen size. But I want to show all hours even on a small screen.
I also want to add an extra line for every 15 minutes between the hours. Just the lines, not the label. Is it possible?
Here is my code:
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Work', new Date(2018, 4, 25, 8, 30), new Date(2018, 4, 25, 17, 30) ],
[ 'Rest', new Date(2018, 4, 25, 0, 0), new Date(2018, 4, 25, 8, 30) ],
[ 'Rest', new Date(2018, 4, 25, 17, 30), new Date(2018, 4, 26, 0, 0) ]
]);
chart.draw(dataTable, {
});
}
https://jsfiddle.net/8xpkLe46/
I would like to visualize two ore more timesheets on the same timeline. I have added twice these as cols: Label, Start_time, end_time and I have also added rows as exact variables. After that I have got the following error message in output:
Invalid data table format: must have 3 or 4 data columns.
UPDATE:
http://i.stack.imgur.com/JFZYU.png
Oh, I see. To have several timesheets in the same row, you need to use 4 columns: the first one with the name of the column, the second one with the name of the timesheet, the third one with start_time and fourth one with end_time. Here is an example taking into account your image, though you need to change the dates:
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(1789, 3, 29), new Date(1797, 2, 3)],
[ 'Magnolia Room', 'Intro Javascript', new Date(1797, 2, 3), new Date(1801, 2, 3)],
[ 'Magnolia Room', 'Advanced Javascript', new Date(1801, 2, 3), new Date(1809, 2, 3)],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(1789, 3, 20), new Date(1797, 2, 3)],
[ 'Gladiolus Room', 'Advanced Perl', new Date(1797, 2, 3), new Date(1801, 2, 3)],
[ 'Gladiolus Room', 'Applied Perl', new Date(1801, 2, 3), new Date(1805, 2, 3)],
[ 'Petunia Room', 'Google Charts', new Date(1805, 2, 3), new Date(1812, 3, 19)],
[ 'Petunia Room', 'Closure', new Date(1789, 8, 25), new Date(1790, 2, 21)],
[ 'Petunia Room', 'App Engine', new Date(1790, 2, 21), new Date(1793, 11, 30)]
]);
Took this from this example: Google TimeLine Advanced Example