javascript - Parsing JSON array into Google Charts DataTable -

-

i've done quite bit of searching , have found solutions issues similar problem nothing has worked far. appreciated.

i attempting create google line chart data querying database , parsing json. query , json looks when insert datatable web page blank.

this json output have: 

[["date","percentage"],["0000-00-00 00:00:00",28.18],["2015-01-06 06:00:01",93.65],["2015-01-07 06:00:01",85.9],["2015-01-08 06:08:43",89.25],["2015-01-09 06:08:42",99.26],["2015-01-10 14:50:37",99.48],["2015-02-06 06:00:01",93.88],["2015-02-07 06:00:01",89.15],["2015-02-08 06:08:51",89.55],["2015-02-09 06:09:25",98.94],["2015-02-09 17:26:50",98.94],["2015-02-10 06:10:55",99.06],["2015-03-07 06:11:32",85.7],["2015-03-08 06:07:58",89.86],["2015-03-10 06:11:04",99.06],["2015-04-06 14:19:26",82.17],["2015-04-07 06:11:47",85.8],["2015-04-08 06:10:01",89.76],["2015-04-10 06:10:53",100],["2015-05-06 16:25:01",91.21],["2015-05-07 06:11:12",85.7],["2015-05-08 06:08:53",89.25],["2015-05-09 22:35:40",97.77],["2015-05-10 06:10:39",99.17],["2015-05-10 21:28:01",98.85],["2015-06-06 06:00:02",90.84],["2015-06-07 06:11:05",85.9],["2015-06-09 06:09:32",97.88],["2015-06-10 06:10:55",99.79],["2015-07-06 06:00:01",91.33],["2015-07-07 06:10:35",85.09],["2015-07-08 06:09:36",89.45],["2015-07-09 06:08:55",98.2],["2015-07-10 06:12:44",5.94],["2015-08-06 06:00:01",91.58],["2015-08-08 06:09:03",89.05],["2015-08-09 06:09:23",97.03],["2015-08-09 15:54:27",97.67],["2015-09-06 06:00:01",90.96],["2015-09-07 06:12:33",84.99],["2015-09-08 06:08:54",89.15],["2015-09-09 06:12:48",99.26],["2015-09-09 14:29:39",95.02],["2015-10-06 06:00:01",91.09],["2015-10-07 06:13:13",89.35],["2015-10-08 06:08:42",89.25],["2015-10-09 06:09:40",99.47],["2015-10-09 17:14:20",99.47],["2015-11-05 06:00:01",97.41],["2015-11-06 06:00:01",85.47],["2015-11-07 06:12:17",89.45],["2015-11-08 06:10:45",89.45],["2015-12-05 06:00:01",96.7],["2015-12-06 06:00:01",90.72],["2015-12-07 06:12:22",88.74],["2015-12-09 06:09:39",99.58]]

when insert json validator @ https://jsonformatter.curiousconcept.com says valid json , when hard code in seems work..

here code:

  <?php     $dbhost="localhost";     $dblogin="root";     $dbpwd="password!";     $dbname="qadb";      $db =  mysql_connect($dbhost,$dblogin,$dbpwd);     mysql_select_db($dbname);           $sqlstring = "select date, percentage reports rtype_id=1";             $result = mysql_query($sqlstring);         $num = mysql_num_rows($result);     # set heading        $data[0] = array('date','percentage');           ($i=1; $i<($num+1); $i++)     {         $data[$i] = array(substr(mysql_result($result, $i-1, "date"), 0, 20),             (float) mysql_result($result, $i-1, "percentage"));     }        echo json_encode($data);     mysql_close($db); ?>

here page create google line chart.

 <html>     <head>         <title>json chart test</title>         <!-- load jquery -->         <script language="javascript" type="text/javascript"          src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">     </script>     <!-- load google jsapi -->     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">         google.load("visualization", "1", { packages: ["corechart"] });         google.setonloadcallback(drawchart);      function drawchart() {      // var newwin = window.open();         var jsondata = $.ajax({             url: "legacydashboardjson.php",             datatype: "json",             async: false         }).responsetext;   //var newstr = jsondata.substring(1, jsondata .length-1);  //newwin.document.write(jsondata); // var parseddata = json.parse(newstr);  //var obj = json.stringify(newstr);   var data = google.visualization.datatable(jsondata);  var options = {     title: 'stats' };  var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); }  </script> </head> <body>     <div id="chart_div">      </div> </body> </html>

thanks!

update found solution.

here's code:

<?php    $db_name = 'qadb';   $db_host = 'localhost';   $db_user = 'root'; $db_pass = '!';        $mysqli = new mysqli($db_host, $db_user, $db_pass, $db_name);    if (mysqli_connect_errno()) {     printf("connect failed: %s\n", mysqli_connect_error());     exit();   }     $result = $mysqli->query('select date,percentage reports');      $rows = array();   $table = array();   $table['cols'] = array(       array('label' => 'date', 'type' => 'string'),     array('label' => 'percentage', 'type' => 'number')  );     foreach($result $r) {        $temp = array();         $temp[] = array('v' => (string) $r['date']);          $temp[] = array('v' => (int) $r['percentage']);        $rows[] = array('c' => $temp);     }  $table['rows'] = $rows;  $jsontable = json_encode($table); echo $jsontable;  mysql_close($mysqli); ?>  <html>   <head>     <!--load ajax api-->     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>     <script type="text/javascript">      // load visualization api , piechart package.     google.load('visualization', '1', {'packages':['corechart']});      // set callback run when google visualization api loaded.     google.setonloadcallback(drawchart);     function drawchart() {          var jsondata = $.ajax({             url: "legacydashboardjson.php",             datatype: "json",             async: false         }).responsetext;        // create our data table out of json data loaded server.       var data = new google.visualization.datatable(jsondata);       var options = {            title: 'metrics',           width: 800,           height: 600         };        // instantiate , draw our chart, passing in options.       // not forget check div id       var chart = new google.visualization.linechart(document.getelementbyid('chart_div'));       chart.draw(data, options);     }     </script>   </head>    <body>     <!--this div hold pie chart-->     <div id="chart_div"></div>   </body> </html>

Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more