javascript - Unable to plot line chart using JSON array -


i have json array containing "etime" in hh:mm:ss format , "datar" in decimal format. want plot simple line chart. but, there colons (i.e. :) in json data call json.parse() won't work. want pass json array php javascript variables.

<?php $url ="../getshiftdata"; $clientid ="12021993"; $shiftid = "2"; $machineid = "2222"; $edate = "2017-04-05"; $ch = curl_init( $url ); # setup request send json via post. $payload = json_encode( array( "clientid"=> $clientid, "shiftid" =>  $shiftid, "machineid" => $machineid, "edate" => $edate) ); //echo $payload; curl_setopt( $ch, curlopt_postfields, $payload ); curl_setopt( $ch, curlopt_httpheader, array('content-type:application/json')); # return response instead of printing. curl_setopt( $ch, curlopt_returntransfer, true ); # send request. $result = curl_exec($ch); curl_close($ch); # print response. $strarr = json_decode($result,true); $len = count($strarr); $shiftdata = array();  $xarr = array(); $yarr = array(); ($i=0; $i <$len ; $i++) {    $xarr[$i]=$strarr[$i]["etime"];   $yarr[$i]=$strarr[$i]["datar"]; }  $xarr = implode(",",$xarr); $yarr = implode(",",$yarr);   ?> <html> <head>   <!-- plotly.js -->   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <!-- plotly chart drawn inside div --> <div id="graphdiv"></div>   <script>   var xarr = "<?php echo $xarr; ?>";   var yarr = "<?php echo $yarr; ?>";   var jay = xarr.replace(/:/g, '\\\\:');   console.log(jay);   var x1 = json.parse("[" + jay + "]");   var y1 = json.parse("[" + yarr + "]");   var trace1 = {   x: x1,   y: y1,   type: 'scatter',   mode: 'lines', };  var data = [trace1];  var layout = {   title: 'sales growth',   xaxis: {     title: 'year',     showgrid: false,     zeroline: false   },   yaxis: {     title: 'percent',     showline: false   } };  plotly.newplot(graphdiv, data, layout);  // deprecated: calling plot again add new trace(s) plot, // ignore new layout.   </script> </body> </html> 

$xarr looks like:

["20:23:00","20:23:01","20:23:02"] 

$yarr looks like:

["0.123456","0.342323","0.532423"] 

use php's json_encode() function echo arrays json. there no need parse them in javascript code.

<script>     var xarr = <?php echo json_encode($xarr); ?>;     var yarr = <?php echo json_encode($yarr); ?>;     var trace1 = {       x: xarr,       y: yarr,       type: 'scatter',       mode: 'lines',     }; 

see demonstration of in this phpfiddle.

html/js output:

  var xarr = ["20:23:00","20:23:01","20:23:02"];    var yarr = ["0.123456","0.342323","0.532423"];    var trace1 = {    x: xarr,    y: yarr,    type: 'scatter',    mode: 'lines',  };    var data = [trace1];    var layout = {    title: 'sales growth',    xaxis: {      title: 'year',      showgrid: false,      zeroline: false    },    yaxis: {      title: 'percent',      showline: false    }  };    plotly.newplot(graphdiv, data, layout);    // deprecated: calling plot again add new trace(s) plot,  // ignore new layout.    
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  <!-- plotly chart drawn inside div -->  <div id="graphdiv"></div>


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -