First time messing around with HighCharts.js.
I'm pulling in a .csv and passing in the necessary arrays. They're populated and valid but the charts still aren't displaying.
function buildChartsUSD(dayLabelsArray, usdSeriesArray) {
$('#containerUSD').highcharts({
title: {
text: 'USD Daily Close',
x: -20 //center
},
subtitle: {
text: 'The Big Short',
x: -20
},
xAxis: {
categories: dayLabelsArray,
labels:{rotation: 90, x:-20}
},
yAxis: {
title: {
text: 'USD'
},
format: '{value:.2f}',
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
data: usdSeriesArray,
name: 'USD'
}]
});
};
The Y-axis would be values like 204000.83 - series data is getting a 'reference error data not defined' exception though the array usdSeriesArray is populated. Any help would be much appreciated! Thank you!
As pointed out by wergeld above, the issue had to do with the elements in the array. They should have been numeric and not strings. Hence,
[111, 222, 333,...] not ['111', '222', '333', ...]
Silly mistake and simple answer.
Related
I am trying to make a scatter plot with two serie names (subcategory).
This example from highcharts is my starting point.
In this example, you only have two categories, namely female and male. I would like to see the name of the female/male in the tooltip. Not in the legend!
In my example jsfiddle I added four names in the data and tooltip
I understand that this is not the correct way, but I would like to clarify what I want to achieve. Does anyone know how to process this correctly, so that there are still two categories in the legend (female/male), but in the tooltip also the name of the female/male.
Thank you so much already!
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'name: (), {point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{name: 'Anna', [161.2, 51.6]}, {name: 'Clair',[167.5, 59.0]]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{name: 'James',[174.0, 65.6], {name: 'Peet',[175.3, 71.8]]
}]
});
You have a fair number of errors with brackets and curly brackets, where there are too many or few brackets. Too many for me to point them all out, but mainly around the section area.
However, you need to define the scatter plot coordinates as x, and y when you define a name for the series, like this:
series: [{
name: 'Female',
data: [{
name: 'Anna'
x: 161.2,
y: 51.6
},
...
]
}
...
]
Also, to show the name of the datapoint (i.e. the person), you can use the following tooltip formatter:
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Name: {point.name}, {point.x} cm, {point.y} kg'
}
Highcharts API on scatter data: http://api.highcharts.com/highcharts/series.scatter.data
Working example using your data: http://jsfiddle.net/ewolden/0uc1g8b5/2/
Is it possible to change color of line for specified range in Highcharts? I have enclosed an image which presents expected result.
I know that I can use the separated series, but it's uncomfortable. Maybe there is some wrapper (plugin) which makes this process easier.
As I far as I know, there isn't any wrapper for that. I would to this in two steps:
calculate intersection points
use two separate series or multicolor-series plugin (multiple colors within one line).
I was able to find a demo of something similar to your image that may be what you are looking for (and a lot of other good examples with JS.Fiddles and code) I found this one here which uses this code:
$(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: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
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: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
});
});
and has a JS.Fiddle for it here. Hope that helps.
When selecting the "All"-range in a HighStock chart with technical indicators then
the stock price (AAPL stock price) is not listed (most of the time, sometimes it appears) in the tooltip.
Open the sample chart here: http://jsfiddle.net/laff/SRfW6/
Hover over the chart and notice that the stock price is listed in the tooltip.
Click on the 'All' range selection.
Hover over the chart and notice that the stock price is no longer listed most of the time in the tooltip.
Has anybody an idea what the problem might be?
This the code from the example:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$(function() {
$('#container').highcharts('StockChart', {
title : {
text : 'MACD of AAPL stock price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
yAxis: [{
title: {
text: 'Price'
},
height: 200,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'MACD'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
tooltip: {
crosshairs: true,
shared: true
},
rangeSelector : {
selected : 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name : 'MACD',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'MACD'
}, {
name : 'Signal line',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'signalLine'
}, {
name: 'Histogram',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'histogram'
}]
});
});
});
Just adding this code to plotOptions.series seems to fix it (JSFiddle demonstration):
dataGrouping: { }
It appears that given your original code dataGrouping was somehow null.
I'll be honest. I don't know why. Looks borderline buggy.
I am using Highcharts to show some statistic for my customer but I have problem when the customer select long data range
here is the first image for my highchart in the default view
and if I select too long date range here is the result
here is my code
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 50,
marginBottom: 80,
dataGrouping: {
enabled: true
}
},
title: {
text: 'Visits Statistics',
x: -20 //center
},
credits: {
text: '',
href: ''
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [<?php print $categories; ?>],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Visits'
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +' '+'</b><br/>'+ this.y +'Hit';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 10,
borderWidth: 0
},
series: [{name:'from 2011-09-1',data: [<?php print $visits; ?>]}]
});
});
});
Highcharts can automatically manage time values in the x-Axis, provided that your chart is configured correctly. The problem in your case is that you've told Highcharts to use your categories, and it shows all of the categories.
To set up your chart to avoid this, you'll need to do two things:
Set the x-Axis type to datetime
Make sure that your data is formatted correctly
Or, use pointStart and pointInterval if you can't mess around with the data.
Using your example:
// ...
xAxis: {
//remove categories and set type as 'datetime'
type: 'datetime',
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
// ...
series: [{
name:'from 2011-09-1',
// since you probably don't want to change your data, we leave it alone...
data: [<?php print $visits; ?>],
// ... and instead, set `pointStart` and `pointInterval`
pointStart: Date.UTC(2011, 8, 1), // September 1, 2011
pointInterval: 24 * 3600 * 1000 // each point is 1 day (measured in milliseconds)
}]
This is the source code
http://jsfiddle.net/m5cvH/
Im not really sure why but I cannot get the x axis to display the correct timestamp information, the timestamp data is in unix timestamp format.. And I also cant figure out how to get these two graphs to stack properly.
Also I would like to Datagroup this data using the datagrouping method provided by the Highcharts library.
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: container,
type: 'area',
marginRight: 130,
marginBottom: 85
},
title: {
text: 'Patron Count Spring 2012',
x: -20 //center
},
xAxis: {
categories: time,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
enabled: false
}
},
},
yAxis: {
title: {
text: 'Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: date
});
The times do not display correctly because javascript uses milliseconds - you need to multiply your time stamps * 1000.
in order to use data grouping, you need to use Highstock.
{{Edit:
in looking through your fiddle example, there are a variety of things happening that are not going to work right.
1) you can't combine categorical and datetime axes - it's one or the other. If you want your data to show on a datetime axis, you need to do the following:
make your timestamps milliseconds instead of seconds (as noted above)
you need to create your data array so that the x values are the time stamps, as opposed to having a separate array of timestamps. ie:
this:
"data": [3, 9, null]"
becoms:
"data": [[1370799000000,3], [1370802600000,9], [1370806200000,null]]"