I am using Google Chart for displaying a radar chart for my data calling from a database, but I am getting the wrong chart evident from comparing an Excel chart and a Google generated chart.
Here is the Excel chart:
Here is the output from the Google Chart API:
<html>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var response = '<?php echo json_encode($response); ?>'; //alert(' hi ' + response);
var obj = eval ("(" + response + ")");
var options = {cht: 'rs', chxt :'x,y', chd: 't:Q1a|Q1b|Q2a|Q2b|Q3a|Q3b|Q4a|Q4b|Q5a|Q5b|Q6a|Q6b|Q7a|Q7b|Q8a|Q8b|Q9a|Q9b',chls:'3|3|3|3|3|3|3|3|3' };
// Chart API chart type 'rs' is radar chart
//options.cht = 'rs';
//options.chx1 = 'Q1,Q2,Q,Q3,Q4,Q5,Q6,Q7,Q8,Q9';
//options.chxl = '0:|Q1a|Q1b|Q2a|Q2b|Q3a|Q3b|Q4a|Q4b|Q5a|Q5b|Q6a|Q6b|Q7a|Q7b|Q8a|Q8b|Q9a|Q9b';
//0:|0|45|90|135|180|225|270|315
// Set the line colors
//options.colors = ['#00FF00' , '#FF00FF'];
// Fill the area under the lines
options.fill = true;
// Create a grid for the chart
//options.chg = '25.0,25.0,4.0,4.0';
var dataTable = new google.visualization.DataTable(response);
var chart = new google.visualization.ImageChart(document.getElementById('Visualization'));
chart.draw(dataTable, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 600px;"></div>
</body>
</html>
The json_encode response output is:
var response = '{"cols":[{"id":"","label":"Q1a","type":"number"},{"id":"","label":"Q1b","type":"number"},{"id":"","label":"Q2a","type":"number"},{"id":"","label":"Q2b","type":"number"},{"id":"","label":"Q3a","type":"number"},{"id":"","label":"Q3b","type":"number"},{"id":"","label":"Q4a","type":"number"},{"id":"","label":"Q4b","type":"number"},{"id":"","label":"Q5a","type":"number"},{"id":"","label":"Q5b","type":"number"},{"id":"","label":"Q6a","type":"number"},{"id":"","label":"Q6b","type":"number"},{"id":"","label":"Q7a","type":"number"},{"id":"","label":"Q7b","type":"number"},{"id":"","label":"Q8a","type":"number"},{"id":"","label":"Q8b","type":"number"},{"id":"","label":"Q9a","type":"number"},{"id":"","label":"Q9b","type":"number"}],"rows":[{"c":[{"v":12},{"v":34},{"v":132},{"v":3},{"v":23},{"v":23},{"v":13},{"v":13},{"v":13},{"v":13},{"v":14},{"v":14},{"v":13},{"v":21},{"v":12},{"v":12},{"v":12},{"v":23}]},{"c":[{"v":10},{"v":52},{"v":16},{"v":61},{"v":9},{"v":31},{"v":20},{"v":48},{"v":18},{"v":64},{"v":38},{"v":64},{"v":19},{"v":56},{"v":35},{"v":57},{"v":37},{"v":55}]},{"c":[{"v":43},{"v":26},{"v":28},{"v":63},{"v":36},{"v":59},{"v":33},{"v":69},{"v":33},{"v":64},{"v":30},{"v":67},{"v":40},{"v":68},{"v":36},{"v":40},{"v":39},{"v":68}]},{"c":[{"v":44},{"v":76},{"v":73},{"v":83},{"v":71},{"v":69},{"v":53},{"v":80},{"v":39},{"v":70},{"v":63},{"v":82},{"v":33},{"v":80},{"v":33},{"v":76},{"v":36},{"v":75}]}]}';
Here is my PHP code:
<html>
<head>
<title></title>
</head>
<?php
$con=mysql_connect("localhost","root", "innernet") or die("Failed to connect with database!!!!");
mysql_select_db("mobiledb", $con);
$user= $_GET['user'];
$response["cols"] = array(array('type' => 'string', 'label' => 'Q'));
$result = mysql_query("SELECT `Q1a`, `Q1b`, `Q2a`, `Q2b`, `Q3a`, `Q3b`, `Q4a`, `Q4b`, `Q5a`, `Q5b`, `Q6a`, `Q6b`, `Q7a`, `Q7b`, `Q8a`, `Q8b`, `Q9a`, `Q9b` FROM goaltest WHERE id='$user'") or die(mysql_error());
if (mysql_num_rows($result) > 0) {
$response["rows"] = array();
$table = array();
// set up rows
$rows = array (
array('c' => array(array('v' => 'Q1a'))),
array('c' => array(array('v' => 'Q1b'))),
array('c' => array(array('v' => 'Q2a'))),
array('c' => array(array('v' => 'Q2b'))),
array('c' => array(array('v' => 'Q3a'))),
array('c' => array(array('v' => 'Q3b'))),
array('c' => array(array('v' => 'Q4a'))),
array('c' => array(array('v' => 'Q4b'))),
array('c' => array(array('v' => 'Q5a'))),
array('c' => array(array('v' => 'Q5b'))),
array('c' => array(array('v' => 'Q6a'))),
array('c' => array(array('v' => 'Q6b'))),
array('c' => array(array('v' => 'Q7a'))),
array('c' => array(array('v' => 'Q7b'))),
array('c' => array(array('v' => 'Q8a'))),
array('c' => array(array('v' => 'Q8b'))),
array('c' => array(array('v' => 'Q9a'))),
array('c' => array(array('v' => 'Q9b')))
);
for ($i == 1; $row = mysql_fetch_array($result); $i++) {
// add a new series for this row
$response["cols"][] = array('type' => 'number', 'label' => "Series $i");
// fill in the data for each Q
$rows[0]['c'][] = array('v' => (int) $row['Q1a']);
$rows[1]['c'][] = array('v' => (int) $row['Q1b']);
$rows[2]['c'][] = array('v' => (int) $row['Q2a']);
$rows[3]['c'][] = array('v' => (int) $row['Q2b']);
$rows[4]['c'][] = array('v' => (int) $row['Q3a']);
$rows[5]['c'][] = array('v' => (int) $row['Q3b']);
$rows[6]['c'][] = array('v' => (int) $row['Q4a']);
$rows[7]['c'][] = array('v' => (int) $row['Q4b']);
$rows[8]['c'][] = array('v' => (int) $row['Q5a']);
$rows[9]['c'][] = array('v' => (int) $row['Q5b']);
$rows[10]['c'][] = array('v' => (int) $row['Q6a']);
$rows[11]['c'][] = array('v' => (int) $row['Q6b']);
$rows[12]['c'][] = array('v' => (int) $row['Q7a']);
$rows[13]['c'][] = array('v' => (int) $row['Q7b']);
$rows[14]['c'][] = array('v' => (int) $row['Q8a']);
$rows[15]['c'][] = array('v' => (int) $row['Q8b']);
$rows[16]['c'][] = array('v' => (int) $row['Q9a']);
$rows[17]['c'][] = array('v' => (int) $row['Q9b']);
array_push($response["rows"], array('c' => $rows));
}
}
echo json_encode($response);
?>
<!--Load the AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var response = '<?php echo json_encode($response); ?>'; //alert(' hi ' + response);
var obj = eval ("(" + response + ")");
var options = {
cht: 'rs',
chxt :'x,y',
chxl: 't:Q1a|Q1b|Q2a|Q2b|Q3a|Q3b|Q4a|Q4b|Q5a|Q5b|Q6a|Q6b|Q7a|Q7b|Q8a|Q8b|Q9a|Q9b'
};
// create a grid for the chart
//options.chg = '25.0,25.0,4.0,4.0';
var dataTable = new google.visualization.DataTable(response);
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 600px;"></div>
</body>
</html>
Here is javascript after changing my php code
<html>
<head>
<title></title>
</head>
{"cols":[{"type":"string","label":"Q"},{"type":"number","label":"Series "},{"type":"number","label":"Series 1"},{"type":"number","label":"Series 2"},{"type":"number","label":"Series 3"}],"rows":[{"c":[{"c":[{"v":"Q1a"},{"v":12}]},{"c":[{"v":"Q1b"},{"v":34}]},{"c":[{"v":"Q2a"},{"v":132}]},{"c":[{"v":"Q2b"},{"v":3}]},{"c":[{"v":"Q3a"},{"v":23}]},{"c":[{"v":"Q3b"},{"v":23}]},{"c":[{"v":"Q4a"},{"v":13}]},{"c":[{"v":"Q4b"},{"v":13}]},{"c":[{"v":"Q5a"},{"v":13}]},{"c":[{"v":"Q5b"},{"v":13}]},{"c":[{"v":"Q6a"},{"v":14}]},{"c":[{"v":"Q6b"},{"v":14}]},{"c":[{"v":"Q7a"},{"v":13}]},{"c":[{"v":"Q7b"},{"v":21}]},{"c":[{"v":"Q8a"},{"v":12}]},{"c":[{"v":"Q8b"},{"v":12}]},{"c":[{"v":"Q9a"},{"v":12}]},{"c":[{"v":"Q9b"},{"v":23}]}]},{"c":[{"c":[{"v":"Q1a"},{"v":12},{"v":10}]},{"c":[{"v":"Q1b"},{"v":34},{"v":52}]},{"c":[{"v":"Q2a"},{"v":132},{"v":16}]},{"c":[{"v":"Q2b"},{"v":3},{"v":61}]},{"c":[{"v":"Q3a"},{"v":23},{"v":9}]},{"c":[{"v":"Q3b"},{"v":23},{"v":31}]},{"c":[{"v":"Q4a"},{"v":13},{"v":20}]},{"c":[{"v":"Q4b"},{"v":13},{"v":48}]},{"c":[{"v":"Q5a"},{"v":13},{"v":18}]},{"c":[{"v":"Q5b"},{"v":13},{"v":64}]},{"c":[{"v":"Q6a"},{"v":14},{"v":38}]},{"c":[{"v":"Q6b"},{"v":14},{"v":64}]},{"c":[{"v":"Q7a"},{"v":13},{"v":19}]},{"c":[{"v":"Q7b"},{"v":21},{"v":56}]},{"c":[{"v":"Q8a"},{"v":12},{"v":35}]},{"c":[{"v":"Q8b"},{"v":12},{"v":57}]},{"c":[{"v":"Q9a"},{"v":12},{"v":37}]},{"c":[{"v":"Q9b"},{"v":23},{"v":55}]}]},{"c":[{"c":[{"v":"Q1a"},{"v":12},{"v":10},{"v":43}]},{"c":[{"v":"Q1b"},{"v":34},{"v":52},{"v":26}]},{"c":[{"v":"Q2a"},{"v":132},{"v":16},{"v":28}]},{"c":[{"v":"Q2b"},{"v":3},{"v":61},{"v":63}]},{"c":[{"v":"Q3a"},{"v":23},{"v":9},{"v":36}]},{"c":[{"v":"Q3b"},{"v":23},{"v":31},{"v":59}]},{"c":[{"v":"Q4a"},{"v":13},{"v":20},{"v":33}]},{"c":[{"v":"Q4b"},{"v":13},{"v":48},{"v":69}]},{"c":[{"v":"Q5a"},{"v":13},{"v":18},{"v":33}]},{"c":[{"v":"Q5b"},{"v":13},{"v":64},{"v":64}]},{"c":[{"v":"Q6a"},{"v":14},{"v":38},{"v":30}]},{"c":[{"v":"Q6b"},{"v":14},{"v":64},{"v":67}]},{"c":[{"v":"Q7a"},{"v":13},{"v":19},{"v":40}]},{"c":[{"v":"Q7b"},{"v":21},{"v":56},{"v":68}]},{"c":[{"v":"Q8a"},{"v":12},{"v":35},{"v":36}]},{"c":[{"v":"Q8b"},{"v":12},{"v":57},{"v":40}]},{"c":[{"v":"Q9a"},{"v":12},{"v":37},{"v":39}]},{"c":[{"v":"Q9b"},{"v":23},{"v":55},{"v":68}]}]},{"c":[{"c":[{"v":"Q1a"},{"v":12},{"v":10},{"v":43},{"v":44}]},{"c":[{"v":"Q1b"},{"v":34},{"v":52},{"v":26},{"v":76}]},{"c":[{"v":"Q2a"},{"v":132},{"v":16},{"v":28},{"v":73}]},{"c":[{"v":"Q2b"},{"v":3},{"v":61},{"v":63},{"v":83}]},{"c":[{"v":"Q3a"},{"v":23},{"v":9},{"v":36},{"v":71}]},{"c":[{"v":"Q3b"},{"v":23},{"v":31},{"v":59},{"v":69}]},{"c":[{"v":"Q4a"},{"v":13},{"v":20},{"v":33},{"v":53}]},{"c":[{"v":"Q4b"},{"v":13},{"v":48},{"v":69},{"v":80}]},{"c":[{"v":"Q5a"},{"v":13},{"v":18},{"v":33},{"v":39}]},{"c":[{"v":"Q5b"},{"v":13},{"v":64},{"v":64},{"v":70}]},{"c":[{"v":"Q6a"},{"v":14},{"v":38},{"v":30},{"v":63}]},{"c":[{"v":"Q6b"},{"v":14},{"v":64},{"v":67},{"v":82}]},{"c":[{"v":"Q7a"},{"v":13},{"v":19},{"v":40},{"v":33}]},{"c":[{"v":"Q7b"},{"v":21},{"v":56},{"v":68},{"v":80}]},{"c":[{"v":"Q8a"},{"v":12},{"v":35},{"v":36},{"v":33}]},{"c":[{"v":"Q8b"},{"v":12},{"v":57},{"v":40},{"v":76}]},{"c":[{"v":"Q9a"},{"v":12},{"v":37},{"v":39},{"v":36}]},{"c":[{"v":"Q9b"},{"v":23},{"v":55},{"v":68},{"v":75}]}]}]}
<!--Load the AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var response = '{"cols":[{"type":"string","label":"Q"},{"type":"number","label":"Series "},{"type":"number","label":"Series 1"},{"type":"number","label":"Series 2"},{"type":"number","label":"Series 3"}],"rows":[{"c":[{"c":[{"v":"Q1a"},{"v":12}]},{"c":[{"v":"Q1b"},{"v":34}]},{"c":[{"v":"Q2a"},{"v":132}]},{"c":[{"v":"Q2b"},{"v":3}]},{"c":[{"v":"Q3a"},{"v":23}]},{"c":[{"v":"Q3b"},{"v":23}]},{"c":[{"v":"Q4a"},{"v":13}]},{"c":[{"v":"Q4b"},{"v":13}]},{"c":[{"v":"Q5a"},{"v":13}]},{"c":[{"v":"Q5b"},{"v":13}]},{"c":[{"v":"Q6a"},{"v":14}]},{"c":[{"v":"Q6b"},{"v":14}]},{"c":[{"v":"Q7a"},{"v":13}]},{"c":[{"v":"Q7b"},{"v":21}]},{"c":[{"v":"Q8a"},{"v":12}]},{"c":[{"v":"Q8b"},{"v":12}]},{"c":[{"v":"Q9a"},{"v":12}]},{"c":[{"v":"Q9b"},{"v":23}]}]},{"c":[{"c":[{"v":"Q1a"},{"v":12},{"v":10}]},{"c":[{"v":"Q1b"},{"v":34},{"v":52}]},{"c":[{"v":"Q2a"},{"v":132},{"v":16}]},{"c":[{"v":"Q2b"},{"v":3},{"v":61}]},{"c":[{"v":"Q3a"},{"v":23},{"v":9}]},{"c":[{"v":"Q3b"},{"v":23},{"v":31}]},{"c":[{"v":"Q4a"},{"v":13},{"v":20}]},{"c":[{"v":"Q4b"},{"v":13},{"v":48}]},{"c":[{"v":"Q5a"},{"v":13},{"v":18}]},{"c":[{"v":"Q5b"},{"v":13},{"v":64}]},{"c":[{"v":"Q6a"},{"v":14},{"v":38}]},{"c":[{"v":"Q6b"},{"v":14},{"v":64}]},{"c":[{"v":"Q7a"},{"v":13},{"v":19}]},{"c":[{"v":"Q7b"},{"v":21},{"v":56}]},{"c":[{"v":"Q8a"},{"v":12},{"v":35}]},{"c":[{"v":"Q8b"},{"v":12},{"v":57}]},{"c":[{"v":"Q9a"},{"v":12},{"v":37}]},{"c":[{"v":"Q9b"},{"v":23},{"v":55}]}]},{"c":[{"c":[{"v":"Q1a"},{"v":12},{"v":10},{"v":43}]},{"c":[{"v":"Q1b"},{"v":34},{"v":52},{"v":26}]},{"c":[{"v":"Q2a"},{"v":132},{"v":16},{"v":28}]},{"c":[{"v":"Q2b"},{"v":3},{"v":61},{"v":63}]},{"c":[{"v":"Q3a"},{"v":23},{"v":9},{"v":36}]},{"c":[{"v":"Q3b"},{"v":23},{"v":31},{"v":59}]},{"c":[{"v":"Q4a"},{"v":13},{"v":20},{"v":33}]},{"c":[{"v":"Q4b"},{"v":13},{"v":48},{"v":69}]},{"c":[{"v":"Q5a"},{"v":13},{"v":18},{"v":33}]},{"c":[{"v":"Q5b"},{"v":13},{"v":64},{"v":64}]},{"c":[{"v":"Q6a"},{"v":14},{"v":38},{"v":30}]},{"c":[{"v":"Q6b"},{"v":14},{"v":64},{"v":67}]},{"c":[{"v":"Q7a"},{"v":13},{"v":19},{"v":40}]},{"c":[{"v":"Q7b"},{"v":21},{"v":56},{"v":68}]},{"c":[{"v":"Q8a"},{"v":12},{"v":35},{"v":36}]},{"c":[{"v":"Q8b"},{"v":12},{"v":57},{"v":40}]},{"c":[{"v":"Q9a"},{"v":12},{"v":37},{"v":39}]},{"c":[{"v":"Q9b"},{"v":23},{"v":55},{"v":68}]}]},{"c":[{"c":[{"v":"Q1a"},{"v":12},{"v":10},{"v":43},{"v":44}]},{"c":[{"v":"Q1b"},{"v":34},{"v":52},{"v":26},{"v":76}]},{"c":[{"v":"Q2a"},{"v":132},{"v":16},{"v":28},{"v":73}]},{"c":[{"v":"Q2b"},{"v":3},{"v":61},{"v":63},{"v":83}]},{"c":[{"v":"Q3a"},{"v":23},{"v":9},{"v":36},{"v":71}]},{"c":[{"v":"Q3b"},{"v":23},{"v":31},{"v":59},{"v":69}]},{"c":[{"v":"Q4a"},{"v":13},{"v":20},{"v":33},{"v":53}]},{"c":[{"v":"Q4b"},{"v":13},{"v":48},{"v":69},{"v":80}]},{"c":[{"v":"Q5a"},{"v":13},{"v":18},{"v":33},{"v":39}]},{"c":[{"v":"Q5b"},{"v":13},{"v":64},{"v":64},{"v":70}]},{"c":[{"v":"Q6a"},{"v":14},{"v":38},{"v":30},{"v":63}]},{"c":[{"v":"Q6b"},{"v":14},{"v":64},{"v":67},{"v":82}]},{"c":[{"v":"Q7a"},{"v":13},{"v":19},{"v":40},{"v":33}]},{"c":[{"v":"Q7b"},{"v":21},{"v":56},{"v":68},{"v":80}]},{"c":[{"v":"Q8a"},{"v":12},{"v":35},{"v":36},{"v":33}]},{"c":[{"v":"Q8b"},{"v":12},{"v":57},{"v":40},{"v":76}]},{"c":[{"v":"Q9a"},{"v":12},{"v":37},{"v":39},{"v":36}]},{"c":[{"v":"Q9b"},{"v":23},{"v":55},{"v":68},{"v":75}]}]}]}'; //alert(' hi ' + response);
var obj = eval ("(" + response + ")");
var options = {
cht: 'rs',
chxt :'x,y',
chxl: 't:Q1a|Q1b|Q2a|Q2b|Q3a|Q3b|Q4a|Q4b|Q5a|Q5b|Q6a|Q6b|Q7a|Q7b|Q8a|Q8b|Q9a|Q9b'
};
// create a grid for the chart
//options.chg = '25.0,25.0,4.0,4.0';
var dataTable = new google.visualization.DataTable(response);
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 600px;"></div>
</body>
</html>