Chart is not displaying (google charts + codeigniter)
Question
I'm trying to display a simple chart but it's not showing on localhost. I'm using codeigniter framework+google charts.
I want to display this simple chart: Chart
Data_model.php :
defined('BASEPATH') OR exit('No direct script access allowed');
class Data_model extends CI_Model {
private $performance = 'sportoviska_zakaznici';
function __construct() {
}
function get_chart_data() {
return $this->db->query('SELECT pohlavie, count(*) as counts FROM sportoviska_zakaznici GROUP BY rok')->result_array();
}
}
Charts.php (controller):
class Charts extends CI_Controller {
function __Construct() {
parent::__Construct();
$this->load->helper(array('form', 'url'));
$this->load->model('data_model', 'chart');
}
public function index()
{
$data['chart_data'] = $this->chart->get_chart_data();
$this->load->view('uvodna_stranka', $data);
}
}
uvodna_stranka.php (view):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the line package.
// google.charts.load('current', {'packages':['bar', 'timeline']});
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['pohlavie', 'counts'}],
<?php
foreach ($chart_data as $data) {
echo "['".$data["pohlavie"]."', ".$data["counts"]."],";
}
?>
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<b>Bla bla<b>
<div id="piechart" style="width: 900px;"></div>
</body>
</html>
I'm trying to display data from this MySQL table: Mysql table
When I try to access it from my localhost chart is not being displayed. This is how it looks: Image
So what is the problem?
2 answers
solution1
0 ACCPTED 2019-05-02 11:06:23
you can check the browser's console for errors (press F12 on most)
there are a couple issues here...
var data = google.visualization.arrayToDataTable([
['pohlavie', 'counts'}],
<?php
foreach ($chart_data as $data) {
echo "['".$data["pohlavie"]."', ".$data["counts"]."],";
}
?>
first, there is a ending curly brace out of place after --> 'counts'}
remove it...
next, the array for the data doesn't have ending braces --> ]);
change above to...
var data = google.visualization.arrayToDataTable([
['pohlavie', 'counts'],
<?php
foreach ($chart_data as $data) {
echo "['".$data["pohlavie"]."', ".$data["counts"]."],";
}
?>
]);
solution2
0 2019-05-02 11:06:51
First you have syntax problems, you have a closing bracket in ['pohlavie', 'counts' } ], which doesn't even open or has any porpouse I think.
Then when you have the data, in which you never close the tags from the function:
var data = google.visualization.arrayToDataTable([
['pohlavie', 'counts'}],
<?php
foreach ($chart_data as $data) {
echo "['".$data["pohlavie"]."', ".$data["counts"]."],";
}
I went on https://developers.google.com/chart/interactive/docs/drawing_charts and found out you should probably be using the following first example. In your case it should go along the lines of the following instead of your var data :
data = new google.visualization.DataTable();
data.addColumn('string', 'pohlavie');
data.addColumn('number', 'counts');
data.addRows([
<?php
foreach ($chart_data as $data) {
echo '["'.$data["pohlavie"].'","'.$data["counts"].'"]';
}
?>
]);
Just to be sure you should check the examples of the google charts documentation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.