I want to make a coinbase chart :
$.getJSON("Getprice.php", {}, function(data) {
Price = data[1]['date'];
$("#result").html(data[1]['date']);
alert(Price);
$('#container').highcharts({
title: {
text: 'July temperatures',
type: 'datetime'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Date',
data: Price,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: data[2],
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
And the chart can't show up here's the coinbase url :
https://www.coinbase.com/charts/price_history?days=365
I used in Getprice.php curl and header json just to get the page
A few clues
Your data should be JSON
date field should have name x, and time be timestamp (time in miliseconds)
value should have name y
Related
I have been trying to change Highmaps chart to bubble by adding
type: 'mapbubble', as below but failed
Is there any way to do it ? I dont know where went wrong
series: [{
type: 'mapbubble',
data: data,
Appreciate if anyone can help me to do that base on the code below
Link to jsfiddle
mapChart = Highcharts.mapChart('mapchart', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: The World Bank'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
// type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
series: [{
data: data,
mapData: mapData,
joinBy: ['iso-a3', 'code3'],
name: 'Current population',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
Replace point.value with point.z
data.push({
name: countries[code3].name,
code3: code3,
z: value,
year: year
});
Set chart.map prop to mapData:
chart: {
map: mapData
},
Create a new series which will be a background layer for bubbles.
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
},
Set the main series type to mapbubble
{
data: data,
type: 'mapbubble',
...
live example: https://jsfiddle.net/xf4tkec1/
Been trying to get Highcharts to work, but getting the JSON is not working...
My JSON is just copied data from their examples but on my own servers:
JSON Data
And my Javascript is:
$.getJSON('./servercount.json', function(data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
data: {
data: data
},
title: {
text: 'CakeBot Stats'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
type: 'area',
name: 'Servers',
data: data
},
{
type: 'area',
name: 'Members',
data: data
}
]
});
});
The graph just wont load: http://cakebot.club/stats
Any ideas?
I have this highchart graph displayed on my website. How can I set an interval for my x-axis? e.g. I want the fist value to be displayed and then skip the second and display the third.
Can this be done? Or do you always just HAVE to display all the data you're passing to the axis in an array?
My code: (timestamp is a JS array that contains my time. I can get that time in epoch format. act and temps are arrays for data to be plotted along y-axis)
$(function () {
$('#tempactgraph').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature & Activity Monitoring '
},
subtitle: {
text: 'Source: Cowlar Sensors'
},
xAxis: [{
categories: timestamp,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Activity',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} xx',
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: 'Activities',
type: 'spline',
connectNulls: 1,
yAxis: 1,
data: act,
tooltip: {
valueSuffix: ' xx'
}
}, {
name: 'Temperature',
type: 'spline',
connectNulls: 1,
data: temps,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
You need to Add a tickInterval:2 to your x-axis decleration like so
xAxis: [{
categories: timestamp,
crosshair: true,
tickInterval: 2
}],
Highcharts API Reference
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
In the chart described in this fiddle, the date-labels on the x axis are missing. Can anyone tell me why that is? The code in the fiddle is listed below:
$(function () {
var counts = [[635172879695710000, 383], [635172882696280000, 271], [635172885696780000, 274]],
averages = [[635172879695710000, 288774], [635172882696280000, 85592], [635172885696780000, 79455]],
ranges = [[635172879695710000, 12, 2760740], [635172882696280000, 12, 2761263], [635172885696780000, 12, 2761265]];
$('#container').highcharts({
title: {
text: 'Testing!'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
labels: {
format: '{value}B',
style: {
color: '#89A54E'
}
},
title: {
text: 'Size',
style: {
color: '#89A54E'
}
},
min: 0
}, {
labels: {
format: '{value}M',
style: {
color: '#4572A7'
}
},
title: {
text: 'Messages',
style: {
color: '#4572A7'
}
},
min: 0,
opposite: false
}],
tooltip: {
shared: true
},
series: [{
name: 'Line',
type: 'spline',
data: averages,
color: '#89A54E',
zIndex: 1,
marker: {
enabled: false
}
}, {
name: 'Area',
data: ranges,
type: 'areasplinerange',
lineWidth: 0,
linkedTo: ':previous',
color: '#89A54E',
fillOpacity: 0.3,
zIndex: 0
}, {
name: 'Count',
data: counts,
type: 'spline',
zIndex: 2,
color: '#4572A7',
yAxis: 1,
marker: {
enabled: false
}
}]
});
});
High charts is unable to parse the datetime that you have given.
Check console for the following error
Cannot call method 'substr' of undefined
Your dateTime seems to be micromilliseconds, which is not valid
635172879695710000
635172882696280000
635172885696780000
Try to change the format to milliseconds
check the timestamp they are invalid.
[timestamp, value]
updated your timestamps and got it working http://jsfiddle.net/BbZq7/7/