I'm developing a web page with multiple charts using Highcharts. Every chart is using a different worksheet as a feed for its data.
Is there an easy way to make only one call to Google sheets to get the whole sheet in one call and then use the response to feed every single chart?
Here is a sample jsFiddle
// Create the chart
Highcharts.chart('container', {
title: {
text: 'Highcharts data from Google Spreadsheets'
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 1
}
});
// Create the chart
Highcharts.chart('container2', {
title: {
text: 'Second chart'
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 2
}
});
Related
Using Highstock, I wish to draw a candlestick chart over a line chart.
I know it sounds weird, but I need to rotate the candlestick chart by 90 degrees clockwise.
The code I have now is:
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/new-intraday.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL stock price by minute'
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
},{
name: 'TEST',
type: 'line',
data: data
}]
});
});
JSFiddle here
What I want to get is the following (something like...):
Any (simple) idea?
Highstock is not adapted to this kind of customization. The only simple way seems to be creating two overlapping charts - one inverted and one with transparent background, but we have to take into account many limitations, like for example tooltip.
chart: {
inverted: true,
...
}
Live demo: https://jsfiddle.net/BlackLabel/nb1jyaq5/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
I have a dataset with the date indicated in the style of »2020/01/01«. Now, my Fiddle displays the corresponding data correctly considering the time/year (the right part climbs very steeply):
Pretty much the same code in the original PHP version however does not display it the correct way:
The code is really almost the same:
$.get('graph_global_ch4_concentration_800000.csv', function(data)
{
var chart = new Highcharts.Chart(
{
chart:
{
renderTo: "div_graph_ch4",
type: "spline"
},
xAxis:
{
tickWidth: 0,
tickInterval: 100000
},
data:
{
csv: data
},
});
});
Why is it that the fiddle does it the right way, and my PHP file not?
Thanks for any hints!
So I built a Highcharts application which looks somewhat like this:
https://codesandbox.io/s/angular-opcho
the chart looks like this:
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
data1;
data2;
chartOptions = {
title: {
text: "Global temperature change"
},
subtitle: {
text: "Data input from CSV"
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: []
}
A highcharts application where you can upload csv data.
If you put in csv data which looks similar to this:
"runs","numbers",differences
"run1","1123",21
"run2","222",7200
"run3","31112",60
"run4","412312",32
you will have a nice graph with x and y axis.
Now, what i am trying to do is to build in a range selector for the y axis so i can sort out really high values and have a better view on the lower values.
My problem is, i can only find range selectors that have something to do with date and time. Is there any range selector for my specific problem?
The basic range selector uses setExtremes method, so you can do the same on yAxis:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [1, 2, 3, 1, 3, 999, 888, 979]
}]
});
document.getElementById('low').addEventListener('click', function() {
chart.yAxis[0].setExtremes(0, 10);
});
document.getElementById('high').addEventListener('click', function() {
chart.yAxis[0].setExtremes(850, 1000);
});
Live demo: http://jsfiddle.net/BlackLabel/hbf2smoc/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.
yAxis: {
labels: {
formatter: function () {
var newNumber = formatNumber(this.value, 1);
return newNumber;
}
};
However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.
chart.addSeries({
data: newData,
yAxis: newDataName
});
How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?
Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.
And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.
chart.addAxis({
id: theData,
title: {
text: "newAxis"
}
});
Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):
// New axis
chart.addAxis({
id: 'new',
// Which also has the label formatter
labels: {
formatter: function () {
return formatNumber(this.value, 1);
}
},
title: {
text: "newAxis"
}
});
// New series which uses the axis
chart.addSeries({
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
yAxis: 'new'
});
I have loaded a csv file into a High Charts column chart: it works. However, I cannot figure out how to customize the chart. All the customizing options refer to hard-coded examples where the 'series' and 'categories' are right there in the code. Whereas mine is coming from a csv. How to use the customizing options? My x-axis is "Days" and y-axis is "Total Gallons"This is my code:
<script>
$.get('mergeHighChartsTotal.csv', function(csv) {
$('#map2').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Water Usage - September'
},
yAxis: {
title: {
text: 'gallons'
}
}
});
});
</script>
You can prepare a json dynamically, based on CSV. You need to load file and prepare custom parsing or use our data module. More infromation you can find here: http://www.highcharts.com/docs/working-with-data/custom-preprocessing