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>
Related
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...
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);
}
I want to create a discontinuous line chart like this.
To draw the chart I wrote like this.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Number');
data.addRows([
[new Date(2017, 1, 20), 460],
[new Date(2017, 1, 27), 579],
[new Date(2017, 1, 27), null],
[new Date(2017, 2, 1), 679],
[new Date(2017, 2, 6), 352]
]);
var linearOptions = {
title: 'Discontinuous Line Chart'
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
}
I had to put a null value data to make it separate.
Is there a way to draw a chart like above from a data like these?
data.addRows([
[new Date(2017, 1, 20), 460, true],
[new Date(2017, 1, 27), 579, false],
[new Date(2017, 2, 1), 679, true],
[new Date(2017, 2, 6), 352, true]
]);
This is a source code in jsfiddle.
https://jsfiddle.net/7jkmovqs/
you can use a 'style' column role...
use stroke-opacity: 0.0; to create a gap in the line
see following working snippet...
here, null results in the default style...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Number');
data.addColumn({role: 'style', type: 'string'});
data.addRows([
[new Date(2017, 1, 20), 460, null],
[new Date(2017, 1, 27), 579, null],
[new Date(2017, 2, 1), 679, 'line {stroke-opacity: 0.0;}'],
[new Date(2017, 2, 6), 352, null]
]);
var linearOptions = {
title: 'Discontinuous Line Chart'
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linear_div"></div>
note: there is a column role for 'certainty' that takes a boolean value...
data.addRows([
[new Date(2017, 1, 20), 460, true],
[new Date(2017, 1, 27), 579, false],
[new Date(2017, 2, 1), 679, true],
[new Date(2017, 2, 6), 352, true]
]);
but this will make the line dashed...
I read the API reference from google developer website. For material line chart, there is example from here. Could anyone tell me how to remove the bottom "Month"? I think it should be worked by some code like:
hAxis: {
title: ''
}
In addition, most of the hAxis and vAxis features don't work.
that is correct, the following option will remove the x-axis title...
hAxis: {
title: ''
},
just be sure to use the options conversion method for material charts...
//convert options
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
hAxis: {
title: ''
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Classic</button>
<br><br>
<div id="chart_div"></div>
note: the conversion method will not work for all options,
many simply aren't supported...
see --> Tracking Issue for Material Chart Feature Parity
another route would be to use a classic chart with the following option...
theme: 'material'
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