Related
Hey guys I'm trying to attach a highchart in my blade template that looks like something like this
<body>
...
<div id="chart_div" style="width: 500px;height: 220px;"></div>
<div id="test_length">Test Length: </div>
<script type="text/javascript">
$(function () {
var myData = {!! json_encode($data['income_data']) !!};
$('#test_length').append(myData.length); //This shows the number on
var chart = Highcharts.chart('chart_div', {
credits: false,
title: {
text: ''
},
yAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
gridLineWidth: 1,
minorGridLineWidth: 0,
title: {
text: ''
},
},
plotOptions: {
series: {
animation: false
}
},
series: [{
showInLegend: false,
data: myData,
tooltip: {
valueDecimals: 5
}
}]
});
});//end onload
</script>
</body>
</html>
I did a dd(json_encode($data['income_data'])); and the output looks like this
var myData output
"[["2012-11-30","10154.01"],["2012-12-31","10332.01"],["2013-01-31","10622.72"],["2013-02-28","10865.79"],["2013-03-31","10939.57"],["2013-04-30","10967.78"],["2013-05-31","11159.82"],["2013-06-30","10981.49"],["2013-07-31","11229.1"],["2013-08-31","11220.21"],["2013-09-30","11443.22"],["2013-10-31","11901.36"],["2013-11-30","12125.58"],["2013-12-31","12322.39"],["2014-01-31","12386.36"]]"
I suspect it's something to do with how I am passing my data to the highcharts library between the encoding where it's an array and not a JSON. Any help would be much appreciated as I have been trying to solve this for hours with no luck!
I m trying to figure it out that is it possible to make the json data fetched dynamically from a database with the help of php and mysql and can be plotted with highcharts that too dynamic auto updating? Any help would be appreciated.
following the code i have tried and is not working properly and want to implement to the the website for 10 lines.
<HTML>
<HEAD>
<TITLE>highchart example</TITLE>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
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 2
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData1, 1000);
},
cache: false,
});
}
function requestData1() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series2 = chart.series[1],
shift = series2.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[1].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false,
});
}
$(function () {
$(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: '',
margin: 80
}
},
series: [
{
name: 'Random data',
data: []
},
{
name: ' hahaha',
data: []
}
],
});
});
});
</script>
</HEAD>
<BODY>
<div id="container"
style="min-width: 728px; height: 400px; margin: 0 auto"></div>
</BODY>
</HTML>
*** the live-server-data.php is as followed:
<?php
// Set the JSON header
header("Content-type: text/json");
// 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 = rand(48,52);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
You can try with
var options = {
chart: {
renderTo: 'chart',
},
credits: {
enabled: false
},
title: {
text: 'Impression/Click Overview',
x: -20
},
xAxis: {
categories: [{}]
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "json.php",
data: 'show=impression',
type:'post',
dataType: "json",
success: function(data){
options.xAxis.categories = data.categories;
options.series[0].name = 'Impression';
options.series[0].data = data.impression;
options.series[1].name = 'Click';
options.series[1].data = data.clicks;
var chart = new Highcharts.Chart(options);
}
});
The highcharts website has some useful articles about working with dynamic data. That is probably the best place to start.
http://www.highcharts.com/docs/working-with-data/preprocessing-live-data
http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database
Try something out, and if you have trouble, come back here with a more specific question showing what you have tried. As it stands, your question is too broad, and will probably get closed.
An ajax request for updating data looks something like:
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(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
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'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.