I want to create two charts with CanvasJS in which I use values from php file.
I have two charts but only one renders, the second one has only white background and title text.
Here's php code with values:
<?php
require 'excCon.php';
$dataPoints = array(
array("y" => $excel_result, "label" => "Quantity"),
array("y" => $excel_result2, "label" => "Value"),
);
$dataP = array(
array("y" => $excel_result3, "name" => "1", "exploded" => false),
array("y" => $excel_result4, "name" => "2"),
array("y" => $excel_result5, "name" => "3&5"),
array("y" => $excel_result6, "name" => "4"),
);
?>
and javascript:
<div id="chartContainer style="height: 400px;width: 80%"">
<script type="text/javascript">
$(function () {
var chart1 = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
animationEnabled: true,
title: {
text: "Sum"
},
data: [
{
type: "column",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}
]
});
chart1.render();
});
</script>
</div>
<div id="chartContainer2" style="height: 400px;width: 80%">
<script type="text/javascript">
$(function () {
var chart2 = new CanvasJS.Chart("chartContainer2",
{
theme: "theme2",
title:{
text: "All"
},
exportFileName: "All",
exportEnabled: false,
animationEnabled: false,
data: [
{
type: "pie",
showInLegend: true,
toolTipContent: "{name}: <strong>{y}%</strong>",
indexLabel: "{name} {y}%",
dataP: <?php echo json_encode($dataP, JSON_NUMERIC_CHECK); ?>
}]
});
chart2.render();
});
</script>
</div>
The whole code is in index.php file.
For the record, I searched other solutions here as well as on the official page and none worked.
Solution is to have dataPoints in data and do not change it
data: [
{
type: "column",
**dataPoints** : <?php echo json_encode($dataP, JSON_NUMERIC_CHECK); ?>
Related
I create a chart using canvasjs. Values display in chart is from mysql database. All working but the problem is, it showing just 1 line on chart (sensors_pres) from table SensorData on chart not all three sensors_pres, sensors_temperature_data and sensors_humidity.
Other problem is on range slider is not showing hour from 0 to 24, test it. Click in left-up on button all and in right-up you will see the number -1 to 96. How can i solve?
I opened data.php file with browser and all values working correct.
Here is my html&javascript code
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script type="text/javascript">
window.onload = function () {
$.getJSON("data.php", function (result) {
var stockChart = new CanvasJS.StockChart("chartContainer",{
title:{
text:"StockChart with Numeric Axis"
},
animationEnabled: true,
exportEnabled: true,
charts: [{
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
crosshair: {
enabled: true,
//snapToDataPoint: true
}
},
data: [{
type: "line",
dataPoints: result
}]
}],
rangeSelector: {
inputFields: {
startValue: 00,
endValue: 24,
valueFormatString: "###0"
},
buttons: [{
label: "00",
range: 00,
rangeType: "number"
},{
label: "12",
range: 12,
rangeType: "number"
},{
label: "24",
range: 24,
rangeType: "number"
},{
label: "All",
rangeType: "all"
}]
}
});
stockChart.render();
})
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 450px; width: 100%;"></div>
</body>
</html>
here is my php code:
<?php
header('Content-Type: application/json');
$con = mysqli_connect("fdb30.awardspace.net","3758712_lnd","bogdanutzu97","3758712_lnd");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
$data_points = array();
$result = mysqli_query($con, "SELECT * FROM SensorData");
while($row = mysqli_fetch_array($result))
{
$point = array("label" => $row['reading_time'] , "y" => $row['sensors_pres'],$row['sensors_temperature_data'],$row['sensors_humidity']);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
data: [
{
type: "line",
dataPoints: result1
},
{
type: "line",
dataPoints: result2
},
{
type: "line",
dataPoints: result3
}
]
In your data section add 2 more data sets
How to replace my javascript datapoints to my mysql database?
My array x and y ??? i have trouble in plotting my mysql database...
ex.
array("x" =>(HERE), "y" =>HERE),
by database $row['year'];
<?php
$dataPoints = array(
array("x" => 946665000000, "y" => 40),
array("x" => 978287400000, "y" => 20),
array("x" => 1009823400000, "y" => 100),
array("x" => 1041359400000, "y" => 300),
array("x" => 1072895400000, "y" => 500),
array("x" => 1104517800000, "y" => 500),
array("x" => 1136053800000, "y" => 400),
array("x" => 1167589800000, "y" => 400),
);
?>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script>
window.onload = function () {
var chart1 = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Number of Enrollees by Year"
},
axisY: {
title: "Students in numbers",
valueFormatString: "#",
suffix: "",
prefix: ""
},
data: [{
type: "spline",
markerSize: 5,
xValueFormatString: "YYYY",
yValueFormatString: "##0. Enrolees",
xValueType: "dateTime",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart1.render();
}
</script>
Its just a template from chartjs.com
Please help me guys form database php to javascript...
As easy as :
array_walk($dataPoints, function (&$dp, $index) use($show) {
$dp['y'] = $show['table_data'][$index]['y'];
})
I hope to help you.
The first thing I get values from database with no problem. Then I can echo the values but after The values turn in to null. Somehow the values do not pass this point. Here are my codes.
php and mysql part
$rows = array();
$result = mysql_query("SELECT * FROM kayitlar");
$i=1;
while($row = mysql_fetch_array($result)) {
$rows []= array(
'id' => $row['id'],
'ad' => $row['ad'],
'saat' => $row['saat'],
);
$i++;
}
No problem till this point. Here is the rest of the code that I am having problem
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "title"
},
animationEnabled: true,
axisY: {
title: "Zaman (saat)"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "saat",
dataPoints: [
{y:<?php echo json_encode($row['ad']); ?>, label: "<?php echo json_encode($row['saat']); ?> "},
]
}
]
});
chart.render();
}
</script>
here where I stuck <?php echo json_encode($row['ad']); ?> is getting no value
Your $rows array indexed array which contain your keys in every index. So you need to extract your keys value pair from array.
After your while loop completed, add following codes
$arr['ad'] = array_column($rows,"ad");
$arr['saat'] = array_column($rows,"saat");
$arr['id'] = array_column($rows,"id");
Now use this in your jS
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "title"
},
animationEnabled: true,
axisY: {
title: "Zaman (saat)"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "saat",
dataPoints: [
{y:<?php echo json_encode($arr['ad']); ?>, label: "<?php echo json_encode($arr['saat']); ?> "},
]
}
]
});
chart.render();
}
</script>
Your array is multidimensional array so simple use array_column to get specific column value from each index and apply json_encode()
<?php echo json_encode(array_column($rows,'ad')); ?>
<?php echo json_encode(array_column($rows,'saat')); ?>
This is the image of the error:
This error 13 is always showing up. I just cannot find the reason why highchart.js is not working. Can anyone help me to fix this one? Thanks
<?php
$q = $this->db->query("select * from scli_tbl_services");
foreach ($q->result() as $row) {
$data[] = $row->service_id;
}
?>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_sample'
},
series: [{
data: [<?php echo join($data, ',') ?>],
pointStart: 0,
pointInterval: 10
}]
});
</script>
<span id="chart_sample" class="chart_sample"></span>
This is my code that I'm about to run. So I don't know if my code also is working fine.
HighChart.Js Solution :
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<?php
$newArray = array(
"Valvo" => Array(10,15,20),
"ACBUS" => Array(25,30,15),
"SchoolBus" => Array(25,30,15),
"MiniBus" => Array(25,30,15),
"CityBus" => Array(25,30,15)
);
$json_array_form = array();
$data = '';
foreach ($newArray as $key => $value){
$json_array_form['name'] = $key;
$json_array_form['data'] = $value;
$data .= json_encode($json_array_form).',';
}
$data = substr($data, 0, -1);
?>
//HighChart Js functionality start
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [<?php echo $data;?>],
});
});
</script>
Im new in Js and Jquery and I have a curiosity about the Jquery Chart that is free to download and I want to make the data inside to be coming from the database to make it dynamic but somehow I find it difficult to loop it in.
here is my sample code, I used PHP to get the database and pass it on a JS variable
<!DOCTYPE HTML>
<html>
<head>
<?php
$link = mysqli_connect("localhost","root","","raksquad_centralized") or die("Error " . mysqli_error($link));
if($link->connect_error){
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
$query = "SELECT * FROM raksquad_centralized.grade";
$result = $link->query($query);
$subject_id= array();
$genAve = array();
while($row = mysqli_fetch_array($result)){
$subject_id[] = $row['subject_id'];
$genAve[]= $row['gen_ave'];
}
?>
<script type="text/javascript">
window.onload = function () {
var DataXAxis = <?php echo json_encode($subject_id); ?>; // X axis that corresponds to students
var DataYAxis = <?php echo json_encode($genAve); ?>; // Y axis that corresponds to grades
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Students"
},
animationEnabled: true,
axisY: {
title: "Grades"
},
axisX: {
title: "Students"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "General Average",
dataPoints: [
//the area to loop with the value of DataXAxis, DataYAxis
{y: 98, label: "MT1234" },
{y: 72, label: "MT1236"} //corresponds to the barcharts
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="./canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
appreciate for the help, useful for learning :)
I just use a php code to fetch the data, then json encode it.
On the script use json parse