I've created a column chart from data I've retrieved from mysql.
The data are two series of data.
Chart is working.
However in the resulting graph I would like to give the series a different pointWidth.
PHP script for retrieving the Mysql data:
<?php
$con = mysql_connect("localhost","xxxx","xxxx");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("pvdag", $con);
$query = mysql_query("SELECT maand, OpbrengstPV, OpbrengstTheor FROM maandgegevens where YEAR(periode) = 2013");
$category = array();
$category['name'] = 'maand';
$series1 = array();
$series1['name'] = 'OpbrengstPV';
$series2 = array();
$series2['name'] = 'OpbrengstTheor';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['maand'];
$series1['data'][] = $r['OpbrengstPV'];
$series2['data'][] = $r['OpbrengstTheor'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
script for generating the graph:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>maandopbrengsten</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() {
// First, let's make the colors transparent
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 70
},
title: {
text: 'maandopbrengsten 2013',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'opbrengst kWh'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 100,
y: 0,
borderWidth: 3
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
grouping: false,
shadow: false
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; width: 75%; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can set pointWidth on particular serie, not in plotOptions, like in the example:
series: [{
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
pointWidth: 50,
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}]
http://jsfiddle.net/bwbF7/1/
Related
I am using HighCharts and im showing temperature on the graph. I was thinking that is it possible to show data for a single day only or 1 week or over a month using highchart graph. Right now I get all the data which is from the 1st record to the latest one from MySQL DB . Here is the code .
this is data.php -
<?php
$con = mysql_connect("192.168.100.107:3306","root","hannan786");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("pi", $con);
$sth = mysql_query("SELECT * FROM temperature ");
$rows = array();
$rows['Temperature'] = 'temperature';
while($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['temperature'];
}
$result = array();
array_push($result,$rows);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
And this is the code for the main Page where the graph data is displayed -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Refresh" Content="5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Temperature</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',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Temperature']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Right Now I get this as output -
You can use the method setExtremes() of the Highcharts Api. You only have to provide min and max value, that in your case consists of the same Date Object, I think.
This is a fiddle as an example on how to use it.
chart.xAxis[0].setExtremes(
Date.UTC(2007, 0, 1),
Date.UTC(2007, 11, 31)
);
Docs are here: http://api.highcharts.com/highstock#Axis.setExtremes
I am trying to fetch data between two dates using Ajax and displaying the graph using HighCharts.
Below is what i have tried so far;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<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() {
//default
$('#dynamic_data').change(function() {
var startdate = document.getElementById('startdate').value;
var enddate = document.getElementById('enddate').value;
});
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(id) {
$.getJSON("data/data-basic-colm-ajax.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/"><< Back to index</a>
<div class="menu_top" >
<div id="dynamic_data">
<input type="date" id="startdate">
<input type="date" id="enddate">
</div>
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
Here is my data-basic-colm-ajax.php file,
<?php
require '../../conn/connection.php';
$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];
$result = mysql_query('SELECT DISTINCT(membername), COUNT(membername)
AS member
FROM responses
WHERE timerecorded>=" . $startdate . " AND AND timerecorded<=" . $enddate . " GROUP BY membername;');
$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['membername'];
$rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysql_close($con);
Since i am new to Ajax so any help will be appreciated.
I'm not sure why you want change event on div, try change into this :
<div id="dynamic_data">
<input type="date" id="startdate">
<input type="date" id="enddate">
// add button
<input type="button" id="myBtn">
</div>
JS
// this function called after button was clicked
$('#myBtn').click(function(){
var startdate = $('#startdate').val(),
enddate = $('#enddate').val();
getAjaxData(startdate, enddate);
});
// i'm assume the queries from database already worked out
// simply use this below code to send parameter during request
function getAjaxData(startdate, enddate) {
$.getJSON( "data/data-basic-colm-ajax.php", { startdate: startdate, enddate: enddate }, function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
If you wanna display the chart at first load page, then call getAjaxData(startdate, enddate) with default value for date.
I am trying to pull data from mysql and display on highchart bar graph, but I am not sure where my code is incorrect. The result is a blank page.
The code could not be wrong as I have taken it from the index.html file that highchart provides, but it doesn't work for some reason. Could anyone check and let me knpw where I am making any error?
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<?php
$host="localhost";
$username="root";
$password="";
$db="isat";
// Create connection
$con = mysqli_connect($host,$username,$password,$db) or die("Error Message: <br>". mysqli_error($con));
$data=array();
$query= "SELECT standard FROM domainlist";
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_assoc($result)){
$data[]=$row['standard'];
}
?>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: [<?php echo join($data, ','); ?>]
},
series: [{
data: [],
pointStart: 0,
pointInterval
}]
}); $(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Compliance'
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});}); </script></head>
<body><div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div></body></html>
I am having difficulties to get the data received from PHP script and set it into the Gauge graph.
I am getting the json result correctly, just do not know how to set it to the right Highchart gauge variables (gaugeOptions).
I'd like to put in #container-C_2 the returned values from PHP, so configure the min, max and set the value on the gauge graph.
strong text
I think In the $.getJSON() body I need to call
$('#container-C_2').highcharts( with some arguments, but don't know how..
Can someone help me here?
Many thanks.
PHP
$result = array();
$result['name'][0] = 'A';
//--some values
$result['min'][] = 10;
$result['max'][] = 50;
$result['val'][] = 20;
$json = array();
array_push($json,$result);
print json_encode($json);
Client side:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
<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 gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '100%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.25, '#DF5353'], // red
[0.5, '#DDDF0D'], // yellow
[0.75, '#55BF3B'], // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
}; //-- gaugeOptions
// The C_1 gauge
$('#container-C_1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: -50,
max: 50,
title: {
text: 'graph 1'
}
},
credits: {
enabled: false
},
series: [{
name: 'C_1',
data: [-50],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver"> graph... </span></div>'
},
tooltip: {
valueSuffix: ' graph... '
}
}]
}));
// The C_2 gauge
$('#container-C_2').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: -50,
max: 50,
title: {
text: 'C_2'
}
},
series: [
{
name: 'C_2',
data: [45],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver"> graph... </span></div>'
},
tooltip: {
valueSuffix: ' graph... '
}
}
]
})); //--container-C_2
$.getJSON("query.php", function(json) {
//this WORKS!
alert("name, grow_rate: " + json[0]['name'] + ","+ json[0]['val'] );
//This seems not to have any effect
gaugeOptions.yAxis.min = json[0]['min'];
gaugeOptions.yAxis.max = json[0]['max'];
gaugeOptions.yAxis.title.text = 'JUST SOME TEXT...';
gaugeOptions.series[0] = {};
//gaugeOptions.series[0].name = json[0]['name'][0];
gaugeOptions.series[0].name = json[0]['name'];
gaugeOptions.series[0].data = json[0]['val'];
//-- stucked here, how can I passed retreived values to the graph?
// chart = new Highcharts.merge(gaugeOptions);
});
}); //-- ready()
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-C_1" style="width: 300px; height: 200px; float: left"></div>
<div id="container-C_2" style="width: 300px; height: 200px; float: left"></div>
</div>
</head>
<body>
</body>
</html>
var point = $('#container-C_2').highcharts().series[0].points[0];
point.update(json[0]['val']);
Instead of this
//This seems not to have any effect
gaugeOptions.yAxis.min = json[0]['min'];
gaugeOptions.yAxis.max = json[0]['max'];
gaugeOptions.yAxis.title.text = 'JUST SOME TEXT...';
gaugeOptions.series[0] = {};
//gaugeOptions.series[0].name = json[0]['name'][0];
gaugeOptions.series[0].name = json[0]['name'];
gaugeOptions.series[0].data = json[0]['val'];
I am using MVC for Entity Framework & developing aa application & I want to upload data from database to show it into highchart's column-drilldown chart ?
My Code For Binding is as below:
$result = mysql_query("select s.id, s.stage_name as stage, coalesce(sum(o.potential) * (s.stage_weight / 100),0) as w_pot FROM s_stages as s
left join opps as o
WHERE o.buy_stage = s.id");
$model["chart"]=array();
while($row = mysql_fetch_array($result)){
array_push($model["chart"],
array(
"id"=>$row["s.id"],
"name"=>$row["stage"],
"w_pot"=>$row["w_pot"]
));
}
and in view I have written code as below with its script code:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" class="span6" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories:
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
});
</script>
Try like this:
<html>
<head>
<title>Graph</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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
$result = mysql_query("select s.id, s.stage_name as stage, coalesce(sum(o.potential) * (s.stage_weight / 100),0) as w_pot FROM s_stages as s
left join opps as o
WHERE o.buy_stage = s.id");
$stagearray=array();
$wt_arr=array();
while($row = mysql_fetch_array($result)){
$sname="'".$row["stage"]."'";
array_push($stagearray,$sname);
array_push($wt_arr,$row["w_pot"]);
}
$categories=implode(",",$stagearray);
$ponts_str=implode(",",$wt_arr);
?>
<div id="container" class="span6" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stages'
},
subtitle: {
text: ''
},
xAxis: {
categories: [<?php echo $categories;?>]
},
yAxis: {
min: 0,
title: {
text: 'Points'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Stages',
data: [<?php echo $ponts_str;?>]
}]
});
});
});
</script>
</body>
</html>