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'm using Google Charts' Annotation Chart to display data. Everything's working but it's not showing the volume section, as seen in this google finance chart that, I believe, uses the same chart.
Here's what I have so far, but I don't know how to include that section:
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Col1');
data.addColumn('string', 'Col2');
data.addColumn('string', 'Col3');
data.addColumn('number', 'Col4');
data.addColumn('string', 'Col5');
data.addColumn('string', 'Col6');
data.addRows([
[new Date(2017, 2, 15), 85, 'More', 'Even More',
91, undefined, undefined],
[new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
99, undefined, undefined],
[new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
96, 'Att', 'Good'],
[new Date(2017, 2, 18), 60, 'Sales', 'Low',
80, 'HR', 'Absences'],
[new Date(2017, 2, 19), 95, 'Sales', 'Goals',
85, 'HR', 'Vacation'],
[new Date(2017, 2, 20), 40, 'Sales', 'Training',
67, 'HR', 'PTO']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
This is what the google finance chart looks like, but I can't seem to include the volume section marked in red:
the annotation chart does not include an option for the middle chart / volume section
this could be added manually by drawing another, separate chart
however, the second chart cannot be placed in between the annotation chart and it's range filter
as such, you would need to turn off the annotation's range filter
and draw your own ChartRangeFilter
typically, custom filters are bound to charts using a dashboard
however, while building the example for this answer,
i noticed the annotation chart doesn't re-draw properly
after the filter has been applied, and then removed,
the annotation chart does not return to the original state
to correct, need to create the annotation chart every time it is drawn
see following working snippet,
a column chart is used for the volume section
the range filter is bound manually using the 'statechange' event
google.charts.load('current', {
callback: drawDashboard,
packages: ['annotationchart', 'controls', 'corechart']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Col1');
data.addColumn('string', 'Col2');
data.addColumn('string', 'Col3');
data.addColumn('number', 'Col4');
data.addColumn('string', 'Col5');
data.addColumn('string', 'Col6');
data.addRows([
[new Date(2017, 2, 15), 85, 'More', 'Even More',
91, undefined, undefined],
[new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
99, undefined, undefined],
[new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
96, 'Att', 'Good'],
[new Date(2017, 2, 18), 60, 'Sales', 'Low',
80, 'HR', 'Absences'],
[new Date(2017, 2, 19), 95, 'Sales', 'Goals',
85, 'HR', 'Vacation'],
[new Date(2017, 2, 20), 40, 'Sales', 'Training',
67, 'HR', 'PTO']
]);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
dataTable: data,
options: {
filterColumnLabel: 'Date',
ui: {
chartOptions: {
height: 60,
width: '100%',
chartArea: {
width: '100%'
},
chartType: 'AreaChart'
}
}
},
view: {
columns: [0, 1, 4]
}
});
google.visualization.events.addListener(rangeFilter, 'ready', drawCharts);
google.visualization.events.addListener(rangeFilter, 'statechange', drawCharts);
rangeFilter.draw();
function drawCharts() {
var filterState = rangeFilter.getState();
var filterRows = data.getFilteredRows([{
column: 0,
minValue: filterState.range.start,
maxValue: filterState.range.end
}]);
var viewAnn = new google.visualization.DataView(data);
viewAnn.setRows(filterRows);
var chartAnn = new google.visualization.AnnotationChart(document.getElementById('chart_ann'));
var optionsAnn = {
displayAnnotations: false,
displayRangeSelector: false
};
chartAnn.draw(viewAnn, optionsAnn);
var viewCol = new google.visualization.DataView(data);
viewCol.setColumns([0, 1, 4]);
viewCol.setRows(filterRows);
var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_col'));
var optionsCol = {
hAxis: {
textStyle: {
color: 'transparent'
}
},
height: 72,
legend: 'none',
theme: 'maximized',
vAxis: {
textStyle: {
color: 'transparent'
}
}
};
chartCol.draw(viewCol, optionsCol);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_ann"></div>
<div id="chart_col"></div>
<div id="control_div"></div>
I'm trying to make a google chart with prices on the y-axis and dates on the x-axis. I don't understand why my code is not working. It is not displaying anything.
In header:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dato');
data.addColumn('number', 'Anbefalet pris');
data.addColumn('number', 'Nuværende pris');
data.addRows([
[new Date (2016, 8, 6), 378, 418],
[new Date (2016, 8, 13), 66, 324],
[new Date (2016, 8, 20), 254, 257],
[new Date (2016, 8, 27), 117, 105],
[new Date (2016, 9, 3), 119, 66],
[new Date (2016, 9, 10), 88, 77],
[new Date (2016, 9, 17), 76, 96],
[new Date (2016, 9, 24), 123, 106],
[new Date (2016, 10, 1), 66, 148],
[new Date (2016, 10, 8), 128, 116]
]);
var options = {
chart: {
title: 'Anbefalede og nuværende ugepriser',
subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
},
legend: { position:'none' },
width: '100%',
pointSize: 10,
explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
};
var chart = new google.charts.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
In body:
<div id="linechart_material" class="chart"></div>
Any help will be much appreciated.
material charts use the namespace google.charts
core charts use the namespace google.visualization
so for core chart line chart -- google.visualization.LineChart
for material line chart -- google.charts.Line
see following snippet, which draws both...
for packages, use 'corechart' or 'line' for material
if using material, don't forget google.charts.Line.convertOptions
however, there are several options that won't work in material
recommend using corechart with option for theme: 'material'
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dato');
data.addColumn('number', 'Anbefalet pris');
data.addColumn('number', 'Nuværende pris');
data.addRows([
[new Date (2016, 8, 6), 378, 418],
[new Date (2016, 8, 13), 66, 324],
[new Date (2016, 8, 20), 254, 257],
[new Date (2016, 8, 27), 117, 105],
[new Date (2016, 9, 3), 119, 66],
[new Date (2016, 9, 10), 88, 77],
[new Date (2016, 9, 17), 76, 96],
[new Date (2016, 9, 24), 123, 106],
[new Date (2016, 10, 1), 66, 148],
[new Date (2016, 10, 8), 128, 116]
]);
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
tickMarks.push(data.getValue(i, 0));
}
var options = {
chart: {
title: 'Anbefalede og nuværende ugepriser',
subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
},
legend: { position:'none' },
width: '100%',
pointSize: 10,
explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
hAxis: {
format: 'MM/dd/yyyy',
ticks: tickMarks
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
chart = new google.visualization.LineChart(document.getElementById('linechart_core'));
chart.draw(data, options);
},
packages: ['corechart', 'line']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Material Chart</div>
<div id="linechart_material"></div>
<div>Core Chart</div>
<div id="linechart_core"></div>
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>
I have setup a simple Google Chart by following the example on this page:
http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
But now, after it's rendered, with some javascript i want to dynamically add another series of data. Can anyone point me in the right direction on how to do this?
The data i want to add, a number column with the number of employees, should show a new line in the chart, in another color and doesn't start at year 2004 but at 2005,
You need to add new data to 'data' variable and call the chart.draw() method again.
See the DataTable docs or play a bit at http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
Example:
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));