I am new to HighCharts. I am making a pie chart with the data (JSON) coming form multiple php files. So i have used nested ajax calls. But I am stuck at how to integrate it into the chart data.
$.getJSON("php/footprint1.php", function(data1) {
$.getJSON("php/footprint2.php", function(data2) {
$.getJSON("php/footprint3.php", function(data3) {
$.getJSON("php/footprint4.php", function(data4) {
$.getJSON("php/footprint5.php", function(data5) {
$.getJSON("php/footprint6.php", function(data6) {
chart.series[0].data[0][1] = data1.reponse.numFound;
});
});
});
});
});
});
The chart goes like this.
chart = new Highcharts.Chart({
chart: {
renderTo: 'place2',
type: 'pie'
},
title: { align: 'center', text: 'Foot-Prints Detected' },
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 250,
verticalAlign: 'middle',
useHTML: true,
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
series: [{
name: 'Browsers',
data: [["BLOG",4],["PAID",4],["DIRECTORY",9],["WORDPRESS",7],["ADULT",7],["PHARMACEUTICALS",8]],
size: '100%',
innerSize: '75%',
showInLegend:true,
dataLabels: {
enabled: true,
formatter: function() {
return Math.round(this.percentage*100)/100 + ' %';
},
distance: -25,
color:'black'
}
}],
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'm understanding perfectly this part, but now I have more and different doubts:
How to implement draggable plugin? via json or building first the whole chart and parsing then data?
Here is how I'm using this plugin with a blank page as result:
$.getJSON("data.php", function(data) {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginRight: 130,
marginBottom: 25
},
title: {
text: '<?php echo strftime("%A %d de %B del %Y"); ?><?php echo " Turno:" . $turno; ?> ',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
text: 'powered by restaurax.com',
href: 'http://www.restaurax.com'
},
labels: {
items: [{
html: 'PAX/TURNO',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
tooltip: {
formatter: function() {
return Math.round(this.y);
}
},
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
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: data
});
});
});
With the above code draggable works fine, but I need also to set this code:
{
type: 'spline',
name: 'Max Pax',
data: [],
draggableY: true,
dragMinY: 0,
dragMaxY: 200,
cursor: 'ns-resize',
point: {
events: {
drag: function(e) {
// Returning false stops the drag and drops. Example:
/*
if (e.newY > 300) {
this.y = 300;
return false;
}
*/
$('#guardar').html(' <b> GUARDAR CAMBIOS </b>');
$('#guardar').css({ "backgroundColor":"red", "color": "black"});
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' +
this.category + '</b> to <b>' +
Highcharts.numberFormat(e.newY, 2) + '</b>'
);
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' +
this.category + '</b> was set to <b>' +
Highcharts.numberFormat(this.y, 2) + '</b>'
);
}
Should I set it up in json file? if not, where or how should I set up this pice of code?
Prev/next button:
Let's say previous part is finally working, then I need to be able to send to the php file a parameter to retrieve next or prev day and, of course, redraw the chart. It will look something like:
$('#next').click(function() {
$.getJSON("data.php$MYPARAMETER", function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
}
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"}.