php - How to use javascript array elements in google.visualization graphs -
i have following bit of code draws graphs, in loop, using google.visualisation based on values sql table store in 3 arrays(i.e. $totalview, $totalfemaleview , $totalmaleview) in php portion. use json_encode(referred this link) can use these arrays in javascript. unable access array elements draw graphs. have tried displaying values of arrays , correct.
<?php $servername = "localhost"; $username = "root"; $password = "root123"; $dbname = "test"; $adname=[]; $totalview=[]; $totalmaleview=[]; $totalfemaleview=[]; $rowcount=0; // create connection $con = mysqli_connect($servername, $username, $password, $dbname); // check connection if ($con->connect_error) { die("connection failed: " . $con->connect_error); } $result=mysqli_query($con,"select `ad name`,`total view count`, `total female viewers`, `total male viewers` `addata` `disp id`=1"); $rowcount=mysqli_num_rows($result); if(!$result) { die('could not data: ' . mysql_error()); } // output data of each row for($x = 0; $x < $rowcount; $x++) { $row = $result->fetch_assoc(); $totalview[$x]=$row["total view count"]; $totalfemaleview[$x]=$row["total female viewers"]; $totalmaleview[$x]=$row["total male viewers"]; $adname[$x]=$row["ad name"]; } $con->close(); ?> <html> <body> <script src="https://www.gstatic.com/charts/loader.js"></script> <ul id="stats"></ul> <script type="text/javascript"> var array1 = <?php echo json_encode($totalview);?>; var array2 = <?php echo json_encode($totalfemaleview);?>; var array3 = <?php echo json_encode($totalmaleview);?>; var array4 = <?php echo json_encode($adname);?>; google.charts.load('current', { callback: function () { ( y = 0; y < <?php echo $rowcount ?>; y++) { var data = new google.visualization.datatable(); data.addcolumn('string', 'list'); data.addcolumn('number', 'viewers'); data.addrows([ ['totalviewers',array1[y]], ['female viewers', array2[y]], ['male viewers', array3[y]] ]); var options = {title:array4[y],width:400,height:300}; var container = document.getelementbyid('stats').appendchild(document.createelement('div')); var chart = new google.visualization.columnchart(container); chart.draw(data, options); } }, packages: ['corechart'] }); </script> </body> </html> can point me towards right direction?
based on information in comments , updated php code, seems data returned database queries has numbers in form of strings. before using eval() or javascript number object, if looked in browser console might have seen errors this:
uncaught error: type mismatch. value 12 not match type number in column index 1
there multiple options resolve (without using eval()):
type cast values integer or float when adding output arrays in php
$totalview[$x] = (float)$row["total view count"];use json_numeric_check flag json_encode (see this answer more info).
var array1 = <?php echo json_encode($totalview, json_numeric_check );?>;but beware there drawbacks using constant (see this article example).
see this updated phpfiddle. can see, created class simulate database query (since don't have database connection in sandbox) allows have same array creation.
please run fiddle, , inspect output in browser console. notice how results of json_encode() produce valid arrays in javascript, like:
var array1 = [12,10,6]; var array2 = [8,4,1]; var array3 = [4,6,5]; var array4 = ["audi","bmw","suzuki"]; interestingly, unordered list tag (i.e. <ul id="stats">), considered flow content, added head tag in sample code. head tag allows meta-data content. move unordered list tag body tag.
see output demonstrated in snippet below.
var array1 = [22, 16, 35, 11]; var array2 = [10, 3, 4, 9]; var array3 = [12, 13, 31, 2]; google.charts.load('current', { callback: function() { (var y = 0; y < array1.length; y++) { var data = new google.visualization.datatable(); data.addcolumn('string', 'list'); data.addcolumn('number', 'viewers'); data.addrows([ ['totalviewers', array1[y]], ['female viewers', array2[y]], ['male viewers', array3[y]] ]); var options = { title: 'ad 1', width: 400, height: 300 }; var container = document.getelementbyid('stats').appendchild(document.createelement('div')); var chart = new google.visualization.columnchart(container); chart.draw(data, options); } }, packages: ['corechart'] });<script src="https://www.gstatic.com/charts/loader.js"></script> <ul id="stats"></ul>
Comments
Post a Comment