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!
Related
I currently new creating a highcart I just want to know if these possible in the highcart. I want to create a cart with 3 categories
3 Categories:
Low Priority
Medium Priority
High Priority
So if my categories is 3 so the bar is 3 also with different name and different datas.
In my console.log the data result shows.
My Output:
My Function Code:
$.getJSON('ajax/ams_sla_report_chart.php', function(data,name){
console.log(data);
var json_data = "";
var json_name = "";
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containers',
type: 'column',
inverted: false
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'SLA PERCENTAGE'
}
},
title: {
text: 'Priority Based on SLA'
},
series:[{
name:'Low Priority',
colorByPoint: true,
data:data[0]
},
{
name:'Medium Priority',
colorByPoint: true,
data:data[1]
},
{
name:'High Priority',
colorByPoint: true,
data:data[2]
},
]
});
json_data = chart.series.data = data;
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders_eng input').on('input change', function () {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
});
Output must be:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'SLA BASED ON PRIORITY AND PERCENTAGE OF HIT'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Low',
'Medium',
'High',
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'SLA BASED ON PERCENTAGE (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'CLOSE MR',
data: [49.9, 71.5, 106.4]
}, {
name: 'OPEN MR',
data: [83.6, 78.8, 98.5]
}, {
name: 'TOTAL MR HIT',
data: [48.9, 38.8, 39.3]
}, {
name: 'TOTAL MR HIT AVERAGE',
data: [50, 38.8, 39.3]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You need to preprocess your data to the format required by Highcharts:
var data = [
['Low Priority', 100, 9],
['Medium Priority', 100, 2],
['High Priority', 100, 1]
],
categories = [],
series = [];
data.forEach(function(arr) {
arr.forEach(function(el, i) {
if (i === 0) {
categories.push(el);
} else if (series[i - 1]) {
series[i - 1].data.push(el)
} else {
series.push({
data: [el]
});
}
});
});
Highcharts.chart('container', {
...
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/xu6wy910/
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
});
}
I have 2 functions that generate "drill down" data for highcharts presentation.
If I run the functions outside of the highcharts javascript and use then manually inset the data generated (as below) into the javascript the chart works fine:
$(function () {
Highcharts.theme = {
chart: {
height: 480,
//margin: [0, 0, 0, 0],
spacingTop: 30,
spacingBottom: 20,
spacingLeft: 0,
spacingRight: 20,
renderTo: 'this_week_chart',
type: "line",
style: {
//fontFamily: "Open Sans"
font: '"Open Sans","Source Sans Pro",Helvetica,sans-serif'
}
}
};
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart({
series: [{
type: "column",
index: 0,
name: "Total Sales Value (inc. tax)",
data:
[
{name: 'Monday', y: null, drilldown: 'Monday'},
{name: 'Tuesday',y: 890, drilldown: 'Tuesday'},
{name: 'Wednesday',y: 1150.5, drilldown: 'Wednesday'},
{name: 'Thursday',y: 1519.5, drilldown: 'Thursday'},
{name: 'Friday', y: null, drilldown: 'Friday'},
{name: 'Saturday', y: null, drilldown: 'Saturday'},
{name: 'Sunday', y: null, drilldown: 'Sunday'}
]
}],
drilldown: {
series:
[
{name: 'Monday',id: 'Monday',data: []},
{name: 'Tuesday',id: 'Tuesday',data: [['17',67],['18',95.5],['19',185],['20',228],['21',209],['22',98],['23',7.5]]},
{name: 'Wednesday',id: 'Wednesday',data: [['17',26],['18',176.5],['19',135.5],['20',248],['21',215],['22',277],['23',72.5]]},
{name: 'Thursday',id: 'Thursday',data: [['0',null],['17',22],['18',111.5],['19',383],['20',211],['21',456.5],['22',157],['23',178.5]]},
{name: 'Friday',id: 'Friday',data: [['0',90],['17',158],['18',203],['19',324.5],['20',509],['21',290.5],['22',5],['23',27.5]]},
{name: 'Saturday',id: 'Saturday',data: [['1',69]]},
{name: 'Sunday',id: 'Sunday',data: []}
]
},
tooltip: {
borderRadius: 5,
shared: true
},
legend: {
enabled: false
},
plotOptions: {
arearange: {
tooltip: {
followPointer: true
}
},
series: {
dataLabels: {
style: {
fontWeight: "normal",
fontSize: "10"
}
}
},
column: {
dataLabels: {
format: '${y:,.0f}',
enabled: true,
}
}
},
yAxis: {
labels: {
format: '${value:,.0f}'
}
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%a, %b %e'
}
}
});
});
</script>
If I insert the data as variables however (as follows) the code no longer works:
</script>
<script type="text/javascript">
$(function () {
Highcharts.theme = {
chart: {
height: 480,
//margin: [0, 0, 0, 0],
spacingTop: 30,
spacingBottom: 20,
spacingLeft: 0,
spacingRight: 20,
renderTo: 'this_week_chart',
type: "line",
style: {
//fontFamily: "Open Sans"
font: '"Open Sans","Source Sans Pro",Helvetica,sans-serif'
}
}
};
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart({
series: [{
type: "column",
index: 0,
name: "Total Sales Value (inc. tax)",
data:
<?php produce_HC_simple_drill_top($HC_SERIES_BY_DAY, "DAY", "TOTAL_SALES");?>
}],
drilldown: {
series:
<?php produce_HC_simple_drill_bottom_hour($HC_SERIES_BY_DAY,"DAY","TOTAL_SALES", "SALE_HOUR", "TOTAL_SALES", $This_wk_starts, $This_wk_ends); ?>
},
tooltip: {
borderRadius: 5,
shared: true
},
legend: {
enabled: false
},
plotOptions: {
arearange: {
tooltip: {
followPointer: true
}
},
series: {
dataLabels: {
style: {
fontWeight: "normal",
fontSize: "10"
}
}
},
column: {
dataLabels: {
format: '${y:,.0f}',
enabled: true,
}
}
},
yAxis: {
labels: {
format: '${value:,.0f}'
}
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%a, %b %e'
}
}
});
});
</script>
This makes no sense as I've inserted data generated by PHP into highcharts before without using drilldowns and everything works fine. I can't figure out what is wrong here at all, can anyone help?
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.
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"}.