I'm trying to display data from MYSQL.
I saw an example at http://www.blueflame-software.com/blog/using-highcharts-with-php-and-mysql/. How do I implement jQuery.get for my chart? Please I'm very new to jQuery and need lots of help thanks! Can someone get my chart to display the data?
html for chart
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
<script src="http://www.highcharts.com/js/adapters/prototype-adapter.src.js" ></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
var chart;
function create()
{
chart = new Highcharts.Chart({
chart: {renderTo: 'container', defaultSeriesType:'spline', height: 400},
title: {text: 'SEN-2 Bulkhead Isolation'},
xAxis: {title: {text: 'Frequency Hz'}, type: 'logarithmic'},
yAxis: {title: {text: 'Isolation dB'}, 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: 40, y: 100, borderWidth: 0, width: 300 },
series: [{
name: 'SSTP Keystone STEEL',
data: [[0.6,74.9 ],[0.895,81.74],[ 1.336,77.26],[ 1.993,76.81], [2.974,80.45 ],[4.438,69.41], [6.622,61.37],[9.881,79.07],[14.744,79.75],[20.000,72.33]],pointStart: 0.6
}, {
name: 'SSTP Keystone COPPER',
data: [[0.6,70.18 ],[0.895,85.57],[ 1.336,75.1],[ 1.993,76.09], [2.974,80.45 ],[4.438,67.32], [6.622,59.79],[9.881,72.37],[14.744,73.54],[20.000,72.8]],pointStart: 0.6
}, {
name: 'SSTP Keystone COPPER UTP antenna',
data: [[0.6,53.32], [0.895,56.53], [1.336,72.16], [1.993,65.82],[2.974,80.45],[4.438,63.16],[6.622,59.79],[9.881,69.63],[14.744,70.41],[20.000,73.45]],pointStart: 0.6
}, {
name: 'SSTP Keystone COPPER STP antenna',
data: [[0.6,62.33], [0.895,61.82], [1.336,79.92], [1.993,76.09],[2.974,76.18],[4.438,63.16],[6.622,61.37],[9.881,72.37],[14.744,74.68],[20.000,72.33]],pointStart: 0.6
}, {
name: 'absorber inside bundle shield',
data: []
}, {
name: 'Series6',
data: []
}, {
name: 'SEN-2 Baseline Isolation',
data: [[0.6,76.07], [0.895,90.28], [1.336,77.26], [1.993,82.58],[2.974,83.53],[4.438,74.63],[6.622,63.45],[9.881,76.86],[14.744,76.98],[20.000,72.33]],pointStart: 0.6
}],
});
}
function destroy()
{
if( chart ) {
chart.destroy();
delete chart;
chart = null;
}
}
document.observe("dom:loaded", function() {
$('destroy').observe("click", function(){destroy();})
$('create').observe("click", function(){create();})
create();
});
</script>
</head>
<body>
<a id="destroy" href="#">destroy</a> | <a id="create" href="#">create</a>
<div id="container" style="height: 400px; width: 900px"></div>
</body>
</html>
Okay, here's a complete solution:
<!DOCTYPE html><html><head>
</head><body>
<div id="container" style="height: 400px; width: 900px"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
jQuery(function($) {
var options = {
chart: {renderTo: 'container', defaultSeriesType:'spline', height: 400},
title: {text: 'SEN-2 Bulkhead Isolation'},
xAxis: {title: {text: 'Frequency Hz'}, type: 'logarithmic'},
yAxis: {title: {text: 'Isolation dB'}, 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: 40, y: 100, borderWidth: 0, width: 300 },
series: []
};
jQuery.get('data2.php', null, function(tsv) {
var data = {};
tsv = tsv.split(/\n/g); // split into rows
for (var row=0, rows=tsv.length; row<rows; row++) {
var line = tsv[row].split(/\t/g), // split into columns
series_name = line[0],
x = Number(line[1]),
y = Number(line[2]);
if (!data[series_name]) data[series_name] = [];
data[series_name].push([x,y]);
}
for (var series_name in data) {
options.series.push({
name: series_name,
data: data[series_name]
});
}
new Highcharts.Chart(options);
});
});
</script>
</body></html>
I tested it with this TSV data:
SSTP Keystone STEEL 0.6 74.9
SSTP Keystone STEEL 0.895 81.74
SSTP Keystone STEEL 1.336 77.26
SSTP Keystone STEEL 1.993 76.81
SSTP Keystone STEEL 2.974 80.45
SSTP Keystone STEEL 4.438 69.41
SSTP Keystone STEEL 6.622 61.37
SSTP Keystone STEEL 9.881 79.07
SSTP Keystone STEEL 14.744 79.75
SSTP Keystone STEEL 20.000 72.33
What I'm doing is looping thru the TSV and building the data variable like an associative array keyed on the series name, like this:
{
'SSTP Keystone STEEL': [[0.6,74.9],[0.895,81.74],...],
...
}
Then I am looping through the data variable and constructing options.series in the format that HighCharts expects - an array of objects with a name property and a data property.
Related
my code:
series: [{
name: 'Brands',
colorByPoint: true,
<?php
$models="SELECT * FROM purchase_info GROUP BY model_name";
$models_querry=mysql_query($models);
while($models_data=mysql_fetch_assoc($models_querry))
{
$model_name[]=$models_data['model_name'];
}
?>
data: [{
name: ['<?php echo join($model_name, ',') ?>'],
y: 56.33,
drilldown: 'Hero Honda'
}]
}],
In my project i'm using high charts, in that how can i add php data into that, i just collect all data and saved into one variable named as $model_name[], after that i pass the array value into data, but in that it will not spitted, all data's are echoed into single one.
Use ajax for that..see the script code
$.ajax({
type: "POST",
url: 'ajax.php',
success: function(data) {
a = jQuery.parseJSON(data);
i=0;
$.each( a.total_potential_score, function( key, val ) {
data1[i] = parseFloat(val);
i++;
});
rasterize_function(data1);
}
});
Ajax file look like this
$a[0] = "1";
$a[1] = "2";
$a1['total_potential_score'][0] = "1";
$a1['department_name'][0] = "aaaaa";
$a1['total_potential_score'][1] = "3";
$a1['department_name'][1] = "bbbbb";
echo json_encode($a1);
function for the highchart displayed here
function rasterize_function(data1) {
var seriesArray = [];
$.each( data1, function( key, val ) {
seriesArray.push({
name: "aaaa",
data: [val],
animation: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
});
});
$('#container').highcharts({
chart: {
type: 'column',
width: 700,
height: 400,
borderWidth: 0
},
title: {
text: 'sector',
align: 'left'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['College, Personal Development and Career Scores'],
},
yAxis: {
min: 0,
title: {
text: 'Potential Score'
}
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
verticalAlign: 'bottom',
x: 10,
y: 7,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
animation: false,
pointPadding: 0.2,
borderWidth: 0
}
},
series:seriesArray
});
}
In high chart Y axis i want to show some fraction values like 100/50, 100/70
100/90
Is it possible? please help me how to show that values.
$.getJSON('1.php?ID=' + <?php echo $Id; ?>, function(json) {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg,
marginRight: 130,
marginBottom: 25,
},
title: {
text: 'Lab',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'time',
tickPixelInterval: 007
},
yAxis: {
title: {
text: 'Lab'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
exporting: {
enabled: true
},
series: [{
name: 'Lab',
data: json.data,
datataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black',
}
}
}]
});
});
1.php have just MySQL retrial query
$sth = mysql_query("SELECT DateandTime,BP FROM table WHERE ID='".$Id."'");
You should be able to accomplish what I believe that you are indicating that you want by do a few things listed below.
First, you will need to restructure your JSON packet to include labels that Highcharts can use in a series, as follows:
var json = {
data: [ ["100/50",(100/50)], ["100/60",(100/60)], ["100/75",(100/75)], ["100/30",(100/30)] ]
};
Then you will need to make a few adjustments to your chart js, so that you override the default tooltip by adding this block inside the highcharts config object (right after the xAxis block is a good place for it):
xAxis: {
//some xAxis overrides here
},
tooltip: {
pointFormat: ''
},
What that does is basically tell highcharts to make the tooltip data point '', so in essence it isn't rendered but the label still shows up on your mouseovers.
That having been done, your yAxis labels will still be decimal values representing the range steps of the fractions, so you will either want to suppress that or handle it otherwise.
i'm starting to learn PHP, JavaScript, JQuery...
I need to make a graph, and I'm going to use HighCharts. I have a form with 3 select and a button. When i push the button, I want to display the graph. The function to make the graph is on the examples, but I don't know if I need to put the function in another PHP file, or JavaScript file, how to call the function and how to pass parameters...
The code to make the graph is this:
<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() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
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: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#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 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
});
</script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
Since you're not depending on any ajax calls to your server you don't need to involve PHP at all yet. Once you need to communicate with a database or do other server-side processing, that'll be where you need PHP.
Just put that code into the body of an html file (eg index.html) and it should work fine.
So i have chart like this http://jsfiddle.net/9uDmV/
I wrote function to get export link to xls
{
text: 'Download as xls',
onclick: function() {
location.href="getXLS.php?param1=param¶m2=para2";}
}
But i don't want to use GET as export because it's redirect me to page getXLS.
I want to make it like other functions (for example export to png, i click on it and download window appears)
I think I should use AJAX for this but don't know how exacly use it....
for saveing data to xls I will use http://phpexcel.codeplex.com/ but first I need to POST that data without reloading the page to getXLS.
count on you, guys!
and sorry for bad english ;-)
index_ajax.html
<!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.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'xy'
},
title: {
text: 'inbound datas'
},
subtitle: {
text: 'last ten days'
},
xAxis: [{
categories: ['2012-08-01', '2012-08-02', '2012-08-03', '2012-08-04', '2012-08-05', '2012-08-06', '2012-08-07', '2012-08-08', '2012-08-09', '2012-08-10', '2012-08-11', '2012-08-12']
}],
exporting: {
buttons: {
exportButton: {
menuItems: [{},
{},
{},
{}, /* leave standard buttons */
{
text: 'Download as xls',
onclick: function() {
$.get("ajax.php", { param1: "param1", param2: "param2" } );
}
}]
}
}
},
yAxis: [{
min: 0,
max: 100,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // High wind
from: 90,
to: 100,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'AR to get',
style: {
color: '#606060'
}
}
}],
title: {
text: 'AR'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
min: 0,
max: 8000,
gridLineWidth: 1,
title: {
text: 'Inbound',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
var unit = {
'AR': '% ',
'1': '1',
'2': '2',
'3': '3'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
yAxis: 1,
name: '1',
data: [2000, 1000, 3000, 2000, 1000]
}, {
yAxis: 1,
name: '2',
data: [4000, 7000, 4000, 6000, 5000]
}, {
name: '3',
type: 'spline',
color: '#F7801F',
yAxis: 0,
data: [90, 80, 70, 90, 85],
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
ajax.php
<?php
echo 'a prompt windows should apper';
?>
If I got it correct, you want to force a download instead of redirection? If so, add these headers to the top of getXLS.php
<?php
// We'll be outputting an excel file
header('Content-Type: application/vnd.ms-excel;'); // This should work for IE & Opera
header("Content-type: application/x-msexcel"); // This should work for the rest
// It will be called dataAsExcel.xls
header('Content-Disposition: attachment; filename="dataAsExcel.xls"');
?>
This will indicate the browser that you are sending a file of type excel, and the browser will hence prompt the user with a save as dialog box.
More about headers in php # http://php.net/manual/en/function.header.php
OK, how to do that:
Firtst, make function
function postajax(datas)
{
$.post('PHPExcel/export/ajax.php', datas, function(retData) {
$("body").append("<iframe src='PHPExcel/export/ajax.php' style='display: none;' ></iframe>");
});
}
now create button to download xls file
buttons: {
exportButton: {
menuItems: [{},
{},
{},
{}, /* leave standard buttons */
{
text: 'Download as xls',
onclick: function() {
postajax('My vaariable')
}
}]
}
}
And that's all, now download library from http://phpexcel.codeplex.com/
and you'r done!
Big thanks to #Jugal Thakkar for his help and patient!
I am loading data stored in a MySQL Database.
The chart doesn't show up on the webpage, but it doesn't show any other warning.
My PHP webpage returns a JSON encoded header with the following information:
["John Doe","2","Jane Doe","3"]
The script that loads the information is the following:
var chart;
function requestData() {
$.ajax({
url:'includes/bin/get_leaders.php',
success: function(point) {
alert(point);
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
chart.series[0].addPoint(point, true, shift);
},
cache: false
});
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
events: {load: requestData}
},
title: {
text: 'Top Agents'
},
xAxis: {
type: 'int',
title: {text: null}
},
yAxis: {
min: 0,
title: { text: 'Sales this Week', align: 'low'}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' sales';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 0,
backgroundColor: '#FFFFFF',
shadow: false
},
credits: {
enabled: false
},
series: [{
name: 'Sales' }]
});
});
});
Any clue what's going on?
Thank you!
Looks like you are passing in a ["string", "number", "string", "number"].
What you want is {2, 3} for your series and then for your xAxis to use a category list of {"John Doe", "Jane Doe"}.