Basically, I'm wanting to display the current temp of a city in highcharts, alongside the comparison of the expected minimum and maximum temperatures.
Currently this is my ajax request on the data, the data is then stored in a variable 'owDataJSON' which I manipulate.
$.ajax({
dataType: "jsonp",
type:'GET',
url: "http://api.openweathermap.org/data/2.5/......",
data: Object,
success: function(owData){
owDataJSON = owData;
max = owDataJSON.main.temp_max;
temp = owDataJSON.main;
min = owDataJSON.main.temp_min;
console.log(owData)
}
});
I then draw the chart using -
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //
},
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: [{
data: //what goes here?
}]
});
});
I'm wanting to know how to draw the chart? I've tried to iterate through an array but that doesn't appear to be working, the JSON data called from the URL is constantly changing so it's dynamic. I've also tried to pass 'owData' into the highcharts function and call it in the data property of series, still can't seem to get it going.
Basically when I output the data I want, I'm given a JSON object like such -
{temp: 301.15, pressure: 1007, humidity: 74, temp_min: 301.15, temp_max: 301.15}
Which is in correct highcharts format (I think), I want to print onto highcharts - the current temp, the min temp and the max temp. Any help would be greatly appreciate as I'm stuck on what to do next.
Thank you
You have to pass data to series as array of objects, so for example if you want to write chart with average temperatures per month in London you need to pass:
series: [{
name: 'London',
data: [10, 12, 16, 17, 16, 18, 22, 18, 15, 3, 4, 5]
}]
Next city will be next object in series array.
Here is full working example, and modified with dynamic data example2
Related
I am trying to develop a multi axis combo graph using highcharts api with months in x-axis and multiple y axis with 2 axes having percentages and 1 having number. This is similar to what you see in this link. This works fine when you have the y axes data for all 12 months. In some cases y axes data for few months are missing. In that case I still want to show the month in the x axis with no data. Currently if I have y axes data for only 2 months (say June and December), it would show as the data for Jan and Feb instead. Please find the code which I'm using and let me know what can be the resolution for this.
var chartMonthlyData = {
title: {
text: ''
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{
min: 0,
max: 50,
labels: {
format: '{value} %'
},
title: {
enabled: false
},
opposite: true
}, {
title: {
text: '',
},
labels: {
formatter: function () {
return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}, {
min: 0,
max: 50,
title: {
enabled : false
},
labels: {
enabled: false
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'right',
x: -30,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
color: '#C8102E',
name: 'Delivered',
type: 'column',
yAxis: 1,
data: deliveredMonthly,
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>'
+ '{point.y}' +'</b><br/>'
}
}, {
color: '#AAAAAA',
name: 'Open Rate',
type: 'line',
yAxis: 2,
data: openRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}, {
color: '#5891c8',
name: 'Clickthrough Rate',
type: 'line',
data: clickThroughRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}]
}
In this image, actual months in x axis are January, June and August. I need the 12 months to be shown in the graph with the y axes data properly tied with months.
Get proper data from server side or update the data before providing to highcharts
data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],
add or substitute null to data series with no values corresponding to month in order to have series length same as categories
Fiddle demo
Simply add max parameter inside xAxis object.
API Reference:
http://api.highcharts.com/highcharts/xAxis.max
Example:
http://jsfiddle.net/xkqn4qq7/
There are multiple ways to format your data such that the gaps show up. You can use a 2 dimensional array:
var deliveredMonthly =[[0,4],[5,5],[7,2]],
You can use an array of objects, setting the x & y:
openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}],
And, you can populate a one dimensional array with nulls for your missing data points.
clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50];
In order to guarantee you have all 12 months, you should set the min and max on the xAxis
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
crosshair: true,
min:0,
max:11
}],
http://jsfiddle.net/v159gw36/2/
Im trying to add a plot line to a line chart. When the data is same e.g [7.0, 7.0, 7.0] the plot line doesn't show. But when the data is up and down then the plot line shows e.g [7.0, 8.0, 7.0]. Is there a way to make the plot line show when the data is the same? JSFiddle
My high chart set up is:
$(function () {
$('#container').highcharts({
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:10,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 7.0, 7.0, 7.0]
}]
});
});
Your problem is connected with how your yAxis look right now. When you have the same y value of your data, your yAxis has the same min and max. For example if you have data: [7.0, 7.0, 7.0, 7.0], your yAxis min and max is equal to 7.
If your plotLine has value:10, you cannot see it in your chart. To see this plotLine you can manually set min and max of your yAxis:
yAxis: {
min: 5,
max: 10,
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 10,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
}]
},
Here you can see an example: http://jsfiddle.net/g34pk5tc/3/
To make possibility of changing extremes in your yAxis, better idea will be to add series with invisible point, where y value of this point will be equal to value of your plotLine. Here you can see an example how it can work:
function(chart) {
chart.addSeries({
showInLegend: false,
enableMouseTracking: false,
data: [10],
marker: {
enabled: false
}
})
}
http://jsfiddle.net/g34pk5tc/4/
I have a column chart that shows the trade balance between the US and other countries over time.
I need the ability to show on the right side of the chart that positive numbers are imports (positive trade balance) and that negative numbers are exports (negative trade balance).
A badly written start can be seen in this fiddle
I'm attempting to add the import/export labels with the following (ugly) code:
yAxis: [{
title: {
text: 'Millions of Dollars'
}
},{
opposite: true,
title : {
rotation: 0,
text: 'Imports',
x: 17,
y: -48
}
},{
opposite: true,
title : {
rotation: 0,
text: 'Exports',
x: -40,
y : 5
}
}]
I'm looking to create something like a category on the yAxis for positive and negative values to label positive values as imports and negative values as exports.
Would like to keep in highcharts so all the nice options that come with highcharts (download, etc) shows this secondary yAxis labels as well.
Is there something simple I'm missing to make this work?
Thanks!!
Since you didn't your own solution, here's my own dirty hacky solution which is probably worse, but you at least don't need to specify positions for the axes (sort of).
The idea is to add an extra category with no name, add another series with 2 points with an x value of that category and a name being "import" and "export".
You could eventually derive the values of these 2 "hidden" points based on the data you have so they can adjust automatically. It's dirty but it works.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Widget trade balance'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
""
],
crosshair: true
},
yAxis: [{
title: {
text: 'Millions of Dollars'
}
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
type: "scatter",
color: "transparent",
data: [ { x:12, y:20,name:"Imports" }, { x:12, y:-20,name:"Exports" } ],
showInLegend: false,
dataLabels: {
enabled: true,
formatter: function () { return this.point.name; },
y: 10
}
},
{
name: 'Canada',
data: [-83.6, -78.8, -98.5, -93.4, -66.0, -44.5, -105.0, -104.3, -91.2, -83.5, -106.6, -92.3]
}, {
name: 'Mexico',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'England',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
See fiddle http://jsfiddle.net/r2etx98t/
I ended up using the following to manually position the text
See working http://jsfiddle.net/0s17qt56/4/
excerpt below
labels: {
items : [{
html : 'Imports',
style : {
left: '710px',
top : '130px'
}
},{
html : 'Exports',
style : {
left: '710px',
top : '70px'
}
}]
},
I'm really new to javascript and Highcharts so really sorry if this is a dumb question.
I have an object (called val) like this:
Object {month: Array[12], corporate: Array[12], family: Array[12], party: Array[12]}
Each array includes sales value over time for corporate/family/party.
I want to create a line chart in Highcharts with 3 lines (corporate, family, party) over time.
Below is my code:
$(function () {
$('#expandable-3').highcharts({
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: val
});
});
The chart is showing blank.
Could someone please help me on how to get this work?
Thank you.
If you view the options on the highcharts demo you can see how the series is specified. Highcharts basic line demo
You could change val to something like this:
var val = [
{
name: 'corporate',
data: [1,2,3]
},
{
name: 'family',
data: [1,2,3]
},
{
name: 'party',
data: [1,2,3]
}
];
To convert your data use something like:
Object.keys(val).map(function (key) {
return {
name: key,
data: val[key]
};
});
I am trying to plot a graph using high charts. I need to get colour changed based on the flag values .
I tried using this but I am getting only points are changed based on the flag, but I am not getting the line coloured .
here is my code.
$(function () {
var getColor = {'g' : '#008000',
'r' : '#FF0000',
'b' : '#000000'};
$('#container').highcharts({
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: 'London',
data: [{y:3.9,flag:0,color:'#000000'},{y:4.2,flag:0,color:'#000000'},{y:5.7,flag:1,color:'#008000'},{y:8.5,flag:0,color:'#000000'},{y:11.9,flag:0,color:'#000000'},{y:15.2,flag:0,color:'#000000'},{y:17.0,flag:0,color:'#000000'},{y:16.6,flag:0,color:'#000000'},{y:14.2,flag:2,color:'#ff0000'},{y:10.3,flag:0,color:'#000000'},{y:6.6,flag:1,color:'#008000'},{y:4.8,flag:2,color:'#ff0000'}]
}]
}/*,function(chart){
$.each(chart.series[0].data,function(i,data){
if(data.flag == 0){
console.log('green');
color : getColor['g']}
if(data.flag ==1){
console.log('black');
color : getColor['b']}
if(data.flag == 2){
console.log('red');
color : getColor['r']}
});
}*/);
});
please help me out. need to get the colored line along with the point.. i m not getting where i m doing wrong, plzzzz help me.
You can use Multicolor series plugin, for example: http://jsfiddle.net/sz0esszz/11/
Simply change type of the series to coloredline and for each of the points set segmentColor, which defines line color between current point and next point.