im trying to style my flot charts similar to this:
this is my current chart:
here is my chart code,
<?php
include('Includes/connect.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf8"/>
<title>Index</title>
<script src="Includes/jquery-1.8.3.js"></script>
<script src="Includes/jquery.flot.js"></script>
<script src="Includes/jquery.flot.time.js"></script>
</head>
<?php
// Main query to pull data from 'tests' table
$sql = "SELECT UNIX_TIMESTAMP(`date`)*1000 AS unixDate,`date`, `test1`, `test2`, `test3`, `test4`, `test5`, `test6`, `test7`, `test8`, `test9`, `test10`, `test11`, `test12`, `test13`, `test14` FROM `tests` WHERE member_id = '1' ORDER by `date` ASC";
$result = mysql_query($sql) or die ("no query");
// Dataset1
while($row = mysql_fetch_assoc( $result )) {
$dataset1[] = array( $row['unixDate'], sprintf( "%.3f", $row['test1'] ));}
?>
<div id="chart1" style="width:700px;height:300px;"></div>
<script type="text/javascript">
//Chart1
var chart1Options = {
xaxis: {mode: "time", timeformat: "%Y-%m-%d"},
lines: { show: true, color: "#fff" },
points: { show: true },
grid: {
backgroundColor: { colors: ["#4ca8fa", "#2887da"] },
bordercolor: "#fff",
borderwidth: "60",
hoverable: true }
};
var dataset1 = { data: <?php echo json_encode($dataset1); ?>,};
$.plot($("#chart1"), [ dataset1 ], chart1Options);
</script>
</body>
</html>
can anyone help me out please? similar colours and also i cant seem to get hover data showing up either
thanks.
This should get you close to the appearance you want.
HTML:
<div id="placeholder" style="width:400px;height:300px;background-color: #6EB5F0"></div>
JS:
$(function () {
var plot = $.plot($("#placeholder"),[
{ data: [[0,0],[1,1],[2,4],[3,3],[4,5],[5,7],[6,9],[7,10],[8,8],[9,12]], color: 'white'}
], {
series: {
lines: { show: true, fill: true, fillColor: 'rgba(143, 198, 242, 0.7)' },
points: { show: true}
},
grid: { color: 'transparent' },
xaxis: {
color: 'white',
font: { color: 'white', family: 'sans-serif', size: 11}
},
yaxis: {
color: 'white',
font: { color: 'white', family: 'sans-serif', size: 11}
}
});
});
Result:
Fiddle here.
As far as your hover tooltips not working, there's a great example here. Follow that and if you still can't get it working, update your question with specifics and a minimal code sample that demonstrates the problem.
Related
I have recently started working on Highchart. I dont have indepth knowledge. But I am still trying my level best. I have tried few codes, but I didn't get any results. The browser console is not loading anything and it is showing blank. Can you please help me in pointing out what to do next. I tried my level best. Please me out.
Here is my code:
Database Coding: php.data
<?php
//open connection to mysql db
$connection = mysqli_connect("localhost","root","root","demo") or die("Error " . mysqli_error($connection));
//fetch table rows from mysql db
$sql = "select * from project_requests";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//close the db connection
mysqli_close($connection);
?>
index.php
<!DOCTYPE HTML>
<?php
include_once 'data.php';
?>
<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 () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Brands',
colorByPoint: true,
data: [
<?php
//$sql = mysqli_query("select * from project_requests")
while($res=mysql_fetch_array($sql)){
?>
['<?php echo $res['month']; ?>', 45.0],
<?php
}
?>
]
}]
});
});
</script>
</head>
<body>
<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; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
MY sql: Database Snapshot
Schema:: Demo Table:: project_requests
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 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 doing the temperature project needed to use flot to display the data. And I found guy doing almost same project as I did. Here is the link: temperature jquery flot
In the flot code, I replaced some code with data I wanted to put into .(only two place I replace, without getting php value to make it easy) like
var dat = [ [123456789, 20.9],[1234654321, 22.1] ];
yaxis: { min: 20, max: 20>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C " }},
Here is the code: Nothing happen when I display the html page. Please help !!
<!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>Flot For Project</title>
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="jquery.flot.js" language="javascript" type="text/javascript"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.time.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.colorhelpers.js"></script>
<script type="text/javascript" src="jquery.flot.canvas.js"></script>
<script type="text/javascript" src="jquery.flot.categories.js"></script>
<script type="text/javascript" src="jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="jquery.fillbetween.js"></script>
<script type="text/javascript" src="jquery.flot.image.js"></script>
<script type="text/javascript" src="jquery.flot.navigate.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
var dat = [ [123456789, 20.9],[1234654321, 22.1] ];
var options = {
xaxis: { mode: "
time ", timeformat: " % h: % M % d. % m. % y ", labelWidth: "
10 " },
series: {
lines: { show: true, fill: true, fillColor: "
rgba(0, 0, 0, 0.2)" },
points: { show: true, fill: false },
shadowSize: 5,
color: "
rgba(0, 0, 0, 0.8)"
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 20, max: 20>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C " }},
selection: { mode: "
x ", color: "
rgba(125, 0, 0, 0.6)" },
legend: { show: true, position: "
se ", backgroundOpacity: 0.4, backgroundColor: "
rgb(255, 255, 255)", labelBoxBorderColor: "
rgb(0, 0, 0)"},
};
var plot = $.plot($("#placeholder "),
[ { data: dat, label: "
Study Temp ", color:"
#333"} ], options);
var overview = $.plot($("#overview"), [{
data: dat,
label: "Min: °C, Max: °C",
color: "#333"
}], {
series: {
color: "rgba(0,0,0,0.8)",
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: "rgba(0,0,0,0.2)"
},
shadowSize: 0
},
xaxis: {
ticks: [],
mode: "time"
},
yaxis: {
ticks: [],
min: 0,
autoscaleMargin: 0.1
},
selection: {
mode: "x",
color: "rgba(125,0,0,0.6)"
},
legend: {
show: true,
position: "se",
backgroundOpacity: 1,
backgroundColor: "rgb(255,255,255)",
labelBoxBorderColor: "rgb(0,0,0)"
}
});
$("#placeholder").bind("plotselected", function (event, ranges) {
plot = $.plot($("#placeholder"), [dat],
$.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
}
}));
overview.setSelection(ranges, true);
});
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
var humanTime;
var jstime;
function showTimes(t) {
var datum = new Date(parseFloat(t));
humanTime = datum.toUTCString();
}
function showTooltip(x, y, contents) {
$('
' + contents + '
').css({
position: 'absolute',
display: 'none',
top: y + 25,
left: x + 0,
border: '2px solid #777',
padding: '2px',
'font-family': 'Arial',
'font-size:': '1.2em',
'font-weight': 'bold',
'background-color': '#ddd',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(0),
y = item.datapoint[1].toFixed(2);
showTimes(x);
showTooltip(item.pageX, item.pageY,
y + "°C (at " + humanTime + "+1000)");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
</script>
</head >
<body>
<div id="placeholder" style="height:400px;width=400px;">
</div>
<p>Flot Temperature realtime update.</p>
</body>
</html>
I formulate my answer here based on the comments.
First of all fix the "20>" value in the yaxis definition, then be sure that all the javascript files are in the same directory as the projectFlot.html file, and then that all the names correspond.
Another thing is that you are importing jquery.flot.js and jquery.js TWICE!
so remove the last line <script type="text/javascript" src="jquery.js"></script> and even the second <script type="text/javascript" src="jquery.flot.js"></script>.
I'm having a table in MySQL with the following data
Buy_client Amount
ABC 6597
XYZ 4479
PQR 2075
qqq 1706
ttt 1030
Other 450
I want to show the following data in a Pie Chart in High Charts. Someone please help me with this. I'm new to both PHP and HighCharts
Question 1: I need to Create a Pie chart from this data
Question 2: I'm using HighCharts for this. Someone please help me to do this in HighCharts
I have used the following code to do this but it doesn't show the info in a pie chart but just display the data in the web browser
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<?php
$con = mysql_connect("localhost","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("offlinesurv", $con);
$my_data = mysql_query("SELECT * FROM top_buy_clients");
while($row = mysql_fetch_array($my_data)) {
echo $row['buy_client'] . "\t" . $row['qty']. "\n";
}
?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: 'green',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [ <?php echo $row; ?>]
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
In your php...where you make the query to the database....in the while loop, you need to construct and string and in the end of the loop the string should looks like:
$my_data = "['ABC', 6597],
['XYZ', 4479],
['PQR', 2075],
['qqq', 1706],
['ttt', 1030],
['Others', 450] ";
Then in your javascript file, you should have a line like this
series: [{
type: 'pie',
name: 'Pie Data',
data: [
<?php echo $my_data; ?>
]
}]
It's very simple.
Saludos.