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.
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
});
}
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 have a chart build with jquery. I have correctly insert my data and the chart show it correctly. The code used is:
var plot = jQuery.plot(jQuery("#chartplace"), [{
data: fatturato,
label: "Fatturato",
color: "#069"
}, {
data: spese,
label: "Spese",
color: "#FF6600"
}], {
series: {
lines: {
show: true,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.15
}]
}
},
points: {
show: true
}
},
legend: {
position: 'nw'
},
grid: {
hoverable: true,
clickable: true,
borderColor: '#ccc',
borderWidth: 1,
labelMargin: 10
},
});
How can I insert a label for the x and y axis?
Thank you.
Assuming you are using jqPlot (not currently tagged jqPlot) you need to add the following options to the chart configuration object you are supplying
axes:{
xaxis:{
label:'Some X Axis label'
},
yaxis:{
label:'Some Y Axis label'
}
}
Documentation can be found at this link.
Your final configuration should look like
var plot = jQuery.plot(jQuery("#chartplace"), [{
data: fatturato,
label: "Fatturato",
color: "#069"
}, {
data: spese,
label: "Spese",
color: "#FF6600"
}], {
series: {
lines: {
show: true,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.15
}]
}
},
points: {
show: true
}
},
axes:{
xaxis:{
label:'Some X Axis label'
},
yaxis:{
label:'Some Y Axis label'
}
}
legend: {
position: 'nw'
},
grid: {
hoverable: true,
clickable: true,
borderColor: '#ccc',
borderWidth: 1,
labelMargin: 10
},
});
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"}.