Google Chart API Issue in PHP

Google Chart API Issue in PHP - javascript

I need to display a dynamic google charts using loop... like all charts have different values but on same page... I have the following code:
<table>
<?php
$i=0;
while($i<4){
echo"
<script >
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([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 1, 12), new Date(2014, 2, 20), null, 100, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
]);
var options = {
height: 200,
gantt: {
trackHeight: 25
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div$i'));
chart.draw(data, options);
}
</script>
<tr>
<td> Hello </td>
<td id='chart_div$i'></td>
</tr>
";
$i++;
}
?>
</table>
What i am doing wrong and how to achieve the goal?

You're outputting the complete <script> tag 4 times. You should just output it once, ideally in the footer of your page. Take a look at my example:
<table>
<tr>
<td>Hello</td>
<td id='chart_div0'></td>
<td id='chart_div1'></td>
<td id='chart_div2'></td>
<td id='chart_div3'></td>
</tr>
</table>
And then in the footer:
<script type="text/javscript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
<?php for ( $counter = 0; $counter < 4; $counter++ ) : ?>
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([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 1, 12), new Date(2014, 2, 20), null, 100, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
]);
var options = {
height: 200,
gantt: {
trackHeight: 25
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div<?php echo $counter;?>'));
chart.draw(data, options);
<?php endfor; ?>
}
</script>

Related

google charts gantt can't get critical path or axis to show up

I am trying to follow along with examples here:
https://developers.google.com/chart/interactive/docs/gallery/ganttchart
My code looks like this:
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('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['5efbce41802562e233e21b9e',
'Demolition' ,
new Date(2020, 5, 8),
new Date(2020, 6, 24),
null,
100,
''],
['5efbd34a802562e233e21bda',
'Sealing, Flooring' ,
new Date(2020, 6, 27),
new Date(2020, 7, 5),
null,
100,
'5efbce41802562e233e21b9e'],
['5efbd390802562e233e21be6',
'Concrete Work' ,
new Date(2020, 7, 10),
new Date(2020, 7, 14),
null,
100,
'5efbd34a802562e233e21bda'],
['5efbd55e802562e233e21c3c',
'HVAC' ,
new Date(2020, 7, 18),
new Date(2020, 7, 28),
null,
100,
'5efbce41802562e233e21b9e'],
['5efbd55e802562e233e21c43',
'Fire Protection' ,
new Date(2020, 8, 1),
new Date(2020, 8, 11),
null,
100,
'5efbd55e802562e233e21c3c'],
['5efbd55e802562e233e21c4a',
'Framing and Drywalling' ,
new Date(2020, 8, 13),
new Date(2020, 8, 25),
null,
100,
'5efbd55e802562e233e21c3c,5efbd55e802562e233e21c43,5efbd55e802562e233e21c51'],
['5efbd55e802562e233e21c51',
'Electrical Upgrade' ,
new Date(2020, 8, 2),
new Date(2020, 8, 11),
null,
100,
''],
['5efbd55e802562e233e21c58',
'Flooring' ,
new Date(2020, 9, 5),
new Date(2020, 9, 16),
null,
100,
'5efbd390802562e233e21be6'],
['5efbd55e802562e233e21c5f',
'Inspection and Remediation' ,
new Date(2020, 9, 19),
new Date(2020, 9, 30),
null,
100,
'5efbd55e802562e233e21c4a'],
]);
var trackHeight = 40;
var options = {
height: data.getNumberOfRows() * trackHeight + 200,
width: 1024,
gantt: {
criticalPathEnabled: true,
criticalPathStyle: {
stroke: '#e64a19',
strokeWidth: 5
}
};
var chart = new google.visualization.Gantt(document.getElementById('gantt_5efbc530802562d3f4760a1f'));
chart.draw(data, options);
}
But my graph looks like this:
I don't see the axis (legend) as in the example, and i don't see the critical path. Any ideas?
Thanks,
kevin

Google Gantt Chart Move X-axis on Top Instead of Bottom

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([
['2014Spring', 'Spring 2014 ', 'spring',
new Date(2010, 5, 10), new Date(2010, 5, 12), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2010, 5, 13), new Date(2010, 5, 14), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2010, 5, 15), new Date(2010, 5, 16), null, 100, null],
]);
debugger;
var options = {
height: 400,
gantt: {
palette: [
],
trackHeight: 30,
labelStyle: {
fontName: ["RobotoCondensedRegular"],
fontSize: 15
`enter code here` },
textPosition: 'TOP', ## Heading ##
},
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
for (i = 0; i < data.hg.length;i++) {
if (data.hg[i].c[2].v == 'spring') {
options.gantt.palette.push({
"color": "#00FF00",
"dark": "#00FF00",
"light": "#00FF00"
});
}
else if (data.hg[i].c[2].v == 'summer') {
options.gantt.palette.push({
"color": "#00FF00",
"dark": "#0000FF",
"light": "#FF0000"
});
}
else {
options.gantt.palette.push({
"color": "#00FF00",
"dark": "#FF0000",
"light": "#FF0000"
});
}
}
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
Above is the code of the google gantt charts that I am using and trying to acheive to move the bottom x-axis to the Top Side.
I beleive there is a little tweaking is needed by which I can do that Which I am unable to undestand. Any Help on this would be great.

How can I extract row entry width of Google Chart

I'm having difficulty extracting the width of a selected row on a Google Gantt chart. To further elaborate I need the width of the singular data row, which I can see in the code behind under the 'rect' tag however not sure how to properly call the syntax for width retrieval.
ganttchart

first, wait for the chart's 'ready' event to fire.
then we can get the <rect> elements from the chart.
there will be other <rect> elements, besides those that represent a row.
such as the chart area, etc.
we can filter those out by fill color...
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
var rows = container.getElementsByTagName('rect');
var bars = [];
Array.prototype.forEach.call(rows, function(row) {
switch (row.getAttribute('fill')) {
case '#ffffff':
case '#f5f5f5':
case 'none':
// ignore
break;
default:
bars.push(row);
}
});
if (bars.length > 0) {
console.log(parseFloat(bars[0].getAttribute('width')));
}
});
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('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([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gantt(container);
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
var rows = container.getElementsByTagName('rect');
var bars = [];
Array.prototype.forEach.call(rows, function(row) {
switch (row.getAttribute('fill')) {
case '#ffffff':
case '#f5f5f5':
case 'none':
// ignore
break;
default:
bars.push(row);
}
});
if (bars.length > 0) {
console.log(parseFloat(bars[0].getAttribute('width')));
}
});
chart.draw(data, options);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Gantt chart shows wrong year

I have started using Gantt chart which is recently launched by Google which seems great for tasks tracking via chart.
I have created 4 tasks and chart loads fine but it shows wrong date for e.g. Jan 2016 in Develop the product and release section. Actually I haven't used this date in my data at all. What is the issue over here?
Here is my code:
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JavaScript:
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
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([
['Design', 'Design and analysis',
new Date(2015, 8, 1), new Date(2015, 8, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 8, 16), new Date(2015, 10, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 11, 01), new Date(2015, 11, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 12, 01), new Date(2015, 12, 20), null, 0, null],
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}

month numbers are zero-based in JavaScript
so Dec, 1 2015 would be --> new Date(2015, 11, 01)
instead the 12 pushes the date to Jan 1, 2016
see following snippets...
Date Test
console.log(new Date(2015, 11, 01));
console.log(new Date(2015, 12, 01));
Chart Test
if the range should be Aug - Dec, then reduce each month # by 1
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
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([
['Design', 'Design and analysis',
new Date(2015, 7, 1), new Date(2015, 7, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 7, 16), new Date(2015, 9, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 10, 01), new Date(2015, 10, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 11, 01), new Date(2015, 11, 20), null, 0, null],
]);
var options = {
height: 275
};
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>

Google Gantt Chart

I am using the Gantt Chart provided by Google.
I have added a listener to when I click on any of the elements or entity in attempt to return the row/columns data, but it is returning empty,
function selectHandler() {
var selectedItem = chart.getSelection();
if (selectedItem) {
console.log(selectedItem);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
Here is my attempt on jsfiddle: https://jsfiddle.net/30cuaarb/

Selection does not seem to work with google.visualization.GanttChart component, but you could introduce a custom selection as demonstrated below:
google.load("visualization", "1.1", { packages: ["gantt"] });
google.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([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.GanttChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
google.visualization.events.addListener(chart, 'onmouseover', saveSelection);
var selectedItem; //custom selector
function saveSelection(e) {
selectedItem = { row:e.row,column:null}; //save selected item
}
function selectHandler() {
//console.log(selectedItem);
document.getElementById('result').innerHTML = selectedItem.row + " row has been selected";
}
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gantt']}]}"></script>
<div id="chart_div"></div>
Result: <span id='result' />

We Keep Coding

JavaScript is the programming language of the Web.

Google Chart API Issue in PHP - javascript

Related

google charts gantt can't get critical path or axis to show up

Google Gantt Chart Move X-axis on Top Instead of Bottom

How can I extract row entry width of Google Chart

Google Gantt chart shows wrong year

Google Gantt Chart

Categories

Resources