Well, I assume for this answer that what you want to find out is only how to use PHP + a API to draw graphics, and you have already created all the dynamic recording and data from BD .
First of all I highly recommend reading the documentation from API jquery HighCharts , the link is also the original source of some information that I will pass here.
In the graph assembly I work with a file PHP ¹, mounting all the queries and returning all the data I want to display on the screen in fields <input type="hidden">
Now just work with JQuery . The function is customizable and you mount the type of chart you want
Explaining the HighCharts API
Highcharts is only based on native browser technologies and does not
requires client side plugins like Flash or Java. Furthermore you do not
need to install anything on your server. In PHP or ASP.NET. Highcharts
needs only two JS files to run: The highcharts.js core and either the
jQuery, MooTools, Prototype or Highcharts Standalone framework. The
Highcharts Standalone framework is designed for those who do not
already use jQuery, MooTools or Prototype in their web page, and wish
to use Highcharts with minimal overhead.
Highcharts and Highstock work in all modern browsers including mobile
devices and Internet Explorer from version 6. Standard browsers use
SVG for the graphics rendering. In Internet Explorer (IE8 and
before) graphics are drawn using VML.
Translated and interpreted from the original:
Highcharts is based on native browser technologies and
you do not need client-side plugins such as Flash or Java. Beyond
addition, you do not need to install anything on your server. In PHP or
ASP.NET. Highcharts needs only two JS files to run:
The core highcharts.js and, or the jQuery framework, MooTools, Prototype
or Highcharts Standalone. The Highcharts Standalone frame is designed
for those who do not yet use jQuery, MooTools or Prototype in their
web page, and want to use Highcharts with minimal overhead.
Highcharts and Highstock work on all modern browsers,
including mobile services and IE6 version. By default, the
SVG technology to render graphics. In the legendary IE8 and
graphic is drawn using VML technology.
Browsers that support HighCharts :
FrameworkthatworkwithHighCharts:
OBS1 : Querying and returning data can also be done with AJAX , in fact it could even simplify the work, but here it is at your command
OBS2 : Required to use libs:
- jquery.js;
- highcharts.js;
- exporting.js;
Usage example:
$(function () {
nota = new Array;
for (var x = 1; x <= 10; x++) {
nota[x] = parseInt(document.getElementById("nota"+x).value);
}
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: '10 Últimas alterações'
},
subtitle: {
text: 'Aluno'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
title: {
text: 'Notas'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
pointFormat: 'Nota do {series.name} <b>{point.y:,.0f}</b>'
},
plotOptions: {
area: {
pointStart: 0,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Aluno X',
data: [nota[1], nota[2], nota[3], nota[4], nota[5], nota[6], nota[7], nota[8], nota[9], nota[10]]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script><inputtype="hidden" id="nota1" name="nota1" value="5">
<input type="hidden" id="nota2" name="nota2" value="10">
<input type="hidden" id="nota3" name="nota3" value="10">
<input type="hidden" id="nota4" name="nota4" value="8">
<input type="hidden" id="nota5" name="nota5" value="2">
<input type="hidden" id="nota6" name="nota6" value="3">
<input type="hidden" id="nota7" name="nota7" value="7">
<input type="hidden" id="nota8" name="nota8" value="9">
<input type="hidden" id="nota9" name="nota9" value="8">
<input type="hidden" id="nota10" name="nota10" value="3">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
