i'm relatively new website , seeking current project i'm doing show 2 line graphs appear on y-axis constant x-axis. code looks php:
<?php header('content-type: application/json'); $lala = 'gender_male'; $lele = 'gender_female'; $con = mysqli_connect("127.0.0.1","root","imnoob","csv_db"); // check connection if (mysqli_connect_errno($con)) { echo "failed connect database: " . mysqli_connect_error(); }else { $data_points = array(); $data_points1 = array(); $result = mysqli_query($con, "select * centurysq2012"); while($row = mysqli_fetch_array($result)) { $point = array("x" => $row['weekid'] , "y" => $row[$lala]); $point1 = array("x" => $row['weekid'], "y" => $row[$lele]); array_push($data_points, $point); array_push($data_points1, $point1); } echo json_encode($data_points, json_numeric_check); echo json_encode($data_points1, json_numeric_check); } mysqli_close($con); ?> which put html file codes this:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script src="jquery.js"></script> <script src="canvasjs.js"></script> <script type="text/javascript"> $(document).onload(function () { $.getjson("doubleline.php", function (point, point1) { var chart = new canvasjs.chart("chartcontainer", { theme: "theme2", title: { text: "footfall gender" }, animationenabled: true, axisx: { valueformatstring: "" //intervaltype: "month" }, tooltip: { shared: true }, axisy: { gridcolor: "silver", tickcolor: "silver" }, data: [ { type: "line", showinlegend: true, linethickness: 2, name: "male", markertype: "square", color: "#f08080", datapoints: point }, { type: "line", showinlegend: true, name: "female", color: "#20b2aa", linethickness: 2, datapoints: point1 }], legend: { cursor: "pointer", itemclick: function (e) { if (typeof (e.dataseries.visible) === "undefined" || e.dataseries.visible) { e.dataseries.visible = false; } else { e.dataseries.visible = true; } chart.render(); } } }); chart.render(); }); }); </script> </head> <body> <div id="chartcontainer" style="width:400px; height:100%;"></div> </body> </html> sorry codes being messy or question being lousy 1 i'm still student. thank in advance!
$.getjson method return php output result variable, can't assign point1, point2. php coding, need below amendments:
$result = array($data_points,$data_points1); echo json_encode($result, json_numeric_check);
instead of echo json_encode($data_points, json_numeric_check); echo json_encode($data_points1, json_numeric_check);
in order show 2 lines need make 2 sets of data inside data-> eg: data:[{set1}, {set2}], may refer html codes below, show 2 lines on chart:
<!doctype html> <html> <head> <script type="text/javascript"> window.onload = function () { var chart = new canvasjs.chart("chartcontainer", { title:{ text: "earthquakes - per month" }, axisx: { valueformatstring: "mmm", interval:1, intervaltype: "month" }, axisy:{ includezero: false }, data: [ { type: "line", datapoints: [ { x: new date(2012, 00, 1), y: 450 }, { x: new date(2012, 01, 1), y: 414}, { x: new date(2012, 02, 1), y: 520, indexlabel: "highest",markercolor: "red", markertype: "triangle"}, { x: new date(2012, 03, 1), y: 460 }, { x: new date(2012, 04, 1), y: 450 }, { x: new date(2012, 05, 1), y: 500 }, { x: new date(2012, 06, 1), y: 480 }, { x: new date(2012, 07, 1), y: 480 }, { x: new date(2012, 08, 1), y: 410 , indexlabel: "lowest",markercolor: "darkslategrey", markertype: "cross"}, { x: new date(2012, 09, 1), y: 500 }, { x: new date(2012, 10, 1), y: 480 }, { x: new date(2012, 11, 1), y: 510 } ] }, { type: "line", datapoints: [ { x: new date(2012, 00, 1), y: 420 }, { x: new date(2012, 01, 1), y: 404}, { x: new date(2012, 02, 1), y: 520, indexlabel: "highest",markercolor: "red", markertype: "triangle"}, { x: new date(2012, 03, 1), y: 400 }, { x: new date(2012, 04, 1), y: 400 }, { x: new date(2012, 05, 1), y: 500 }, { x: new date(2012, 06, 1), y: 450 }, { x: new date(2012, 07, 1), y: 490 }, { x: new date(2012, 08, 1), y: 415 , indexlabel: "lowest",markercolor: "darkslategrey", markertype: "cross"}, { x: new date(2012, 09, 1), y: 490 }, { x: new date(2012, 10, 1), y: 480 }, { x: new date(2012, 11, 1), y: 510 } ] } ] }); chart.render(); } </script> <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script></head> <body> <div id="chartcontainer" style="height: 300px; width: 100%;"> </div> </body> </html>your chart this: 2 lines chart
for case, maybe this:
$(document).onload(function () { $.getjson("doubleline.php", function (result) { var point1 = result[0]; var point2 = result[1]; var chart = new canvasjs.chart("chartcontainer", { theme: "theme2", title: { text: "footfall gender" }, animationenabled: true, axisx: { valueformatstring: "" //intervaltype: "month" }, tooltip: { shared: true }, axisy: { gridcolor: "silver", tickcolor: "silver" }, data: [ { type: "line", showinlegend: true, linethickness: 2, name: "male", markertype: "square", color: "#f08080", datapoints: point }, { type: "line", showinlegend: true, name: "female", color: "#20b2aa", linethickness: 2, datapoints: point1 }], legend: { cursor: "pointer", itemclick: function (e) { if (typeof (e.dataseries.visible) === "undefined" || e.dataseries.visible) { e.dataseries.visible = false; } else { e.dataseries.visible = true; } chart.render(); } } }); chart.render(); }); });
Comments
Post a Comment