I am very new at highcharts. I am trying to make a basic graph showing bitcoin price. However, I'm stuck at the data part.
How do I get the data? And how would hourly, weekly and monthly data represent?
This is what I have till now with me.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
},
{
type: 'hour',
count: 1,
text: '12h'
},
{
type: 'hour',
count: 1,
text: '24h'
},
{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'all',
text: 'All'
}]
},
title: {
text: 'Vertcoin Price'
},
series: [{
name: 'VTC',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</html>
Any and all guidance will be helpful. I could not find any solution / tutorial to help me out.
You can provide your chart constructor with all the that you get via getJSON function and apply forced data grouping. Then you just need to update dataGrouping.units when needed (e.g. on button click).
$('#months').click(function() {
chart.update({
plotOptions: {
series: {
dataGrouping: {
units: [
[
'month', [1]
]
]
}
}
}
});
});
Live demo: http://jsfiddle.net/kkulig/avd0gqgr/
Docs reference: https://www.highcharts.com/docs/advanced-chart-features/data-grouping
API references: https://api.highcharts.com/highstock/plotOptions.line.dataGrouping
Related
I am trying to parse a piechart out of an json-object which I get by calling an API. I want to use a specific key-value pair for rendering of the piechart itself.
I then want to use some other key-value results in my tooltips.
Imagine the following scenario which works so far.
const labels = [
'Januar',
'Februar'
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: ["#0074D9", "#FF4136"],
data: [req('url').current_price.eur, req('url').current_price.eur],
}]
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
usePointStyle: true,
callbacks: {
title: function(tooltipItem, data) {
console.log(tooltipItem);
return "Index " + tooltipItem[0].label;
},
label: (context) => {
console.log('context', context);
return 'test'
}
},
},
},
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<html>
<meta charset="UTF-8">
<div>
<canvas id="myChart"></canvas>
</div>
</html>
So what I'm trying, is calling the API in data without the keys, so that I can access the object in context and use some of this values in my label for example.
I found the
parsing: {
yAxisKey: 'current_price.eur'
}
config but this isn't working for me if I change everything according to my idea, so that it renders the current_price.eur values
For pie/doughnut charts you need to specify the key option since it doesnt use any axes. So if you make your object like (together with latest version, 3.6.0) this it should work:
parsing: {
key: 'current_price.eur'
}
Example of object pie chart:
var options = {
type: 'doughnut',
data: {
datasets: [{
label: '# of Votes',
data: [{
id: 'parent1',
key: 55
}, {
id: 'parent2',
key: 55
}, {
id: 'paren3',
key: 30
}],
},
{
label: '# of Points',
data: [{
id: 'child1',
key: 55
}, {
id: 'child2',
key: 55
}, {
id: 'child3',
key: 30
}, {
id: 'child4',
key: 55
}, {
id: 'child5',
key: 55
}, {
id: 'child6',
key: 30
}],
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (`${ttItem.raw.id}: ${ttItem.raw.key}`)
}
}
},
parsing: {
key: 'key'
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
I want to display real time data in highcharts from my MYSQL database, I have tried methods like setInterval and setTimeout and chart.redraw() but cant seem to make it work.
I have also tried the dynamic update chart in highcharts link is here : enter code herehttps://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/dynamic-update but cant seem to convert random data syntax to my database data. my code is :
<html>
<head>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js">
</script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js">
</script>
<link rel="stylesheet" type="text/css" href="/public/oi chart.css">
</head>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.stockChart('container', {
options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
Highcharts.stockChart('container', {
rangeSelector: {
enabled: true,
selected: customRange,
buttons: [{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'week',
count: 2,
text: '2W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
text: 'All'
}]
},
time: {
timezoneOffset: timezone
},
events: {
load: function requestData() {
$.ajax({
url: 'temp_chart.js',
success: function(points) {
var series = chart.series,
shift;
$.each(series, function(i, s) {
shift = s.data.length > 1;
s.addPoint(points[i], true, true);
});
setTimeout(requestData, 1000);
chart.redraw();
},
cache: false
});
}
},
title: {
text: 'Temperature',
},
subtitle: {
text: 'temperature in maharashtra',
},
yAxis: {
title: {
text: 'temperature'
},
resize: {
enabled: true
}
},
xAxis: {
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
marker: {
enabled: false
},
label: {
connectorAllowed: false
},
}
},
series: [{
name: 'Mumbai',
data: []
}, {
name: 'Pune',
data: []
}],
};
$.getJSON('temp_chart.js', function(json) {
data1 = [<% data array %>];
data2 = [<% data array %>];
$.each(json, function(key, value) {
data1.push([value[0], value[1]]);
data2.push([value[0], value[2]]);
});
options.series[0].data = data1;
options.series[1].data = data2;
chart = new Highcharts.stockChart(options);
});
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</html>~
Notice that the load callback should be nested in the chart.events object config. API: https://api.highcharts.com/highcharts/chart.events.load
I can't export chart in highchart even though I have added exporting.js in vendor/bower/highcharts
This is my index
<?php
use app\assets\HighchartsAsset;
HighchartsAsset::register($this);
$this->title = 'Highcharts Test';
?>
<!-- DATA USIA 2012 RINCI FOR MAGISTER -->
<div class="container">
<div class="row">
<div class="x_panel">
<div id="containers2012usia" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<?php $this->registerJs("
$(function () {
$('#containers2012usia').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Jumlah Pelamar Magister Berdasarkan Usia Tahun 2012',
x: -20 //center
},
xAxis: $category2012usiaArray,
legend: {
enabled: false
},
yAxis: {
title: {
text: 'Jumlah'
}
},
tooltip: {
valueSuffix: '',
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
{
name: '<25',
data: $lessfaculty2012usia25,
},
{
name: '25-29',
data: $betweenfaculty2012usia25,
},
{
name: '30-34',
data: $betweenfaculty2012usia30,
},
{
name: '35-39',
data: $betweenfaculty2012usia35,
},
{
name: '40-44',
data: $betweenfaculty2012usia40,
},
{
name: '45-49',
data: $betweenfaculty2012usia45,
},
{
name: '>=50',
data: $morefaculty2012usia50,
},
{
name: 'NotComplete',
data: $notcomplete2012usia,
}
],
drilldown: {
series: $drilldown2012usiaArray
}
})
});
")?>
</div>
</div>
</div>
This is my HighchartsAsset
<?php
namespace app\assets;
use yii\web\AssetBundle;
class HighchartsAsset extends AssetBundle
{
public $sourcePath = '#bower/highcharts';
public $css = [];
public $js = [
'highcharts.js',
'highcharts-more.js',
'data.js',
'drilldown.js',
'exporting.js',
];
public $depends = [
'yii\web\JqueryAsset'
];
}
This is my chart
When I click download, the chart can't be downloaded. There is no response when I click download. What may I do so that I can export the chart? Thanks in advance
By default, Highcharts will send the data to it's own export server at export.highcharts.com. I would suggest using a tool such as Fiddler to examine the request/response, perhaps you have a firewall issue that is blocking the request?
If that's not acceptable - for example if your charts will contain sensitive company data, there are instructions here on how you can set up your own export server - it's not hard to do.
The snippet below displays tooltip like Colin Cockram : 601118.076 with the currency symbol.
How can i append my 3rd <td> values in this tooltip ?
Need tooltip like Colin Cockram : 601118.076 - Survey : 891.
How can i achieve this ?
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2);
}
},
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" style="display:none;">
<thead>
<tr>
<th></th>
<th> Test </th>
</tr>
</thead>
<tbody>
<tr>
<td>Gavin Leney</td>
<td>13592.400</td>
<td>39</td>
</tr>
<tr>
<td>Colin Cockram</td>
<td>601118.076</td>
<td>891</td>
</tr>
<tr>
<td>Alan Alker</td>
<td>152274.000</td>
<td>235</td>
</tr>
</tbody>
</table>
There is a better way to do this by making your data source as json objects rather than dataTable
Get your data to the chart using series
series: [{
data: [{
name: 'Gavin Leney',
y: 13592.400,
z: '39'
},{
name: 'Colin Cockram',
y: 601118.076,
z: '891'
},{
name: 'Alan Alker',
y: 152274.000,
z: '235'
}]
}],
and then you can get rid of your data
data: {
table: 'datatable'
}, //This is no longer needed as you are feeding data with series. Also, now you can get rid of your entire html for data table.
See the working code below: [NOTE: I have not added all the data in series.]
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) +' - <b>Survey</b>: '+ this.point.z;
}
},
series: [{
data: [{
name: 'Gavin Leney',
y: 13592.400,
z: '39'
},{
name: 'Colin Cockram',
y: 601118.076,
z: '891'
},{
name: 'Alan Alker',
y: 152274.000,
z: '235'
}]
}],
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
My solution is quite hacky jQuery wise. It's not done via the recommended highcharts way but I don't have that much time on hand to read through their documentations.
This piece of code searches for the TD with the text of the current point in the chart and then hops over two spots to get the number in the 3rd td element. The text is then included in the tooltip formatter
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) + ', Survey: '+ $('td:contains("'+ this.point.name +'")').next().next().text();
}
},
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
I am having an issue with rangeSelector in HighCharts/HighStocks. For some reason, smaller selections are disables or are getting disabled after making a range selection. My question is this, how can I make sure that all range selection buttons are active since data is available for a specific range.
Here is a fiddle example.
Any advice is much appreciated.
Here is an example of my rangeSelector:
rangeSelector: {
buttons: [{
type: 'minute',
count: 1,
text: '1m'
},{
type: 'minute',
count: 15,
text: '15m'
},{
type: 'minute',
count: 60,
text: '1h'
},{
type: 'day',
count: 1,
text: '1day'
}, {
type: 'month',
count: 1,
text: '1mo'
}, {
type: 'month',
count: 6,
text: '6mo'
},{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
Here's the data source you are using: http://www.highcharts.com/samples/data/usdeur.js
Note that the most granular it gets is one value per day. If highcharts let you zoom in to a day or less, it would just be displaying one value... not very useful.
This is expected behavior. With a more granular source, everything will be just fine!