Having trouble JSON encoded data from MySQL through Highcharts
Question
I have been trying to parse my data from my php file to reflect the data in the array using this area graph example found here . Before, I had all the data commented out to going to the array, but now I am just trying to display one part of data. I don't know if it has to do with the data being parsed or I am not calling the data correctly into the HTML file. The variable 'js_array' was not there before, but I thought it could be a solution to my problem, but unfortunately it still comes out with a blank page.
PHP code:
<?php
// A simple PHP script demonstrating how to connect to MySQL.
// Press the 'Run' button on the top to start the web server,
// then click the URL that is emitted to the Output tab of the console.
$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "reports2";
$dbport = 3306;
// Create connection
$db = new mysqli($servername, $username, $password, $database, $dbport);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
echo "Connected successfully (".$db->host_info.")";
$query = "SELECT wTCP_UP1
FROM 1_sp12_la UNION ALL SELECT wTCP_UP1 FROM 1_sp12_rs UNION SELECT wTCP_UP1 FROM 1_sp12_sf";
//1_sp12_la._Provider, 1_sp12_la.NORMALIZED_LAT, 1_sp12_la.NORMALIZED_LONG, 1_sp12_la.wTCP_UP1, 1_sp12_la._wTCP_DOWN2
// 1_sp12_rs._Provider, 1_sp12_rs.NORMALIZED_LONG, 1_sp12_rs.NORMALIZED_LAT, 1_sp12_rs.wTCP_UP1, 1_sp12_rs._wTCP_DOWN2
$result = mysqli_query($db, $query);
$data = array();
//$stmt->execute();
while ($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
// echo " ID: " . $row["att_fall2012_id"] . ", Normalized Latitude: " . $row["NORMALIZED_LAT"] .
//", Location ID: " . $row["_Location_ID"] . ", Provider: " . $row["_Provider"] . ", TCP Upload Speed:"
//. $row["wTCP_UP1"] . ", TCP Download Speed:" . $row["_wTCP_DOWN1"] .nl2br ("\n") ;
//echo nl2br("\n");
}
echo json_encode($data, JSON_NUMERIC_CHECK);
//$json_data = json_encode($data);
//file_put_contents('CityData/attfall2012.json', $json_data);
?>
and here my HTML file where the graph is supposed to be.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Area Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
<script type = "text/javascript">
js_array = new Array( <?php echo implode(',' , $data); ?>);
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b> <br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
data: js_array
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I have searched all over the place, but nothing. I am also not the greatest with javascript and very new to Highcharts. Thanks! Please let me know if you need more info.
Edit: Here is the JSON output:
[{"wTCP_UP1":6163},{"wTCP_UP1":13622},{"wTCP_UP1":456.1},{"wTCP_UP1":2142.3},{"wTCP_UP1":6317},{"wTCP_UP1":1710},{"wTCP_UP1":7966},{"wTCP_UP1":2680},{"wTCP_UP1":1157},{"wTCP_UP1":1202},{"wTCP_UP1":690},{"wTCP_UP1":3330},{"wTCP_UP1":1215},{"wTCP_UP1":2872},{"wTCP_UP1":1192},{"wTCP_UP1":474.1},{"wTCP_UP1":2855},{"wTCP_UP1":1185},{"wTCP_UP1":1184},{"wTCP_UP1":1214},{"wTCP_UP1":727},{"wTCP_UP1":1902.5},{"wTCP_UP1":1190},{"wTCP_UP1":1639.5},{"wTCP_UP1":1286},{"wTCP_UP1":1182},{"wTCP_UP1":800},{"wTCP_UP1":1191},{"wTCP_UP1":290.1},{"wTCP_UP1":1155},{"wTCP_UP1":1209},{"wTCP_UP1":857},{"wTCP_UP1":376.4},{"wTCP_UP1":1033},{"wTCP_UP1":589},{"wTCP_UP1":394},{"wTCP_UP1":1441},{"wTCP_UP1":1723},{"wTCP_UP1":1204},{"wTCP_UP1":1212},{"wTCP_UP1":1659},{"wTCP_UP1":731},{"wTCP_UP1":568},{"wTCP_UP1":1163},{"wTCP_UP1":588},{"wTCP_UP1":0},{"wTCP_UP1":1469},{"wTCP_UP1":807.9},{"wTCP_UP1":1222},{"wTCP_UP1":773},{"wTCP_UP1":1181},{"wTCP_UP1":1169},{"wTCP_UP1":1106},{"wTCP_UP1":553},{"wTCP_UP1":392.7},{"wTCP_UP1":1022},{"wTCP_UP1":792},{"wTCP_UP1":1036},{"wTCP_UP1":1250},{"wTCP_UP1":711.7},{"wTCP_UP1":1162},{"wTCP_UP1":1074},{"wTCP_UP1":419},{"wTCP_UP1":806},{"wTCP_UP1":428},{"wTCP_UP1":957},{"wTCP_UP1":1150},{"wTCP_UP1":987},{"wTCP_UP1":846},{"wTCP_UP1":998},{"wTCP_UP1":705},{"wTCP_UP1":221.8},{"wTCP_UP1":1097},{"wTCP_UP1":344},{"wTCP_UP1":856},{"wTCP_UP1":383.1},{"wTCP_UP1":171.9},{"wTCP_UP1":446.9},{"wTCP_UP1":3147},{"wTCP_UP1":719},{"wTCP_UP1":1119},{"wTCP_UP1":441.5},{"wTCP_UP1":1740},{"wTCP_UP1":1027},{"wTCP_UP1":53.8},{"wTCP_UP1":1072},{"wTCP_UP1":1193},{"wTCP_UP1":1079},{"wTCP_UP1":1092},{"wTCP_UP1":155.8},{"wTCP_UP1":576},{"wTCP_UP1":1243},{"wTCP_UP1":335.6},{"wTCP_UP1":213},{"wTCP_UP1":180.3},{"wTCP_UP1":256.7},{"wTCP_UP1":1137},{"wTCP_UP1":465},{"wTCP_UP1":223.7},{"wTCP_UP1":1536},{"wTCP_UP1":701},{"wTCP_UP1":622},{"wTCP_UP1":815},{"wTCP_UP1":261},{"wTCP_UP1":31.2},{"wTCP_UP1":597},{"wTCP_UP1":301.4},{"wTCP_UP1":643},{"wTCP_UP1":1133},{"wTCP_UP1":462.2},{"wTCP_UP1":488.7},{"wTCP_UP1":438.7},{"wTCP_UP1":281},{"wTCP_UP1":432.9},{"wTCP_UP1":59.6},{"wTCP_UP1":191},{"wTCP_UP1":479},{"wTCP_UP1":85.8},{"wTCP_UP1":170.3},{"wTCP_UP1":380.7},{"wTCP_UP1":248.7},{"wTCP_UP1":251.3},{"wTCP_UP1":102.4},{"wTCP_UP1":276.8},{"wTCP_UP1":648},{"wTCP_UP1":661},{"wTCP_UP1":341.5},{"wTCP_UP1":240.7},{"wTCP_UP1":511},{"wTCP_UP1":148.1},{"wTCP_UP1":305.4},{"wTCP_UP1":86.4},{"wTCP_UP1":1564.5},{"wTCP_UP1":1276},{"wTCP_UP1":944.55},{"wTCP_UP1":1437.5},{"wTCP_UP1":1510.5},{"wTCP_UP1":1483},{"wTCP_UP1":1031.5},{"wTCP_UP1":1535},{"wTCP_UP1":1317.5},{"wTCP_UP1":1501},{"wTCP_UP1":1614},{"wTCP_UP1":1229},{"wTCP_UP1":1444},{"wTCP_UP1":1196},{"wTCP_UP1":1369.5},{"wTCP_UP1":1166},{"wTCP_UP1":100.7},{"wTCP_UP1":662.6},{"wTCP_UP1":945},{"wTCP_UP1":1135},{"wTCP_UP1":490.2},{"wTCP_UP1":961},{"wTCP_UP1":1042.5},{"wTCP_UP1":400.55},{"wTCP_UP1":935},{"wTCP_UP1":562.05},{"wTCP_UP1":966.5},{"wTCP_UP1":1132},{"wTCP_UP1":674.45},{"wTCP_UP1":755.5},{"wTCP_UP1":946},{"wTCP_UP1":821},{"wTCP_UP1":536.3},{"wTCP_UP1":512.5},{"wTCP_UP1":775.8},{"wTCP_UP1":1026},{"wTCP_UP1":937.5},{"wTCP_UP1":920},{"wTCP_UP1":1015},{"wTCP_UP1":1020},{"wTCP_UP1":433.2},{"wTCP_UP1":1021},{"wTCP_UP1":1211},{"wTCP_UP1":277.1},{"wTCP_UP1":439.85},{"wTCP_UP1":924},{"wTCP_UP1":629},{"wTCP_UP1":912},{"wTCP_UP1":514.35},{"wTCP_UP1":494.45},{"wTCP_UP1":688},{"wTCP_UP1":265.5},{"wTCP_UP1":910},{"wTCP_UP1":809},{"wTCP_UP1":749.35},{"wTCP_UP1":934},{"wTCP_UP1":906},{"wTCP_UP1":917},{"wTCP_UP1":1065},{"wTCP_UP1":762},{"wTCP_UP1":231.8},{"wTCP_UP1":860},{"wTCP_UP1":859},{"wTCP_UP1":997},{"wTCP_UP1":614},{"wTCP_UP1":779.5},{"wTCP_UP1":935.5},{"wTCP_UP1":876.8},{"wTCP_UP1":481.7},{"wTCP_UP1":355.2},{"wTCP_UP1":796},{"wTCP_UP1":343.7},{"wTCP_UP1":793},{"wTCP_UP1":903},{"wTCP_UP1":706},{"wTCP_UP1":854},{"wTCP_UP1":287.6},{"wTCP_UP1":652.7},{"wTCP_UP1":888},{"wTCP_UP1":362.9},{"wTCP_UP1":605},{"wTCP_UP1":874.5},{"wTCP_UP1":403.3},{"wTCP_UP1":868},{"wTCP_UP1":907},{"wTCP_UP1":689},{"wTCP_UP1":712.9},{"wTCP_UP1":428.7},{"wTCP_UP1":94.6},{"wTCP_UP1":676},{"wTCP_UP1":476.5},{"wTCP_UP1":280.15},{"wTCP_UP1":409.05},{"wTCP_UP1":745.5},{"wTCP_UP1":108},{"wTCP_UP1":609},{"wTCP_UP1":776.7},{"wTCP_UP1":941},{"wTCP_UP1":746},{"wTCP_UP1":224.4},{"wTCP_UP1":767},{"wTCP_UP1":582},{"wTCP_UP1":664},{"wTCP_UP1":633},{"wTCP_UP1":520.9},{"wTCP_UP1":715},{"wTCP_UP1":779},{"wTCP_UP1":507.8},{"wTCP_UP1":696},{"wTCP_UP1":255.3},{"wTCP_UP1":477},{"wTCP_UP1":675.5},{"wTCP_UP1":695},{"wTCP_UP1":755},{"wTCP_UP1":670.5},{"wTCP_UP1":512.55},{"wTCP_UP1":447.3},{"wTCP_UP1":551},{"wTCP_UP1":406.6},{"wTCP_UP1":643.7},{"wTCP_UP1":735.8},{"wTCP_UP1":188.9},{"wTCP_UP1":189.8},{"wTCP_UP1":199.7},{"wTCP_UP1":264.5},{"wTCP_UP1":221.1},{"wTCP_UP1":556.15},{"wTCP_UP1":491.1},{"wTCP_UP1":349.2},{"wTCP_UP1":448},{"wTCP_UP1":891},{"wTCP_UP1":224.8},{"wTCP_UP1":714},{"wTCP_UP1":850},{"wTCP_UP1":602},{"wTCP_UP1":206.9},{"wTCP_UP1":226.9},{"wTCP_UP1":424.1},{"wTCP_UP1":1005},{"wTCP_UP1":944},{"wTCP_UP1":247.7},{"wTCP_UP1":99.6},{"wTCP_UP1":93.5},{"wTCP_UP1":2266.5},{"wTCP_UP1":2348},{"wTCP_UP1":2849},{"wTCP_UP1":3093},{"wTCP_UP1":2816},{"wTCP_UP1":1156},{"wTCP_UP1":2015},{"wTCP_UP1":1351},{"wTCP_UP1":3193},{"wTCP_UP1":3066},{"wTCP_UP1":1297.5},{"wTCP_UP1":1417},{"wTCP_UP1":2940},{"wTCP_UP1":2674},{"wTCP_UP1":1542},{"wTCP_UP1":2166},{"wTCP_UP1":526.3},{"wTCP_UP1":3559},{"wTCP_UP1":2587},{"wTCP_UP1":994.5},{"wTCP_UP1":865},{"wTCP_UP1":1613},{"wTCP_UP1":1635.5},{"wTCP_UP1":1465},{"wTCP_UP1":1681},{"wTCP_UP1":2146},{"wTCP_UP1":2908},{"wTCP_UP1":604.35},{"wTCP_UP1":2404},{"wTCP_UP1":1751.5},{"wTCP_UP1":1407.5},{"wTCP_UP1":1008.45},{"wTCP_UP1":2148},{"wTCP_UP1":500.3},{"wTCP_UP1":918},{"wTCP_UP1":1738.5},{"wTCP_UP1":1116.95},{"wTCP_UP1":1608.5},{"wTCP_UP1":1153.5},{"wTCP_UP1":543.85},{"wTCP_UP1":369.6},{"wTCP_UP1":2102},{"wTCP_UP1":1520.5},{"wTCP_UP1":1149.5},{"wTCP_UP1":1797.5},{"wTCP_UP1":308.6},{"wTCP_UP1":1366},{"wTCP_UP1":168},{"wTCP_UP1":1647},{"wTCP_UP1":407.4},{"wTCP_UP1":1056},{"wTCP_UP1":779.6},{"wTCP_UP1":2571.5},{"wTCP_UP1":1568},{"wTCP_UP1":1385},{"wTCP_UP1":1645},{"wTCP_UP1":2710},{"wTCP_UP1":2556},{"wTCP_UP1":1034},{"wTCP_UP1":1571},{"wTCP_UP1":239.5},{"wTCP_UP1":1362},{"wTCP_UP1":2207},{"wTCP_UP1":816},{"wTCP_UP1":962},{"wTCP_UP1":1057},{"wTCP_UP1":869},{"wTCP_UP1":444.45},{"wTCP_UP1":579.85},{"wTCP_UP1":328.7},{"wTCP_UP1":1705},{"wTCP_UP1":2740},{"wTCP_UP1":537.2},{"wTCP_UP1":1085},{"wTCP_UP1":1796},{"wTCP_UP1":930},{"wTCP_UP1":702.25},{"wTCP_UP1":628},{"wTCP_UP1":447.45},{"wTCP_UP1":1182.4},{"wTCP_UP1":620.1},{"wTCP_UP1":99.45},{"wTCP_UP1":232.65},{"wTCP_UP1":77.1},{"wTCP_UP1":1091.75},{"wTCP_UP1":349.5},{"wTCP_UP1":545},{"wTCP_UP1":3373},{"wTCP_UP1":739.3},{"wTCP_UP1":2993},{"wTCP_UP1":1505},{"wTCP_UP1":879},{"wTCP_UP1":913},{"wTCP_UP1":490.3},{"wTCP_UP1":852.5},{"wTCP_UP1":621},{"wTCP_UP1":1059},{"wTCP_UP1":618},{"wTCP_UP1":499.2},{"wTCP_UP1":1274},{"wTCP_UP1":784.85},{"wTCP_UP1":597.8},{"wTCP_UP1":48.6},{"wTCP_UP1":831},{"wTCP_UP1":841.6},{"wTCP_UP1":686.8},{"wTCP_UP1":1262},{"wTCP_UP1":674.85},{"wTCP_UP1":663},{"wTCP_UP1":265.7},{"wTCP_UP1":87.8},{"wTCP_UP1":670},{"wTCP_UP1":581.9},{"wTCP_UP1":216.5},{"wTCP_UP1":435.9},{"wTCP_UP1":791},{"wTCP_UP1":468.7},{"wTCP_UP1":761},{"wTCP_UP1":1268},{"wTCP_UP1":828.1},{"wTCP_UP1":870},{"wTCP_UP1":452.8},{"wTCP_UP1":359},{"wTCP_UP1":515.8},{"wTCP_UP1":580},{"wTCP_UP1":377.2},{"wTCP_UP1":176.55},{"wTCP_UP1":386.4},{"wTCP_UP1":209.2},{"wTCP_UP1":127.7},{"wTCP_UP1":193.3},{"wTCP_UP1":197.6},{"wTCP_UP1":201.3},{"wTCP_UP1":202.8},{"wTCP_UP1":57.7},{"wTCP_UP1":89.6},{"wTCP_UP1":285.3},{"wTCP_UP1":46.4},{"wTCP_UP1":399.7},{"wTCP_UP1":294},{"wTCP_UP1":80.8},{"wTCP_UP1":47.3},{"wTCP_UP1":15399},{"wTCP_UP1":16822},{"wTCP_UP1":15586},{"wTCP_UP1":4160},{"wTCP_UP1":16331},{"wTCP_UP1":15302},{"wTCP_UP1":12720},{"wTCP_UP1":9028},{"wTCP_UP1":11518},{"wTCP_UP1":13374},{"wTCP_UP1":13731.5},{"wTCP_UP1":15747},{"wTCP_UP1":10853},{"wTCP_UP1":13441.5},{"wTCP_UP1":17134},{"wTCP_UP1":7740},{"wTCP_UP1":7868},{"wTCP_UP1":11822},{"wTCP_UP1":14247},{"wTCP_UP1":7401.5},{"wTCP_UP1":10959},{"wTCP_UP1":8949},{"wTCP_UP1":6431},{"wTCP_UP1":15467},{"wTCP_UP1":15657},{"wTCP_UP1":6426},{"wTCP_UP1":9955.5},{"wTCP_UP1":11720.5},{"wTCP_UP1":3828.5},{"wTCP_UP1":4332},{"wTCP_UP1":5894},{"wTCP_UP1":15749},{"wTCP_UP1":12015},{"wTCP_UP1":7594},{"wTCP_UP1":2609},{"wTCP_UP1":8483.5},{"wTCP_UP1":5726},{"wTCP_UP1":8324},{"wTCP_UP1":6533},{"wTCP_UP1":3841.5},{"wTCP_UP1":9783},{"wTCP_UP1":3099.9},{"wTCP_UP1":8439.5},{"wTCP_UP1":8969},{"wTCP_UP1":8962.5},{"wTCP_UP1":10479},{"wTCP_UP1":8978},{"wTCP_UP1":10879.5},{"wTCP_UP1":6090.5},{"wTCP_UP1":6841},{"wTCP_UP1":5438},{"wTCP_UP1":8964.5},{"wTCP_UP1":9731},{"wTCP_UP1":3400.65},{"wTCP_UP1":6335},{"wTCP_UP1":5151},{"wTCP_UP1":7644.5},{"wTCP_UP1":12392},{"wTCP_UP1":2213.3},{"wTCP_UP1":15823},{"wTCP_UP1":6875},{"wTCP_UP1":1999},{"wTCP_UP1":3331.7},{"wTCP_UP1":3427.2},{"wTCP_UP1":4779.05},{"wTCP_UP1":3413.3},{"wTCP_UP1":8898},{"wTCP_UP1":12797},{"wTCP_UP1":9509},{"wTCP_UP1":5323},{"wTCP_UP1":3565.9},{"wTCP_UP1":3521.5},{"wTCP_UP1":4689},{"wTCP_UP1":2841.5},{"wTCP_UP1":847},{"wTCP_UP1":260.2},{"wTCP_UP1":3424},{"wTCP_UP1":3570.5},{"wTCP_UP1":350},{"wTCP_UP1":2107.2},{"wTCP_UP1":3414.6},{"wTCP_UP1":2094},{"wTCP_UP1":4198.5},{"wTCP_UP1":2394.4},{"wTCP_UP1":3630},{"wTCP_UP1":1055.5},{"wTCP_UP1":3263},{"wTCP_UP1":1009.8},{"wTCP_UP1":964.2},{"wTCP_UP1":911.8},{"wTCP_UP1":822.95},{"wTCP_UP1":976},{"wTCP_UP1":733.9},{"wTCP_UP1":955},{"wTCP_UP1":1221.65},{"wTCP_UP1":995},{"wTCP_UP1":984},{"wTCP_UP1":916},{"wTCP_UP1":975.3},{"wTCP_UP1":28},{"wTCP_UP1":983},{"wTCP_UP1":611},{"wTCP_UP1":973},{"wTCP_UP1":926},{"wTCP_UP1":518},{"wTCP_UP1":977},{"wTCP_UP1":969},{"wTCP_UP1":921},{"wTCP_UP1":950},{"wTCP_UP1":758},{"wTCP_UP1":931},{"wTCP_UP1":935.9},{"wTCP_UP1":281.2},{"wTCP_UP1":973.8},{"wTCP_UP1":823},{"wTCP_UP1":190.9},{"wTCP_UP1":395},{"wTCP_UP1":890.4},{"wTCP_UP1":370.5},{"wTCP_UP1":258.6},{"wTCP_UP1":297.25},{"wTCP_UP1":530.2},{"wTCP_UP1":313.5},{"wTCP_UP1":902},{"wTCP_UP1":1007.8},{"wTCP_UP1":611.1},{"wTCP_UP1":183.2},{"wTCP_UP1":785.5},{"wTCP_UP1":667.5},{"wTCP_UP1":811},{"wTCP_UP1":963},{"wTCP_UP1":448.4},{"wTCP_UP1":177.4},{"wTCP_UP1":312.3},{"wTCP_UP1":136},{"wTCP_UP1":421.4},{"wTCP_UP1":752},{"wTCP_UP1":487.1},{"wTCP_UP1":96.5},{"wTCP_UP1":274.8},{"wTCP_UP1":2836},{"wTCP_UP1":1812},{"wTCP_UP1":949},{"wTCP_UP1":615},{"wTCP_UP1":184.3},{"wTCP_UP1":1648},{"wTCP_UP1":1213},{"wTCP_UP1":1230},{"wTCP_UP1":1043},{"wTCP_UP1":1124},{"wTCP_UP1":87.3},{"wTCP_UP1":576.8},{"wTCP_UP1":587},{"wTCP_UP1":1174},{"wTCP_UP1":747},{"wTCP_UP1":71.3},{"wTCP_UP1":1167},{"wTCP_UP1":1028},{"wTCP_UP1":1183},{"wTCP_UP1":479.3},{"wTCP_UP1":981},{"wTCP_UP1":1165},{"wTCP_UP1":1016},{"wTCP_UP1":1090},{"wTCP_UP1":864},{"wTCP_UP1":1348},{"wTCP_UP1":487.9},{"wTCP_UP1":181.6},{"wTCP_UP1":776},{"wTCP_UP1":716.7},{"wTCP_UP1":722},{"wTCP_UP1":481.5},{"wTCP_UP1":176},{"wTCP_UP1":323.4},{"wTCP_UP1":231.9},{"wTCP_UP1":1141},{"wTCP_UP1":389.1},{"wTCP_UP1":799},{"wTCP_UP1":1127},{"wTCP_UP1":460},{"wTCP_UP1":134.6},{"wTCP_UP1":592},{"wTCP_UP1":469.7},{"wTCP_UP1":431.1},{"wTCP_UP1":295},{"wTCP_UP1":196.5},{"wTCP_UP1":560},{"wTCP_UP1":154.9},{"wTCP_UP1":145.2},{"wTCP_UP1":254.6},{"wTCP_UP1":873},{"wTCP_UP1":400.1},{"wTCP_UP1":1023},{"wTCP_UP1":709},{"wTCP_UP1":408.3},{"wTCP_UP1":634.4},{"wTCP_UP1":596},{"wTCP_UP1":1294},{"wTCP_UP1":897},{"wTCP_UP1":613},{"wTCP_UP1":341.1},{"wTCP_UP1":391.6},{"wTCP_UP1":958},{"wTCP_UP1":680},{"wTCP_UP1":898},{"wTCP_UP1":544.6},{"wTCP_UP1":163.6},{"wTCP_UP1":521.6},{"wTCP_UP1":180.4},{"wTCP_UP1":396.8},{"wTCP_UP1":750},{"wTCP_UP1":172.6},{"wTCP_UP1":376.3},{"wTCP_UP1":798},{"wTCP_UP1":294.6},{"wTCP_UP1":373.1},{"wTCP_UP1":642.8},{"wTCP_UP1":110.4},{"wTCP_UP1":449.8},{"wTCP_UP1":443.7},{"wTCP_UP1":726},{"wTCP_UP1":454.6},{"wTCP_UP1":507.7},{"wTCP_UP1":157.1},{"wTCP_UP1":57.2},{"wTCP_UP1":2313},{"wTCP_UP1":2384},{"wTCP_UP1":858},{"wTCP_UP1":3053},{"wTCP_UP1":1436},{"wTCP_UP1":1311},{"wTCP_UP1":936},{"wTCP_UP1":251.4},{"wTCP_UP1":261.3},{"wTCP_UP1":1394},{"wTCP_UP1":808},{"wTCP_UP1":704},{"wTCP_UP1":653.9},{"wTCP_UP1":836},{"wTCP_UP1":678},{"wTCP_UP1":600.2},{"wTCP_UP1":612},{"wTCP_UP1":569.5},{"wTCP_UP1":600.6},{"wTCP_UP1":517.4},{"wTCP_UP1":208.8},{"wTCP_UP1":208.6},{"wTCP_UP1":202.2},{"wTCP_UP1":178.1},{"wTCP_UP1":179.2},{"wTCP_UP1":125.6},{"wTCP_UP1":192.8},{"wTCP_UP1":68.2},{"wTCP_UP1":154.8},{"wTCP_UP1":247.1},{"wTCP_UP1":95.6},{"wTCP_UP1":93.7},{"wTCP_UP1":960},{"wTCP_UP1":1039},{"wTCP_UP1":918.9},{"wTCP_UP1":966},{"wTCP_UP1":1001},{"wTCP_UP1":384.9},{"wTCP_UP1":732},{"wTCP_UP1":915.1},{"wTCP_UP1":1030},{"wTCP_UP1":877},{"wTCP_UP1":989},{"wTCP_UP1":29.6},{"wTCP_UP1":1018},{"wTCP_UP1":246.7},{"wTCP_UP1":360.9},{"wTCP_UP1":928},{"wTCP_UP1":477.7},{"wTCP_UP1":1024},{"wTCP_UP1":972},{"wTCP_UP1":875},{"wTCP_UP1":830},{"wTCP_UP1":1042},{"wTCP_UP1":354.5},{"wTCP_UP1":612.9},{"wTCP_UP1":209.1},{"wTCP_UP1":668},{"wTCP_UP1":175.7},{"wTCP_UP1":133.2},{"wTCP_UP1":199},{"wTCP_UP1":279.4},{"wTCP_UP1":247.3},{"wTCP_UP1":722.9},{"wTCP_UP1":231.3},{"wTCP_UP1":699},{"wTCP_UP1":1014.7},{"wTCP_UP1":896.1},{"wTCP_UP1":348.5},{"wTCP_UP1":169.7},{"wTCP_UP1":49.7},{"wTCP_UP1":16298},{"wTCP_UP1":18324},{"wTCP_UP1":16526},{"wTCP_UP1":18320},{"wTCP_UP1":14401},{"wTCP_UP1":16179},{"wTCP_UP1":14740},{"wTCP_UP1":17530},{"wTCP_UP1":16955},{"wTCP_UP1":16545},{"wTCP_UP1":14592},{"wTCP_UP1":10274},{"wTCP_UP1":1142},{"wTCP_UP1":1343},{"wTCP_UP1":1130},{"wTCP_UP1":1197},{"wTCP_UP1":11128},{"wTCP_UP1":1160},{"wTCP_UP1":11638},{"wTCP_UP1":5477},{"wTCP_UP1":1178},{"wTCP_UP1":8858},{"wTCP_UP1":1277.8},{"wTCP_UP1":9904},{"wTCP_UP1":894},{"wTCP_UP1":6073},{"wTCP_UP1":5336},{"wTCP_UP1":9712},{"wTCP_UP1":449.2},{"wTCP_UP1":1093},{"wTCP_UP1":1009},{"wTCP_UP1":1218},{"wTCP_UP1":1206},{"wTCP_UP1":5276},{"wTCP_UP1":1174.5},{"wTCP_UP1":737.6},{"wTCP_UP1":724},{"wTCP_UP1":1283.1},{"wTCP_UP1":903.4},{"wTCP_UP1":4494},{"wTCP_UP1":1203},{"wTCP_UP1":1349},{"wTCP_UP1":975},{"wTCP_UP1":204.4},{"wTCP_UP1":656},{"wTCP_UP1":647.9},{"wTCP_UP1":161.4},{"wTCP_UP1":1115.6},{"wTCP_UP1":531.1},{"wTCP_UP1":364.8},{"wTCP_UP1":1007.7},{"wTCP_UP1":849},{"wTCP_UP1":662},{"wTCP_UP1":1175},{"wTCP_UP1":31.5},{"wTCP_UP1":561.4},{"wTCP_UP1":1025},{"wTCP_UP1":469},{"wTCP_UP1":1525},{"wTCP_UP1":1089},{"wTCP_UP1":1024.65},{"wTCP_UP1":683},{"wTCP_UP1":1017},{"wTCP_UP1":1245},{"wTCP_UP1":1091},{"wTCP_UP1":1060},{"wTCP_UP1":1244},{"wTCP_UP1":933},{"wTCP_UP1":959},{"wTCP_UP1":904.5},{"wTCP_UP1":888.5},{"wTCP_UP1":438.2},{"wTCP_UP1":844.5},{"wTCP_UP1":726.6},{"wTCP_UP1":589.4},{"wTCP_UP1":709.95},{"wTCP_UP1":737.5},{"wTCP_UP1":834.7},{"wTCP_UP1":829.4},{"wTCP_UP1":711},{"wTCP_UP1":915},{"wTCP_UP1":671.8},{"wTCP_UP1":711.5},{"wTCP_UP1":701.65},{"wTCP_UP1":754},{"wTCP_UP1":809.5},{"wTCP_UP1":536.5},{"wTCP_UP1":499.1},{"wTCP_UP1":632.4},{"wTCP_UP1":584.35},{"wTCP_UP1":351.6},{"wTCP_UP1":567},{"wTCP_UP1":610.7},{"wTCP_UP1":837},{"wTCP_UP1":468.65},{"wTCP_UP1":772.35},{"wTCP_UP1":465.6},{"wTCP_UP1":781.5},{"wTCP_UP1":361.2},{"wTCP_UP1":204},{"wTCP_UP1":817.5},{"wTCP_UP1":517.75},{"wTCP_UP1":515.35},{"wTCP_UP1":436},{"wTCP_UP1":446.7},{"wTCP_UP1":167.6},{"wTCP_UP1":616},{"wTCP_UP1":134.9},{"wTCP_UP1":285.5},{"wTCP_UP1":240.8},{"wTCP_UP1":482.1},{"wTCP_UP1":384.3},{"wTCP_UP1":3435},{"wTCP_UP1":2395.5},{"wTCP_UP1":2950},{"wTCP_UP1":2504.5},{"wTCP_UP1":3553.5},{"wTCP_UP1":2168.5},{"wTCP_UP1":2048.5},{"wTCP_UP1":1885.5},{"wTCP_UP1":2363.5},{"wTCP_UP1":2471.5},{"wTCP_UP1":1091.6},{"wTCP_UP1":1166.45},{"wTCP_UP1":883.9},{"wTCP_UP1":1760},{"wTCP_UP1":2480},{"wTCP_UP1":1246},{"wTCP_UP1":2766},{"wTCP_UP1":1894.5},{"wTCP_UP1":2727.5},{"wTCP_UP1":1791},{"wTCP_UP1":1663.5},{"wTCP_UP1":1994.5},{"wTCP_UP1":1232.2},{"wTCP_UP1":235.2},{"wTCP_UP1":1193.5},{"wTCP_UP1":434.2},{"wTCP_UP1":2265.5},{"wTCP_UP1":819.9},{"wTCP_UP1":637.25},{"wTCP_UP1":1052},{"wTCP_UP1":416},{"wTCP_UP1":1799},{"wTCP_UP1":409.6},{"wTCP_UP1":337.1},{"wTCP_UP1":553.95},{"wTCP_UP1":1116.4},{"wTCP_UP1":663.55},{"wTCP_UP1":577.5},{"wTCP_UP1":969.75},{"wTCP_UP1":348.55},{"wTCP_UP1":791.45},{"wTCP_UP1":217.3},{"wTCP_UP1":602.5},{"wTCP_UP1":521.7},{"wTCP_UP1":124},{"wTCP_UP1":145.5},{"wTCP_UP1":729.55},{"wTCP_UP1":654.9},{"wTCP_UP1":346.75},{"wTCP_UP1":569.4},{"wTCP_UP1":662.35},{"wTCP_UP1":334.05},{"wTCP_UP1":187},{"wTCP_UP1":151.25},{"wTCP_UP1":224.1},{"wTCP_UP1":223},{"wTCP_UP1":224.6},{"wTCP_UP1":139.1},{"wTCP_UP1":69.2},{"wTCP_UP1":58.6},{"wTCP_UP1":117.5},{"wTCP_UP1":15584.5},{"wTCP_UP1":15434},{"wTCP_UP1":15971.5},{"wTCP_UP1":10702},{"wTCP_UP1":16623},{"wTCP_UP1":15538},{"wTCP_UP1":7471},{"wTCP_UP1":15334},{"wTCP_UP1":9314.9},{"wTCP_UP1":11608.5},{"wTCP_UP1":8625},{"wTCP_UP1":9771},{"wTCP_UP1":10982},{"wTCP_UP1":8666.5},{"wTCP_UP1":5658.25},{"wTCP_UP1":4989},{"wTCP_UP1":4636.45},{"wTCP_UP1":8519.5},{"wTCP_UP1":9169.6},{"wTCP_UP1":9831.65},{"wTCP_UP1":10984},{"wTCP_UP1":6348.5},{"wTCP_UP1":5604.05},{"wTCP_UP1":2996},{"wTCP_UP1":570.85},{"wTCP_UP1":8218.15},{"wTCP_UP1":2249},{"wTCP_UP1":10827},{"wTCP_UP1":8318.5},{"wTCP_UP1":2431.85},{"wTCP_UP1":5164.65},{"wTCP_UP1":4627},{"wTCP_UP1":1197.85},{"wTCP_UP1":10832.5},{"wTCP_UP1":3777.5},{"wTCP_UP1":5365.5},{"wTCP_UP1":2588},{"wTCP_UP1":768.1},{"wTCP_UP1":4481},{"wTCP_UP1":3612},{"wTCP_UP1":3069},{"wTCP_UP1":5843},{"wTCP_UP1":2269.9},{"wTCP_UP1":679.3},{"wTCP_UP1":3559.5},{"wTCP_UP1":4442},{"wTCP_UP1":3708.9},{"wTCP_UP1":1035},{"wTCP_UP1":503.1},{"wTCP_UP1":525},{"wTCP_UP1":491.35},{"wTCP_UP1":593.55},{"wTCP_UP1":845.85},{"wTCP_UP1":373.7},{"wTCP_UP1":663.1},{"wTCP_UP1":803},{"wTCP_UP1":482},{"wTCP_UP1":516},{"wTCP_UP1":1412},{"wTCP_UP1":659.3}]
2 answers
solution1
0 2016-04-11 22:37:37
I have never worked with highcharts before, but here are a couple changes that might get you closer.
First, when you're just messing around trying to get stuff to work, it's easier (at least for me) to just put everything in one file.
Second, I think you need jQuery. So I added that script to the top. Also, when working with jQuery, you should put your scripts after the elements they are referencing, and better yet, put your function calls in a $(document).ready(function() { // do code here }); call. This will ensure you elements are loaded to the DOM before anything tries to find them.
Third, if you are json_encode 'ing your PHP data, you can just assign that directly to the javascript variable, no need to do new Array() .
Give this a try, let me know if any errors occur:
<?php
// A simple PHP script demonstrating how to connect to MySQL.
// Press the 'Run' button on the top to start the web server,
// then click the URL that is emitted to the Output tab of the console.
$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "reports2";
$dbport = 3306;
// Create connection
$db = new mysqli($servername, $username, $password, $database, $dbport);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
$query = "SELECT wTCP_UP1 FROM 1_sp12_la UNION ALL SELECT wTCP_UP1 FROM 1_sp12_rs UNION SELECT wTCP_UP1 FROM 1_sp12_sf";
$result = mysqli_query($db, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Area Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var js_array = <?php echo json_encode($data); ?>;
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b> <br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
data: js_array
}]
});
});
</script>
</body>
</html>
solution2
0 2016-04-16 08:36:48
Highchart uses custom formatted json. Specifically for your case, you can try this :
<?php
$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "reports2";
$dbport = 3306;
$db = new mysqli($servername, $username, $password, $database, $dbport);
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
echo "Connected successfully (".$db->host_info.")";
$query = "SELECT wTCP_UP1 FROM 1_sp12_la UNION ALL SELECT wTCP_UP1 FROM 1_sp12_rs UNION SELECT wTCP_UP1 FROM 1_sp12_sf";
$result = mysqli_query($db, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
}
$json_data = json_encode($data, JSON_NUMERIC_CHECK);
$data2 = str_replace('{"wTCP_UP1":', '', $json_data);
$data3 = str_replace('}', '', $data2);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Area Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
<script type = "text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Uptime',
data: <?php echo $data3;?>
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The last 2 str_replace function just removes {"wTCP_UP1": and } from the resulting json to have a format like this:
[6163,13622,456.1,2142.3,6317,1710,............659.3]
You can make this comma seperated string in your while loop without encoding it to json and removing unwanted characters.
With your sample json output, my result looks like this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Having Trouble Plotting JSON Data in HighCharts
Having trouble filtering the data from json
Having trouble formatting this JSON data from the server
LazyLoad content from mysql/php Json encoded data and Jquery
Having trouble getting JSON data from database with AJAX
D3: Having trouble selecting a path from json data
Having trouble loading JSON data from URL and displaying in HTML
Having trouble showing up the highcharts
Having Trouble Displaying JSON Array Data
Knockout - Having trouble accessing nested JSON data
Related Tags