This question already has answers here:
How to add PHP array to JS array in Highcharts
(5 answers)
Closed 6 years ago.
I was trying to pull data from DB to Highcharts polar chart, and when I try to load it on browser I get this error in the browser's inspector tools:
SyntaxError: missing } after property list on Line 78
This is the code I've used.
EDIT: IVE PUT DIFFERENT CODE FIRST TIME
<?php
$connection = mysqli_connect("localhost","root","","uwguru");
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Muscle Summary',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: [
<?php
$sql="SELECT * FROM exercises";
$result= mysqli_query($connection,$sql);
while ($registros = mysqli_fetch_array($result))
{
?>
<?php echo $registros['main_muscle']?>,
<?php
}
?>
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Test',
data: [
<?php
$sql="SELECT * FROM exercises";
$result= mysqli_query($connection,$sql);
while ($registros = mysqli_fetch_array($result))
{
?>
<?php echo $registros['muscle_string']?>,
<?php
}
?>
]
pointPlacement: 'on'}],
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
RENDERED SOURCE CODE
<
!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Muscle Summary',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: [
["1","14","13","1","14","1","7","9","16"]
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Test',
data: [
["6","745","7547","4","5","1","2","634234","325235"]
]
pointPlacement: 'on'}
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Check the output of your while loop.
Also, consider building your array and outputting it to JSON using json_encode().
Note that you will still have to parse the JSON on the JavaScript side. If you are going to mix javascript and PHP, it's usually better practice output the JS data separately (like as a variable above the JS logic) and then parse it where you need it. It makes maintaining the code in the future a lot easier.
<?php
// put this in above the `$('#container').highcharts({` line
//and you can access it as a proper JS variable as you need to.
$sql="SELECT * FROM exercises";
$result= mysqli_query($connection,$sql);
$output = [];
while ($registros = mysqli_fetch_array($result)) {
$output[] = $registros['muscle_string'];
}
echo "var muscleString = JSON.parse('".json_encode($output)."');";
?>
That said, the error you are getting is that you probably need this:
series: [{
name: 'Test',
data: [
["6","745","7547","4","5","1","2","634234","325235"]
]
pointPlacement: 'on'}
To ultimately look like this:
series: [{
name: 'Test',
data: [
["6","745","7547","4","5","1","2","634234","325235"]
], // <-- add comma here
pointPlacement: 'on'
}] // <-- close your array with a closing square bracket
Related
I search many in site but i could not find the answer so i post my question. I think for my question has exist easy asnwer but It's first time i use javascript , jquery and ajax and i don't know what to do :(!
I use Laravel 5
I have a blade php Page and in this file i have a while that create many < div >s like this chart.blade.php:
<?php $id=0; ?>
#foreach($results as $row)
...
<?php
$i++;
$allGrade = findData($row);
echo "<div id=\"container$id\" style=\"...\"></div>";
?>
...
#endforeach
this file create all of my divs with id container1, container2, container3, ...
in some case create 100 divs , in some case 1200 divs and it's not constant!
in these divs i want to use a Bar charts , and i use http://highcharts.com/ .
One of my question is what is the best way for doing this work?
the top of this blade i use this java script function for highchart.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
$ {
demo.css
}
</style>
<script type="text/javascript">
$(function () {
for (var i = 0; i < 5000; i++) {
// Some Alert ****test here ****
//I put some alert work correctly
$('#container' + i).highcharts({
chart: {
type: 'bar'
}
, title: {
text: 'Historic World Population by Region'
}
, subtitle: {
text: 'Source: Wikipedia.org'
}
, xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
, title: {
text: null
}
}
, yAxis: {
min: 0
, title: {
text: 'Population (millions)'
, align: 'high'
}
, labels: {
overflow: 'justify'
}
}
, tooltip: {
valueSuffix: ' millions'
}
, plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
, legend: {
layout: 'vertical'
, align: 'right'
, verticalAlign: 'top'
, x: -40
, y: 80
, floating: true
, borderWidth: 1
, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF')
, shadow: true
}
, credits: {
enabled: false
}
, series: [{
name: 'Year 1800'
, data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900'
, data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012'
, data: [JSON.parse('<?php echo json_encode($allGrades[1]); ?>')]
}]
});
}
});
</script>
</head>
<body>
<div id="container4" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container1"></div>
.
.
.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</body>
</html>
The value of allGrade[1] is 20 , and when I use this alert test in Alert test section as below
var d = <?php echo json_encode($allGrades); ?>; //Don't forget the extra semicolon!
//alert(d[1]);
j++;
var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
var c1 = newJ[1];
var c2 =newJ[2];
alert(c1);
alert(JSON.parse('<?php echo json_encode($allGrades[1]); ?>'));
alerts work and shows data 20 in alert box!
I Expect for Data Year 2012 when i put c1 or put JSON.parse('') the chart data be 20 , But when i put these two items don't work!
change the data property to look like
var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
then
data: newJ[i]
I am working on a project that will display a bar chart. The bar chart is working perfectly but when I try to pass an integer php variable to javascript variable and add the variable as an element of a list isn't working. below is my code. I don't know what is wrong with my source code. I spend several hours finding for solution online but I don't get any.
Looking forward to see your response.
<html>
<head><title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
</style>
<?php
//my php variable
$ab=6;
?>
<script type="text/javascript">
//assign the php variable to javascript variable
var za = <?php echo $ab; ?>;
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// I'm putting the variable as an element below, but it's not working
data: [za, 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
For what it's worth, you should avoid interacting with javascript in this way. PHP works better when you're interacting with HTML, and let javascript be separate (this goes halfway towards using a true templating system, which you should do):
<?php
// page setup goes up here:
$ab = 6; // name your variables at little more descriptively, I don't know what this does
?>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container { height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto; }
</style>
<script type="text/javascript">
$(function () {
console.log($('#ab-variable').val());
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// We're referencing our hidden field in the HTML
data: [$('#ab-variable').val(), 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- we're including our variable here, in HTML, rather than in the javascript -->
<input type="hidden" id="ab-variable" value="<?= $ab; ?>">
<div id="container" style="height: 400px"></div>
</body>
... you can then look int the HTML and see that your hidden field has the correct value. If it's still not working, then you've got a problem with your javascript setup using highcharts.
If you write your code this way, you get the added benefit of being able to create a separate javascript file that will be cached at the client and they won't have to download it every time.
As is, it doesn't look like there's any inherent problem with your code, but re-factoring (when it's warranted) can sometimes suss out little bugs. To confirm that this code should work the way you want, I've added a console.log() call to ensure that your javascript can see your variable. To see anything more than that you'll have to provide a link to your page so we can see any errors that might be popping up.
I want show data with highcharts on index.php page.
How should I do?, this is what I tried so far:
I have a HTML page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'San luong Card',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Tong tien'
},
plotLines: [{
value: 0,
width: 1,
color: '#red'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
area: {
stacking: 'high',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
var chart = new Highcharts.Chart(options);
return false;
})
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<form method="post" action="data.php" id="form_search">
<header><h3>Thong ke CCU</h3></header>
<div class="module_content">
<fieldset>
<label>Tu ngay</label>
<input type="text" name="t_n" />
</fieldset>
<fieldset>
<label>Den ngay</label>
<input type="text" name="d_n" />
</fieldset>
<div class="clear"></div>
</div>
<footer>
<div class="submit_link">
<input type="submit" name="s_t" value="Search" id="submit" class="alt_btn">
<input type="reset" name="reset" value="Refesh" >
</div>
</form>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
When I submit form with value 2 textfield data show on data.php with JSON data type.
Code data.php:
if(isset($_POST['s_t'])){
include("../config/dbconnect.php");
$date = new DateTime();
$t_n = strtotime($_POST['t_n']);
$d_n = strtotime($_POST['d_n']);
$tn = date("Y-m-d",$t_n);
$dn = date("Y-m-d",$d_n);
$query = mysql_query("select SUM(ccu) as sumccu,DATE_FORMAT(date,'%d-%m') as day from skycity_log.ccu_log where date >='".$tn."' AND date <='".$dn."' GROUP BY date") or (mysql_error());
$category = array();
$category['name'] = 'DAY';
$series1 = array();
$series1['name'] = 'CCU';
while($r = mysql_fetch_array($query)) {
echo $r['day'];
$category['data'][] = $r['day'];
$series1['data'][] = $r['sumccu'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
}
?>
The missing parts are:
Intercept the form submission (e.g by defining an obsubmit handler using jquery.submit)
Manually fetch JSON data from the server (e.g. using jquery.post)
Convert received data to Highcharts series format, if neccesary
Initialize Highcharts using the received data (the code currently in your document.ready handler)
I'm trying to use highcharts to visualize some numbers out of my database :)
After fetching them from the db I'm encoding the outcome (currently 2 categories) as JSON:
Name
Category
Data
[{"name":"Something 1","category":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,0,1,0,0,0,1,0,0,7,6,3,4,4,10,8,9,7,12,5,8,2,0]},{"name":"Something 2","category1":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,1,1,0,0,0,0,2,1,4,2,3,2,4,3,4,6,3,5,3,5,2,1]}]
which is later be used by my example.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Diagram</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Something and Anything',
x: -20 //center
},
subtitle: {
text: 'bla bla bla',
x: -20
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 30,
formatter: function() {
return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
}
}
},
yAxis: {
title: {
text: 'Orders'
},
plotLines: [{
value: 0,
width: 0,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +':00 => '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Bla Bla Bla Highcharts Container -->
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
so far so good - what I finally want to add is the possibility of adding a datepicker now.
My "data.php" file is already able to handle a "Date" Parameter:
data.php?dateParam=2014-05-08
But still I'm not finding a valid way to add the datepicker into my code.
Also wanted to let you know that I'm pretty new to JS and aware of the fact
that this script could have been written way better...
So long and thanks for all the cheese,
Jo3rg
A few tips
if you use categories, dateFormat will not work, it is based on timestamp
you should set type of xAxis (i.e category) or datetime
if you use datetime, your dates should be parsed to timestamp (Date.UTC functon or Date.parse()
in the series you should define which data is used, becuase your json is invalid (incorrect structure for highcharts)
Good evening everyone,
this moment I try to work with HighChart / HighStock and after several weeks I were able to display my MySQL-data in the charts. But: I always want more.
Well, I try to reach a dynamic chart which is refreshing like the examples you may know from the website. http://jsfiddle.net/sdorzak/HsWF2/
I used the sample code as a guide. It doesn't work, but think the problem is the missing y-axis because y-axis data come from my MySQL database while x-axis should be the current time.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>POS RESULT</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<?php
include "config.php";
$SQL1 = "SELECT * FROM Prices WHERE ticker ='FB'";
$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['Close'];
}
?>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
events: {
load: function()
{
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime();
series.addPoint([x], true);
}, 1000);
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
//categories: [<?php echo join(',', $data2); ?>],
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [<?php echo join(',', $data1); ?>]
}]
});
});
});
</script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The passage I am talking about and which is shown in the samples is
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
But, as I already wrote, I don't need a random y-axis, just x-axis.
Maybe you can help.
Thanks for your help.
Edit:
live-server-data.php
<?php
// Set the JSON header
header("Content-type: text/json");
include "config.php";
$SQL1 = "SELECT * FROM Prices WHERE Ticker ='TSLA'";
$result1 = mysql_query($SQL1);
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['Close'];
}
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = $data1;
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
The value "Close" is decimal 24,4.
See that solution: http://www.highcharts.com/studies/live-server.htm
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
im trying to create another page that can relate to my bar chart. You can go through his code. It work for me
<!DOCTYPE html>
<html>
<head>
<?php
session_start();
?>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$('#calendar').datepicker({
});
!function ($) {
$(document).on("click","ul.nav li.parent > a > span.icon", function(){
$(this).find('em:first').toggleClass("glyphicon-minus");
});
$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}(window.jQuery);
$(window).on('resize', function () {
if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
})
$(window).on('resize', function () {
if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
})
</script>
<style>
.selection{
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
text-decoration:none;
float:left;
margin:4px;
text-align:center;
display: block;
color: green;
}
.page-header{
text-align:center;
text-decoration:hover;
color: blue;
font-size: 30px;
}
</style>
<script>
$(function () {
//on page load
getAjaxData(1);
//on changing select option
$('#dynamic_data').change(function(){
var val = $('#dynamic_data').val();
getAjaxData(val);
});
function getAjaxData(id){
//use getJSON to get the dynamic data via AJAX call
$.getJSON('datab1.php', {id: id}, function(chartData) {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Analysis of Data Type in The World'
},
xAxis: {
categories: ['Population', 'Health', 'Agriculture', 'Development', 'Transport', 'Education', 'Social', 'Tourism', 'Finance','Business','Economy', 'Industry', 'Employment', 'Weather', 'Food', 'Energy', 'Infrastructure', 'Science&Technology', 'Government','Culture', 'Religion',
'Justice&Law', 'Country', 'Water Resource', 'Maritim', 'Military', 'International', 'Geography', 'Statistics', 'Others','Electronic','Biotechnology', 'Women', 'Gender', 'Cartography','Disability','Position','Marital','CDF','Research']
},
yAxis: {
min: 0,
title: {
text: 'Percentage (%)'
}
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: chartData
});
});
}
});
</script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div id="container" style="width: 100%; min-height: 500px; margin: 0 auto"></div>
</body>
</html>
And this the code for fetching data from mysql
<?php
require('dbcon.php');
//select database
//define array
//we need two arrays - "male" and "female" so $arr and $arr1 respectively!
$arr = array();
$result = array();
//get the result from the table "highcharts_data"
$sql = "select * from world";
$q = mysqli_query($con, $sql) or die(mysqli_error());
$j = 0;
while ($row = mysqli_fetch_assoc($q)) {
//highcharts needs name, but only once, so give a IF condition
if ($j == 0) {
$arr['name'] = 'Percentage';
$j++;
}
//and the data for male and female is here
$arr['data'][] = $row['datavalue'];
}
//after get the data for male and female, push both of them to an another array called result
array_push($result, $arr); //1
//now create the json result using "json_encode"
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>