highcharts basics - highcharts

I have the following data fetched in the array using php and my sql
Array
(
[name] => Array
(
[0] => a
[1] => b
)
[data] => Array
(
[0] => Array
(
[0] => 0
[1] => 1
[2] => 2
[3] => 3
[4] => 4
[5] => 5
[6] => 6
)
[1] => Array
(
[0] => 34
[1] => 35
[2] => 36
[3] => 37
[4] => 38
[5] => 39
[6] => 40
)
)
)
I am new to highcharts and jquery.
The function for the line plot is
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
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]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
</script>
I don't know how to pass my data for a and b so that it can line plot
Need it urgent .. thanks

Use the following to get your array parsed to js.
var data = jQuery.parseJSON(' <?php echo json_encode($yourArray, JSON_NUMERIC_CHECK); ?> ');
Than you can put it inside your serie like the following.
series: [{
'name': data.name[0],
'data': data.data[0]
}, {
'name': data.name[1],
'data': data.data[1]
}]

Related

Add a hyperlink to stockChart in highcharts

I am looking for the options to add a hyperlink to the stock chart. So that a user can click anywhere on the chart and redirect to another page.
Not on the series, I would like to add hyperlink on the chart itself.
You need to call function on your highchart container div.You can use following function.
$("#container").on("click", function(){
window.open('http://google.com', '_blank');
// You can also use if not cross domain request
//window.location.href='http://google.com';
});
Refer this fiddle link for example
Simply make your rendering element an <a> element with a href attribute pointing to where you wish to take users (just like any other hyperlink). Just make sure that this <a> element has a display property set as block:
$(function () {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
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]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
#container {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Note that for this example I've used Highcharts' own Basic Line Chart demo.

high chart X-axis values regardless series data [duplicate]

This question already has an answer here:
Highcharts - Force Categories in x-axis to be shown, even without data
(1 answer)
Closed 6 years ago.
I have following jsFiddle
http://jsfiddle.net/9v636zt3/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
Using highcharts, I want to show the x-axis labels 0.0001,0.001,0.01,0.1,1,10,100 in series. but does not show it some how.
How can I force to show all the x-axis values?
Please help.
I think you are missing something i was able to plot your chat with the data you supply using this code below.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100],
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5,0,0,0]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});

Cannot display a legend with special character in highchart from the serie name

I have a serie name with special character that I cannot change. How I can show it? I tried legend: { useHMTL: true }, but it's not working.
My code is here:
$(function () {
$('#container').highcharts({
title: {
useHTML: true,
text: 'Monthly Average Temperature'
},
subtitle: {
useHTML: true,
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
title: {
text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
},
layout: 'vertical',
x: -10,
y: 100
},
series: [{
name: '<Tokyo>',
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]
},{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
http://jsfiddle.net/4x6susks/
It isn't working to <Tokio> legend
Replace in name: < with <. Otherwise legend will use that name as tag (like <span> or <div>). See demo: http://jsfiddle.net/4x6susks/3/

Set at the same level the unit of two yaxis highcharts

I would like to set at the same level 2 yAxis with highcharts. Because it's difficult to explain what I want, this picture should help you to understand :
I want to align the two "0" value of my 2 charts.
This is my current code :
$(function () {
$('#tresorerieChart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // First yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Third yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
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],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
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],
tooltip: {
valueSuffix: '°C'
}
},
{
name: 'Temperature',
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],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
Thanks in advance.
Long time ago I have created example how to align two yAxis to the same value, you can find this here: http://jsfiddle.net/5m9JW/414/
Code responsible for linking axes:
var i = 15;
while (chart.yAxis[1].translate(0) != chart.yAxis[0].translate(0) && i > 0) {
chart.yAxis[0].setExtremes(chart.yAxis[0].getExtremes().min - chart.yAxis[0].translate(chart.yAxis[1].translate(0), true));
i--;
};

Highcharts jquery syntaxt in IE 8 not working

When using the jquery syntax $('#container').highcharts(...) and I later want to get a reference to the chart I get an error in IE 8. Example:
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
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]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$('#container').highcharts().showLoading();
The final line fails in IE 8 (works in IE 10 + chrome etc) using version 3.0.1 og highcharts and 1.9.1 of jquery. Is this not the recommended way?
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
Timestamp: Tue, 30 Apr 2013 08:07:37 UTC
Message: 'highcharts()' is null or not an object
Line: 66
Char: 9
Code: 0
URI: http://s3-eu-west-1.amazonaws.com/mala/highcharts.html

Resources