Here is what I'm trying to do. I'm trying to place multiple Google Pie Charts, I already put the code in, however, I'm getting the following error message:
Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined and I'm getting another error message: Error: Data for arrayToDataTable is not an array.
Here is the code that I'm using right now:
<?php
foreach ($currentTeamLeaders as $currentTeamLeader) {
$chartId = "chart_div_$currentTeamLeader[teamLeadId]";
$chartData = array(
array("Task","Daily Report"),
array("Points Achieved",90),
array("Points Left",190)
);
?>
<div id="<?php echo $chartId ?>" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
<script type="text/javascript">drawChart('<?php echo $chartId; ?>','<?php echo json_encode($chartData); ?>')</script>
<?php
}
?>
Here is the google chart code:
function drawChart(chartId,data) {
var dataTable = google.visualization.arrayToDataTable(data);
var options = {
backgroundColor: 'transparent',
title: '' ,
chartArea:{right:0,top:0,width:"90%",height:"100%" },
height: 150,
width: 200,
};
var chart = new google.visualization.PieChart(document.getElementById(chartId));
chart.draw(dataTable, options);
}
What could be causing the issues?
Thanks!
I have found a solution. What I did was split up the JS code and put the code together in the PHP for loop.
I'm not familiar with js. I'd like to get the result of "file_get_contents" function and put it on the "source" (I have marked both with .................).
Thank you in advance.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
content = JSON.parse(data)
fetch(content['some']['media']['content'], myInit).then((resp) =>
resp.text()).then(function(data));});}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
var player = new Clappr.Player({
source: '<?php echo $url...................?>',
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});};
</script>
</body>
</html>
I think if you use the following code, you will get closer to your solution.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
var content = JSON.parse(data);
console.dir(content);
var player = new Clappr.Player({
source: content['some']['media']['content'],
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});
});
}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
//Whatever
};
</script>
</body>
</html>
If you tell me what console.dir outputs, I might be able to offer more help.
BTW.: doesn't clapper have some documents showing how to use its API?
Good day!
My code doesn't display the chart.
I am trying to plot my json data into a google material line chart to output a chart like these:
here's my javascript code:
google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartCountry);
function drawChartCountry() {
var jsonData1 = $.ajax({
url: "analytics/country-sales.php",
dataType: "json",
async: false
}).responseText;
var data1 = new google.visualization.DataTable(jsonData1);
var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var formatter_amount1 = new google.visualization.NumberFormat({prefix: 'HKD ', negativeColor: 'red', negativeParens: true});
// formatter_amount1.format(data1, 1);
var chart = new google.visualization.LineChart(document.getElementById('chart_div_country'));
chart.draw(data1, options);
}
and here's my json data
{"cols":[[[{"label":"Date","type":"string"},{"label":"TAIWAN","type":"string"},{"label":"HONG KONG","type":"string"},{"label":"JAPAN","type":"string"},{"label":"INDONESIA","type":"string"},{"label":"THAILAND","type":"string"},{"label":"UNITED STATES","type":"string"},{"label":"PHILIPPINES","type":"string"},{"label":"UNITED KINGDOM","type":"string"},{"label":"MALAYSIA","type":"string"},{"label":"AUSTRALIA","type":"string"},{"label":"SINGAPORE","type":"string"},{"label":"SPAIN","type":"string"},{"label":"SWEDEN","type":"string"},{"label":"GERMANY","type":"string"},{"label":"VIET NAM","type":"string"},{"label":"SOUTH KOREA","type":"string"},{"label":"NORWAY","type":"string"},{"label":"FRANCE","type":"string"},{"label":"CANADA","type":"string"},{"label":"NETHERLANDS","type":"string"}]]],"rows":[{"c":[{"v":"Date(2014,1,1)"},{"v":48876},{"v":3970},{"v":2505},{"v":1824},{"v":982},{"v":676},{"v":491},{"v":387},{"v":238},{"v":173},{"v":162},{"v":108},{"v":101},{"v":98},{"v":96},{"v":91},{"v":88},{"v":84},{"v":82},{"v":72}]}]}
here's the html code (removed some elements not related to this topic)
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="analytics/sales-country.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
</body>
Can anyone help me please. Thank you.
any answer is highly appreciated.
first, the "cols" are wrapped in too many arrays
[[[]]] vs. []
{"cols":[[[{"label":"Date","type":"string"},...,{}]]],
should be...
{"cols":[{"label":"Date","type":"string"},...,{}],
next, the column type for the line series should be 'number'
and recommend 'date' for the first column
this...
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
not this...
"cols": [
{"label":"Date","type":"string"},
{"label":"TAIWAN","type":"string"},
{"label":"HONG KONG","type":"string"},
also, if you want a Material line chart,
just need the 'line' package and...
google.charts.Line
the Core chart version is...
google.visualization.LineChart
and highly recommend not using async: false, use .done and .fail callbacks instead
see following working snippet, move code from .fail to .done to test locally...
google.charts.load("current", {
callback: drawChartCountry,
packages: ["line", "corechart"]
});
function drawChartCountry() {
$.ajax({
url: "analytics/country-sales.php",
dataType: "json"
}).done(function (jsonData) {
}).fail(function (jqXHR, textStatus) {
var jsonData = {
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
{"label":"JAPAN","type":"number"},
{"label":"INDONESIA","type":"number"},
{"label":"THAILAND","type":"number"},
{"label":"UNITED STATES","type":"number"},
{"label":"PHILIPPINES","type":"number"},
{"label":"UNITED KINGDOM","type":"number"},
{"label":"MALAYSIA","type":"number"},
{"label":"AUSTRALIA","type":"number"},
{"label":"SINGAPORE","type":"number"},
{"label":"SPAIN","type":"number"},
{"label":"SWEDEN","type":"number"},
{"label":"GERMANY","type":"number"},
{"label":"VIET NAM","type":"number"},
{"label":"SOUTH KOREA","type":"number"},
{"label":"NORWAY","type":"number"},
{"label":"FRANCE","type":"number"},
{"label":"CANADA","type":"number"},
{"label":"NETHERLANDS","type":"number"}
],
"rows":[
{"c":[
{"v":"Date(2014,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]},
{"c":[
{"v":"Date(2015,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]}
]
};
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var chart = new google.charts.Line(document.getElementById('chart_div_country'));
chart.draw(data, options);
//console.log('error', textStatus);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
I am trying to create a google pie chart using ajax and php. But its not working for me. Please anyone help me. The code is given below.
My first page is piechart.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function get_piechart()
{
$("#std").load("get_piechart.php");
}
</script>
<input type="button" value="piechart" onClick="get_piechart();"/>
<div id="std">
</div>
My ajax page is get_piechart.php
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_chart_data);
function load_chart_data() {
$.ajax({
url: 'getData1.php', // provide correct url
type: 'POST',
data: {get_chart: true},
dataType: 'JSON', // <-- since youre expecting JSON
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
draw_chart(chart_values); // call your drawing function!
}
});
}
function draw_chart(chart_values) {
var data = google.visualization.arrayToDataTable(chart_values);
var options = {
title: 'Your super chart!',
vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}},
hAxis: {title: 'Task', titleTextStyle: {italic: false}},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
data file is getData1.php
<?php
if(isset($_POST['get_chart'])) {
$values = array(
array('Task', 'Hours Per Day'),
array('Booking', 11),
array('Pending', 89),
);
echo json_encode($values);
exit;
}
?>
On clicking the piechart button i got the error Uncaught ReferenceError: google is not defined. Please help me to solve this problem
I'm getting my lat & long via:
$geocode = file_get_contents('http://maps.google.com/maps/api/geocode/json?address=' . $g_location . '&sensor=true');
$output= json_decode($geocode);
$lat = $output->results[0]->geometry->location->lat;
$long = $output->results[0]->geometry->location->lng;
I return the correct lat & long. So now I try to build my map:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTQqh2ksk9ZTqSfx-_ki_lHj-q32kYIY8&sensor=false"> </script>
<script language="JavaScript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(<?=$lat?>, <?=$long?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML:
div id="map_canvas"></div>
Nothing is showing up. Am I missing something?
Thanks.
Your <div id="map_canvas"> needs a size, (width and height) so,
<div id="map_canvas" style="width:400px;height:300px"></div>
Add the following. You need to use initialize() in the onload function in the body as well
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
Please refer to the google map playground examples
http://code.google.com/apis/ajax/playground/?exp=maps#map_simple