Array adding new Series Highchart - php

This Code just Browser share name series..
series: [{
name: 'Man',
data: <?php echo json_encode($man_array,JSON_NUMERIC_CHECK) ?>
}, {
name: 'Women',
data: <?php echo json_encode($woman_array,JSON_NUMERIC_CHECK) ?>
}, {
name: 'Kind',
data: <?php echo json_encode($kind_array,JSON_NUMERIC_CHECK) ?>
}, {
name: 'User',
data:<?php echo json_encode($user_array,JSON_NUMERIC_CHECK) ?>
}]
Example
How can create series like series : women, series : man...help me please...
//Include Koneksi
$koneksi = mysqli_connect("localhost", "root", "", "simcard");
// $bulan = mysqli_query($koneksi, "SELECT bulan FROM penjualan WHERE tahun='2017' order by id asc");
//Membuat Query
$q=mysqli_query($koneksi, "SELECT * FROM penduduk");
$a=mysqli_query($koneksi, "SELECT * FROM card");
$man_array=array();
$woman_array=array();
$kind_array=array();
$user_array=array();
while($r=mysqli_fetch_array($q)){
$man_array[]= $r["man"];
$woman_array[]= $r["woman"];
}
while($f=mysqli_fetch_array($a)){
$kind_array[]=$f["kind"];
$user_array[]= $f["user"];
}
this one highchart code any wrong this code..?no used the color no problem.
$('#view').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
//stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
This Page View source html series.
series: [{
name: 'Man',
data: []
}, {
name: 'Women',
data: []
}, {
name: 'Kind',
data: []
}, {
name: 'User',
data:[]
}]
});
});

your chart will come like this,Fiddle sample. So replace with code below. Also check Data from a database
<?php
$man_array=array();
$woman_array=array();
$kind_array=array();
$user_array=array();
while($r=mysqli_fetch_array($q)){
$man_array[]= $r["man"];
$woman_array[]= $r["woman"];
}
while($f=mysqli_fetch_array($a)){
$kind_array[]=$f["kind"];
$user_array[]= $f["user"];
}
?>
series: [{
name: 'Man',
data: <?php echo json_encode($man_array,JSON_NUMERIC_CHECK) ?>,
color: 'red'
}, {
name: 'Women',
data: <?php echo json_encode($woman_array,JSON_NUMERIC_CHECK) ?>,
color: 'black'
}, {
name: 'Kind',
data: <?php echo json_encode($kind_array,JSON_NUMERIC_CHECK) ?>,
color: 'green'
}, {
name: 'User',
data:<?php echo json_encode($user_array,JSON_NUMERIC_CHECK) ?>,
color: 'blue'
}]

Related

How to create a highchart with 3 different series categories name

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/

How to add php data into highchart js file in php

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
});
}

Echo PHP Functions into Highcharts Drilldown

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?

Highcharts xAxis doesn't get the right time format

I created a chart combined with datepicker. that gets data out of a SQL database with datetime, open, high, low, close for the selected date.
I tested every single way to format the xAxis so that the unzoomed tickinterval is 1 hour like 7:00 8:00 9:00...
And I want to be able to zoom in so that the smallest interval is 1 minute like 7:00 7:01 7:02...
First problem is, that the format always keeps looking like yyyy-mm-dd hh:mm:ss for every single point. After changing the tickInvterval it looked better but still wrong and the zoom function for an 1 minute interval was not possible.
After splitting database into single date and time columns I solved the date problem, but obviously highchart still doesn't realize that it is a timeaxis, because xAxis settings look like this: (should display hh:mm but the chart displays hh:mm:ss)
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'},
tickInterval: 60},
At least it's not the intention to split the database, because there should be a way that i can use to change the sql datetime into a javatime format during the query process.
I searched for days now, but didn't find the right answer... maybe because I'm too new to this stuff... :)
This is the code to generate the chart:
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
options = {
chart:{
zoomType: 'x',
renderTo: 'container'
},
title: {
text: 'Charts',
style: {
fontFamily: 'Verdana',
fontSize: '20px',
fontWeight: 'bold'
}
},
subtitle: {
text: 'Chart 1',
style: {
fontFamily: 'Verdana',
fontSize: '15px',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
},
tickInterval: 60
},
yAxis: [{
labels: {
format: '{value}',
style: {
color: '#eeeeee'
}
},
title: {
text: 'Realtime',
style: {
color: '#eeeeee'
}
}
}, {
title: {
enabled: false,
text: 'Graph1',
style: {
color: '#4572A7'
}
},
labels: {
enabled: false,
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
},{
title: {
enabled: false,
text: 'Graph2',
style: {
color: '#89A54E'
}
},
reversed: true,
labels: {
enabled: false,
format: '',
style: {
color: '#89A54E'
}
},
opposite: true
}],
tooltip: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 1,
borderColor: '#666666',
crosshairs: true,
shared: true,
useHTML: true,
dateTimeLabelFormats: {
minute: '%H:%M'},
style: {
padding: 10,
fontWeight: 'bold'
},
formatter: function() {
var s = '<b><span style="font-size: 12px; color: #cccccc">'+ this.x +'</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
});
return s;
},
shared: true
},
legend:
{
enabled: true,
itemStyle: {
color: '#eeeeee',
}
},
credits:
{
enabled: false
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
},
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgb(204, 204, 204)'],
[1, 'rgba(204, 204, 204,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
name: 'Realtime',
type: 'area',
color: '#cccccc',
data: []
}, {
name: 'Graph1',
type: 'spline',
yAxis: 1,
color: '#0077cc',
enableMouseTracking: false,
data: []
}, {
name: 'Graph2',
type: 'spline',
yAxis: 2,
color: '#89A54E',
enableMouseTracking: false,
data: []
}]
}
$.getJSON('data.php', function(json) {
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
});
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$.getJSON("data.php?dateParam="+dateText, function(json){
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
}
});
});
and here is the php:
<?php
session_start();
?>
<?php
define('DB_SERVER',"localhost");
define('DB_NAME',"db");
define('DB_USER',"");
define('DB_PASSWORD',"");
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $con);
if (isset($_GET["dateParam"])) {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE datetime LIKE '".$_GET["dateParam"]."%'");
} else {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE DATE(datetime) = CURDATE()");
}
while($r = mysql_fetch_array($sql)) {
$result['datetime'][] = $r['datetime'];
$result['data1'][] = $r['open'];
$result['data2'][] = $r['close'];
$result['data3'][] = $r['high'];
}
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
You can use tickPositioner which allows to calculate ticks, dynamically http://api.highcharts.com/highstock#xAxis.tickPositioner
Your tickInterval is very small. It is set to 60 milliseconds. If you want the tickInterval to be one minute you need to set it to multiply by 10k:
tickInterval: 60 * 10000
That should solve it because even though you are saying to use '%H:%M' your resolution is much smaller.
Edit:
So, a few things. See this jsFiddle.
You need to set a start time (always good practice) and you need to tell it how much time between data points if you do not provide data as {x, y}. To do this you do:
series: [{
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 60000, //every minute there is data.
name: 'Realtime',
type: 'area',
data: [8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500]
}]
The important parts are pointStart and pointInterval. I also set the max zoom level to be one minute up in the chart: {} options:
maxZoom: 60000
Thank you so much, finally I got most functions and the problem was
options.xAxis.categories = json['datetime'];
BUT... :)
I'm recieving market data where some minute data are missing every single day, e.g. 7:00, 7:01, 7:03 and so on. and with an xAxis datetime format Highchart doesn't realize this and only counts up the time so that the last shown tick for example is 21:40 and not 22:00 as it should be.
That's why I wanted to recieve the x-values from the database datetime, which I obviously was not able to do.
Does anybody have an idea?
This is the code so far, working pretty fine:
$(document).ready(function() {
Highcharts.setOptions({
});
options = {
chart:
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgb(51, 51, 51)'],
[1, 'rgb(16, 16, 16)']
]
},
borderColor: '#666666',
borderWidth: 1,
borderRadius: 0,
zoomType: 'x',
maxZoom: 60000,
renderTo: 'container'
},
title:
{
text: 'Realtime',
margin: 50,
style: {
fontFamily: 'Verdana',
fontSize: '20px',
fontWeight: 'bold',
color: '#cccccc'
}
},
subtitle:
{
text: 'Chart 1',
style: {
fontFamily: 'Verdana',
fontSize: '15px',
fontWeight: 'bold',
color: '#CCCCCC'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'
}
},
yAxis: [{ // first yAxis
labels: {
format: '{value}',
style: {
color: '#eeeeee'
}
},
title: {
text: 'Realtime',
style: {
color: '#eeeeee'
}
}
}, { // Second yAxis
title: {
enabled: false,
text: 'Graph1',
style: {
color: '#4572A7'
}
},
labels: {
enabled: false,
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
},{ // Third yAxis
title: {
enabled: false,
text: 'Graph2',
style: {
color: '#89A54E'
}
},
reversed: true,
labels: {
enabled: false,
format: '',
style: {
color: '#89A54E'
}
},
opposite: true
}],
tooltip: {
xDateFormat: '%H:%M',
shared: true,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 1,
borderColor: '#666666',
crosshairs: true,
useHTML: true,
formatter: function() {
var s = '<b><span style="font-size: 12px; color: #cccccc">'+ Highcharts.dateFormat('%H:%M', this.x) +' Uhr</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
});
return s;
}
},
legend:
{
enabled: true,
itemStyle: {
color: '#eeeeee',
}
},
credits:
{
enabled: false
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
},
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgb(204, 204, 204)'],
[1, 'rgba(204, 204, 204,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
pointStart: Date.UTC(2010, 0, 1, 8),
pointInterval: 60000,
name: 'Realtime',
type: 'area',
color: '#cccccc',
data: []
}, {
pointStart: Date.UTC(2010, 0, 1, 8),
pointInterval: 60000,
name: 'Graph1',
type: 'spline',
yAxis: 1,
color: '#0077cc',
enableMouseTracking: false,
data: []
}, {
pointStart: Date.UTC(2010, 0, 1, 8),
pointInterval: 60000,
name: 'Graph2',
type: 'spline',
yAxis: 2,
color: '#89A54E',
enableMouseTracking: false,
data: []
}]
}
$.getJSON('data.php', function(json) {
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
chart = new Highcharts.Chart(options);
});
});
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$.getJSON("data.php?dateParam="+dateText, function(json){
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
chart = new Highcharts.Chart(options);
});
}
});
});

Convert Highchart to multiple y axis

I have a working graph using Highcharts with data from a mySQL database. I need it now to view the lines on different axis so that the chart is better laid out.
Here's my code and JSFiddle for the graph with my data:
http://jsfiddle.net/petenaylor/tGfau/3/
(function($){ // encapsulate jQuery
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['Electric', 'Oil', 'Gas'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 12
},
title : {
text : 'Energy Prices'
},
series : [{
name : 'Electric',
<?php
$result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error());
while ($row = mysql_fetch_array($result)) {
extract($row);
$date = strtotime($row['pDate']);
$date = $date."000"; // convert from Unix timestamp to JavaScript time
$data1[] = "[$date, $electric]";
}
?>
data: [<?php echo join($data1, ',') ?>],
tooltip: {
valueDecimals: 2
}
},{
name : 'Oil',
<?php
$result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error());
while ($row = mysql_fetch_array($result)) {
extract($row);
$date = strtotime($row['pDate']);
$date = $date."000"; // convert from Unix timestamp to JavaScript time
$data2[] = "[$date, $oil]";
}
?>
data: [<?php echo join($data2, ',') ?>],
tooltip: {
valueDecimals: 2
}
},{
name : 'Gas',
<?php
$result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error());
while ($row = mysql_fetch_array($result)) {
extract($row);
$date = strtotime($row['pDate']);
$date = $date."000"; // convert from Unix timestamp to JavaScript time
$data3[] = "[$date, $gas]";
}
?>
data: [<?php echo join($data3, ',') ?>],
tooltip: {
valueDecimals: 2
}
}]
});
});
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
/*yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},*/
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Electric',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Oil',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Gas',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
})(jQuery);
As you can see this works as it should, however, I need this to function like the below example. It's important that I have the y axis showing the values and the zoom must work. I have tried to adapt the below code with my own data but I get the issue unresponsive script. I think my data could be too much for the chart to handle.
http://jsfiddle.net/petenaylor/c73u5/5/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
var unit = {
'Rainfall': 'mm',
'Temperature': '°C',
'Sea-Level Pressure': 'mb'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot'
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
});
Can anyone help?
Many thanks
Pete
I think this is what you want: http://jsfiddle.net/mxrhS/
I did it by defining 3 yaxis, and then setting each series to use a different yaxis:
yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
and
series: [{
name: 'Electric',
yAxis:0,

Categories