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
Post a Comment