I have researched for a long time and can't seem to figure out how to get it working.
I am using a google line chart and I want to fill the chart with data from a php loop.
I have tried following examples from the following links
How to get mysql data into a google chart using php loop?
Looping in Google Charts Javascript
But none of them work, the chart doesn't draw at all.
This is the code before using php:
/* This is how how google charts layout is without the php
var data = google.visualization.arrayToDataTable([
["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
[2014, 1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
[2015, 11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
[2016, 60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
[2017, 10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
[2014, null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
[2015, null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
[2016, null, "", null, "", null, ""],
[2017, null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
[2014, null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
[2016, null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],
]);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
//initState.selectedValues.push(data.getColumnLabel(1));
// initState.selectedValues.push(data.getColumnLabel(3));
} */
Here is the code i've tried with php:
//GET ID for CHART
if(isset($_GET['id'])) {
$childId=$_GET['id'];
$chartsql = "SELECT dancer_id1, dancer_placement1, number_competitors1, feis_entered, null as dancer_placement2, null as number_competitors2, null as feis_entered2, null as dancer_placement3, null as number_competitors3, null as feis_entered3 from mark_cards1 where dancer_id1='$childId'
union all
select dancer_id2,null, null, null, dancer_placement2, number_competitors2, feis_entered, null as dancer_placement3, null as number_competitors3, null as feis_entered3 from mark_cards2 where dancer_id2='$childId'
union all
select dancer_id3,null, null, null, null, null, null, dancer_placement3, number_competitors3, feis_entered from mark_cards3 where dancer_id3='$childId'";
$ChartRes = mysqli_query($con,$chartsql);
$chartdata = array();
while ($ChartRow=mysqli_fetch_array($ChartRes)){
$first[] = $ChartRow['dancer_placement1'];
$second[] = $ChartRow["dancer_placement2"];
$third[]= $ChartRow["dancer_placement3"];
$feis_entered = $ChartRow["feis_entered"];
}
$year = intval($feis_entered);
};
?>
function drawLineChart() {
var data = google.visualization.arrayToDataTable([
// This is how I tried to use php in google charts
['Year', <?php foreach ($feis_entered as $feis) { echo $feis; }?>, {type: 'string', role: 'tooltip'}],
[<?php foreach ($year as $years) { echo $years; }?>, <?php foreach ($first as $places) { echo $places; }?>, <?php echo "Feis: $feis Date: $years Rank: $places";?>]
]);
// build ticks
var ticks = [];
for (var i = 0; i <= 60; i = i + 15) {
addTick(i);
}
function addTick(i) {
var place;
var digit;
if (i === 0) {
i = 1;
}
digit = i.toString().substr(i.toString().length - 1);
switch (digit) {
case '1':
place = 'st place';
break;
case '2':
place = 'nd place';
break;
case '3':
place = 'rd place';
break;
default:
place = 'th place';
}
ticks.push({
v: i,
f: i + place
});
}
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'line_chart',
dataTable: data,
options: {
title: 'Feis compeition placements over the years',
tooltip: {isHtml: true},
//pointSize: 5,
// width: 670,
//height: 550,
hAxis: {
format: '0',
ticks: data.getDistinctValues(0),
gridlines: {
color: 'transparent'
}
},
interpolateNulls: true,
legend: {
// position: 'bottom'
},
vAxis: {
title: 'Competition Placement',
direction: -1,
gridlines: {count: 10},
ticks: ticks
}
}
});
chart.draw();
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter_lines',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Filter',
allowTyping: true,
selectedValuesLayout: 'asideWrapping',
caption: 'Choose a Feis...',
labelStacking: 'vertical'
}
},
state: initState
});
google.visualization.events.addListener(columnFilter, 'statechange', function () {
var state = columnFilter.getState();
var row;
var columnIndices = [0];
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
columnIndices.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
columnIndices.sort(function (a, b) {
return (a - b);
});
chart.setView({columns: columnIndices});
chart.draw();
});
columnFilter.draw();
}
The graph should end up looking like this
Is there a way I can do this?
