I'm have problem producing a Google Chart API line chart with dates on both the vertical and horizontal axis. The resulting chart should look like this :
This is some code which attempts to produce that effect :
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["LineChart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('date', 'Target');
data.addColumn('date', 'Results');
data.addRows([
[new Date(2015, 1 ,1), new Date(2015, 3 ,1),new Date(2015, 4 ,1)],
[new Date(2015, 3 ,1), new Date(2015, 4 ,1),new Date(2007, 4 ,15)],
]);
var options = {'vAxis': {format:'MMM d, y'}};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
// var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
// chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 300px; height: 240px;" ></div>
</body>
</html>
But the resulting chart looks like this :
in which the vertical axis is showing values which don't correspond to the date values supplied. I have tried using the vAxis.format option setting but that hasn't had any effect.
Would like to know how the vertical axis could show 'Feb-2015' etc ? Thanks.
Since you are using google.visualization.LineChart, corechart package needs to be loaded:
google.load("visualization", "1", { packages: ["corechart"] });
After that you could specify date type values:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('date', 'Target');
data.addColumn('date', 'Results');
data.addRows([
[new Date(2015, 6, 1), new Date(2016, 2 ,1), new Date(2015, 11 ,1)],
[new Date(2015, 7 ,1), new Date(2016, 1 ,1), new Date(2015, 11 ,1)],
[new Date(2015, 8 ,1), new Date(2015, 11 ,1), new Date(2015, 11 ,1)],
]);
Example
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('date', 'Target');
data.addColumn('date', 'Results');
data.addRows([
[new Date(2015, 6, 1), new Date(2016, 2 ,1), new Date(2015, 11 ,1)],
[new Date(2015, 7 ,1), new Date(2016, 1 ,1), new Date(2015, 11 ,1)],
[new Date(2015, 8 ,1), new Date(2015, 11 ,1), new Date(2015, 11 ,1)],
]);
var options = {
hAxis: {
format: 'MMM d, y',
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 480px; height: 320px;"></div>
Related
Problem: If there isn't enough separation (time) between the tasks (bars), the dependency arrows don't display properly.
Question: Is it possible to start the dependency arrows from the left of each task bar instead of the middle?
Example of Problem:
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['I0', 'External data acquisition request', 'RB',
new Date(2022, 4, 9), new Date(2022, 5, 29), null, 10, null],
['I1', 'data extraction', 'JK',
new Date(2022, 4, 15), new Date(2022, 5, 5), null, 100, null],
['I2', 'Create dataframe', 'RB',
new Date(2022, 4, 17), new Date(2022, 5, 10), null, 100, 'I1']
]);
var options = {
height: 700,
gantt: {
criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
arrow: {
angle: 50,
width: 1,
color: 'green',
radius: 30
}
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have the same kind of chart used in other locations in my project, and I did not changed anything.
The problem i'm getting is that no matter what i do the horizontal size does not changes...
obs- Both charts presented are in the same page but use unique identifiers and are in distinct divs.
obs- I already tried to remove the chart that is working but nothing changed.
i'm getting this layout:
[
When i should be getting this (already tried with the same exact code)
Using the inspector I'm getting this info:
The code i'm using is:
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['AA AGUIAR - 1', new Date(2019, 0, 01), new Date(2025, 0, 01)],['AA AGUIAR - 1', new Date(2009, 0, 01), new Date(2016, 7, 18)],['Torre 1 - 145', new Date(2019, 0, 01), new Date(2025, 0, 01)],['Torre 2 - 1A', new Date(2019, 0, 26), new Date(2025, 0, 01)],]);
chart.draw(dataTable);
}
with this div to present it:
<div id="example3.1" style="height: 200px;">
UPDATE:
Following the suggestion of WhiteHat I updated my code!
It looks like WhiteHat is right! the problem is in the tabs and I tried updating my code to this (once again WhiteHat suggestion), and it still doesn't work!
I tried to change the default tab when loading the page and the chart loaded great...
Updated code(not working):
google.charts.load('current', {
packages:['timeline']
}).then(function () {
// listen for tab shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// determine which tab is visible based on tab text
window.dispatchEvent(new Event('resize'));
switch ($(e.target).html()) {
case 'Vista por Contrato':
drawChart1();
break;
case 'Vista por Fracções':
drawChart2();
break;
}
});
function drawChart1() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['AA AGUIAR - 1', new Date(2019, 0, 01), new Date(2025, 0, 01)],['AA AGUIAR - 1', new Date(2009, 0, 01), new Date(2016, 7, 18)],['Torre 1 - 145', new Date(2019, 0, 01), new Date(2025, 0, 01)],['Torre 2 - 1A', new Date(2019, 0, 26), new Date(2025, 0, 01)],?>
]);
chart.draw(dataTable);
}
function drawChart2() {
// code for chart 2
var data = new google.visualization.DataTable();
data.addColumn('string', 'Contrato');
data.addColumn('date', 'Season Start Date');
data.addColumn('date', 'Season End Date');
data.addRows([
['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['Teste', new Date(2009, 0, 01), new Date(2016, 7, 18)],['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['Teste', new Date(2009, 0, 01), new Date(2016, 7, 18)],['WBOX LDA', new Date(2019, 0, 01), new Date(2025, 0, 01)],]);
var options = {
height: 450,
timeline: {
groupByRowLabel: false
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
// draw chart on initial tab
drawChart2();
});
This is the code I have for my tabs (since it looks the problem starts here!).
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item"><a data-toggle="tab" href="#fraccoes">Vista por Fracções</a></li>
<li class="active"><a data-toggle="tab" href="#contratos">Vista por Contrato</a></li>
<li class="nav-item"><a data-toggle="tab" href="#notificacoes">Notificações</a></li>
</ul>
and this is the code for my bootstrap tabs:
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
in the code suggested by #whitehat there was an issue. I don't know if the problem was mine, or in suggestion, but i manage to solve it. The resize function wasn't working because it wasn't calling the correct charts. The names where not standard and because of that it was not working.
where is the corrected code:
google.charts.load('current', {
packages:['timeline']
}).then(function () {
// bootstrap tabs
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
// listen for tab shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// determine which tab is visible based on tab text
window.dispatchEvent(new Event('resize'));
drawChart1();
drawChart2();
});
window.addEventListener('resize', drawChart);
function drawChart() {
switch ($(e.target).html()) {
case 'Vista por Fracções':
drawChart1();
break;
case 'Vista por Contrato':
drawChart2();
break;
}
}
// code for chart 1
var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
var data1 = new google.visualization.DataTable();
data1.addColumn({ type: 'string', id: 'fracao' });
data1.addColumn({ type: 'string', id: 'contrato' });
data1.addColumn({ type: 'date', id: 'Start' });
data1.addColumn({ type: 'date', id: 'End' });
data1.addRows([
['AA AGUIAR - 1', new Date(2019, 0, 01), new Date(2025, 0, 01)],['AA AGUIAR - 1', new Date(2009, 0, 01), new Date(2016, 7, 18)],['Torre 1 - 145', new Date(2019, 0, 01), new Date(2025, 0, 01)],['Torre 2 - 1A', new Date(2019, 0, 26), new Date(2025, 0, 01)],
]);
var options1 = {
chartArea: {
left: 40,
width: '100%'
},
timeline: {
groupByRowLabel: true,
singleColor: 'green' ,
showRowLabels: true },
width: '100%',
height: '400',
};
// code for chart 2
var chart2 = new google.visualization.Timeline(document.getElementById('chart_div'));
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'NCONT');
data2.addColumn('string', 'Contrato');
data2.addColumn('date', 'Season Start Date');
data2.addColumn('date', 'Season End Date');
data2.addRows([
['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['Teste', new Date(2009, 0, 01), new Date(2016, 7, 18)],['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['Teste', new Date(2009, 0, 01), new Date(2016, 7, 18)],['WBOX LDA', new Date(2019, 0, 01), new Date(2025, 0, 01)],]);
]);
var options2 = {
height: 300,
timeline: {
groupByRowLabel: false,
singleColor: 'orange' ,
showRowLabels: false }
};
function drawChart1() {
chart1.draw(data1, options1);
}
function drawChart2() {
chart2.draw(data2, options2);
}
// draw chart on initial tab
drawChart2();
Now is working the bootstrap tabs!
I have a google gantt chart in my web page. But i am not able to scroll it horizontally if I have more items.
I tried :
explorer: {axis: 'horizontal', keepInBounds: true}
After this chart itself disappeared. How can I add a scroll bar???
Chart link : LINK
add css to chart container...
#chart_div {
overflow-x: scroll;
}
you can also give the chart a specific width...
var options = {
height: 275,
width: 1000
};
see following working snippet...
google.charts.load('current', {
packages: ['gantt']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275,
width: 1000
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
});
#chart_div {
overflow-x: scroll;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a DATAS.TXT file automatically filled-in with TIME and TEMPERATURE datas.
TIME is already formatted as per Google Charts requirements:
new Date(Year, Month, Day, Hours, Minutes)
TIME datas and TEMPERATURES datas are separated by a SPACE character and each line terminates with \r.
The DATAS.TXT file shows something like this:
new Date(2017, 01, 01, 05, 15) 20.5
new Date(2017, 01, 01, 18, 50) 21.7
new Date(2017, 01, 19, 12, 35) 22.4
etc ...
From this DATA file I would like to generate a Google Chart like this example:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
data.addRows([
[new Date(2001, 0, 1, 0), 0.0],
[new Date(2001, 0, 1, 1), 4.8],
[new Date(2001, 0, 1, 2), 4.6],
[new Date(2001, 0, 1, 3), 2.6],
[new Date(2001, 0, 1, 4), 3.6],
// ...
// Rest of year data here...
// ...
[new Date(2001, 11, 31, 20), 9.4],
[new Date(2001, 11, 31, 21), 7.0],
[new Date(2001, 11, 31, 22), 8.5],
[new Date(2001, 11, 31, 23), 2.2]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
My question is, how can I fill-in data.addRows([ ... ] contents with the datas issued from my DATAS.TXT file?
I need a function that could pick-up TIMES, detect the space character insertion, pick-up the associated TEMPERATURE data and detect the \r character.
I'm not confortable with PHP, any help will be highly appreciated.
I want to compare the data for the same dates but different years.
For example, for the date January 1, I want to display the data for 2016 and 2015 on the same chart, same position on the x-axis but on different line series.
Is this possible?
here is an example of the chart, I think you are describing...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '2005');
data.addColumn('number', '2006');
data.addRows([
[new Date('01/01/2016'), 200, 210],
[new Date('01/02/2016'), 190, 220],
[new Date('01/03/2016'), 205, 200],
[new Date('01/04/2016'), 220, 230],
[new Date('01/05/2016'), 212, 210],
[new Date('01/06/2016'), 185, 193],
[new Date('01/07/2016'), 196, 207]
]);
var options = {
height: 400
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>