Develop Reference

Google spreadsheet API. Cannot specify axisPosition of a series

I want to specify the axis of a series. If i specify targetAxis to be "RIGHT_AXIS", it doesn't work..
The Axis-titles for LEFT_AXIS and RIGHT_AXIS are also not showing. Only the bottom one.
I want the graph to look like this:
But it ends up looking like this:
Here the red axis is at the bottom, because this column contains much lower numbers then the column with the numbers for the blue bars.
Someone who knows how i can solve this?
Here is my code:
{
addChart: {
chart: {
spec: {
title: "Graf - tibber",
basicChart: {
chartType: "COMBO",
axis: [
// X-AXIS
{
position: "BOTTOM_AXIS",
title: "TID",
},
// Y-AXIS LEFT
{
position: "LEFT_AXIS",
title: "FORBRUK(KWH)",
},
// X-AXIS RIGHT
{
position: "RIGHT_AXIS",
title: "PRIS",
},
],
legendPosition: "BOTTOM_LEGEND",
domains: [
{
domain: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 0,
endColumnIndex: 1
}
]
}
}
}
],
series: [
{
series: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 5,
endColumnIndex: 6,
},
],
},
},
targetAxis: "LEFT_AXIS",
},
{
series: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 3,
endColumnIndex: 4,
},
],
},
},
targetAxis: "RIGHT_AXIS",
}
],
headerCount: 1,
},
},
position: {
newSheet: true,
},
},
},
},
],

Improved request
Disclaimer, there is a bug in the API for the right hand axis, see end of answer
{
"requests": [
{
"addChart": {
"chart": {
"spec": {
"title": "Graf - tibber",
"basicChart": {
"chartType": "COMBO",
"legendPosition": "BOTTOM_LEGEND",
"axis": [
{
"position": "BOTTOM_AXIS",
"title": "TID"
},
{
"position": "LEFT_AXIS",
"title": "FORBRUK(KWH)"
},
{
"position": "RIGHT_AXIS",
"title": "PRIS"
}
],
"domains": [
{
"domain": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 0,
"endColumnIndex": 1
}
]
}
}
}
],
"series": [
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 1,
"endColumnIndex": 2
}
]
}
},
"targetAxis": "LEFT_AXIS",
"type": "COLUMN"
},
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 2,
"endColumnIndex": 3
}
]
}
},
"targetAxis": "RIGHT_AXIS",
"type": "LINE"
}
],
"headerCount": 1
}
},
"position": {
"newSheet": true
}
}
}
}
]
}
Note that the row and column indices I changed because I was working with some sample data. "type": "COLUMN" and "type": "LINE" entries in the series. In fact, for me, I would get 400 bad request without it. This produces a chart with BOTTOM_AXIS and LEFT_AXIS but not RIGHT_AXIS (see below for info on that). The chart also has two different scales so the line doesn't get overshadowed by the columns.
Right Axis
Unfortunately this is a current bug with the API: https://issuetracker.google.com/issues/153528225 - be sure to mark it with a ☆ to let Google know that this affects you.
Reference
Sample Chart Requests - I used the sample to navigate the documentation to find out if there were any attributes missing.

HighChart- Plot Stacked Bar Chart on Status for Every Minute

I am trying to plot a Stacked bar chart on every minute(24 hours) status change of a process, i.e. Running or Stop.
Chart is having only y-axis with series in milliseconds. But It does not seems to plot the data as expected.
The data which is coming is like below:
19 x job process Stop NULL 2020-07-14 03:01:02.137 NULL
20 x job process Running NULL 2020-07-14 03:02:02.137 NULL
21 x job process Running NULL 2020-07-14 07:00:00.000 NULL
22 x job process Running NULL 2020-07-14 07:01:00.000 NULL
23 x job process Running NULL 2020-07-14 07:02:00.000 NULL
24 x job process Running NULL 2020-07-14 07:03:00.000 NULL
25 x job process Running NULL 2020-07-14 07:04:00.000 NULL
26 x job process Stop NULL 2020-07-14 07:05:00.000 NULL
27 x job process Running NULL 2020-07-14 07:06:00.000 NULL
28 x job process Running NULL 2020-07-14 07:07:00.000 NULL
29 x job process Running NULL 2020-07-14 07:08:00.000 NULL
Wher x is the job name and Running and stop is state. I am filtering this data in javascript to create my data series for chart, which is below:
data.forEach((element)=>{
if(element.State=="Running"){
var datetime = moment(element.CreatedDateTime).utc().valueOf();
statusSuccess.push(datetime)
}
else{
var datetime = moment(element.CreatedDateTime).utc().valueOf();
statusFailure.push(datetime)
}
});
The chart plotting and options creation is below:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "24 Hrs Status Variation For: "+this.resoucreName
},
credits: {
enabled: false
},
xAxis: {
},
yAxis: {
min:moment().subtract(1, 'days').utc().valueOf(),
dateTimeLabelFormats: {
second: '%A, %b %e, %H:%M:%S',
minute: '%A, %b %e, %H:%M',
hour: '%A, %b %e, %H',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:%A, %b %e, %H:%M:%S}</b><br/>',
shared: true
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'Success',
color:'#6FF3A3',
data: statusSuccess,
type: undefined,
},
{
name: 'Failed',
color:'#FF386C',
data: statusFailure,
type: undefined,
}
]
});
Below is the chart I am getting:
Fiddle
But I am expecting like :
ExpectedFiddle

An X-Range plot would (as you also mentioned in your comment) best suit the situation as it can be used to diplay alternating states which can't be done with a stacked bar chart.
You first iterate over all job states and on state change ("running -> stop" / "stop -> running") you add the timestamps of start and end to a new array. Then add this array as the data property to the chart.
Remark: if you want to extend the last element to now you will have to add another element to the chart series array with the latest entry.datetime as "x" and new Date().getTime() as "x2".
var data = [{
"id": 19,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:01:02.137"
},
{
"id": 20,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:01:02.137"
},
{
"id": 21,
"name": "x",
"type": "job",
"state": "Stop",
"datetime": "2020-07-14 03:02:02.137"
},
{
"id": 22,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:03:02.137"
},
{
"id": 30,
"name": "x",
"type": "job",
"state": "Stop",
"datetime": "2020-07-14 03:04:02.137"
},
{
"id": 31,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:05:02.137"
},
{
"id": 32,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:06:02.137"
},
{
"id": 33,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:07:02.137"
},
{
"id": 34,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:08:02.137"
},
{
"id": 35,
"name": "x",
"type": "job",
"state": "stop",
"datetime": "2020-07-14 03:09:02.137"
}
];
let latestMode = false;
let startTime = false;
let seriesData = [];
for (let entry of data) {
if (!latestMode) {
latestMode = entry.state;
startTime = new Date(entry.datetime);
} else if (latestMode !== entry.state) {
let currentTime = new Date(entry.datetime);
seriesData.push({
x: startTime.getTime(),
x2: currentTime.getTime(),
y: latestMode === 'running' ? 0 : 1
});
startTime = currentTime;
latestMode = entry.state;
}
}
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Job state'
},
accessibility: {
point: {
descriptionFormatter: function(point) {
var ix = point.index + 1,
category = point.yCategory,
from = new Date(point.x),
to = new Date(point.x2);
return ix + '. ' + category + ', ' + from.toDateString() +
' to ' + to.toDateString() + '.';
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Running', 'Stopped'],
reversed: true
},
series: [{
name: 'Job state',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: seriesData,
dataLabels: {
enabled: true
}
}]
});
#container {
height: 300px;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Here's also a fiddle with the above code

The chart is not plotted because the yAxis.min property is NaN:
yAxis: {
min: Date.UTC(yesterday),
...
}
Live demo: https://jsfiddle.net/BlackLabel/ps0L8cv9/
API Reference: https://api.highcharts.com/highcharts/yAxis.min

Highcharts improperly handling negative values

I have created a JS fiddle where the percentage area graph chart is plotted using data with a set of negative values.
Highcharts.chart('container', {
"chart": {
"type": "area",
"style": {
"fontFamily": "Arial"
},
"width": "800"
},
"title": {
"text": ""
},
"credits": {
"enabled": false,
"additionalProperties": {}
},
"legend": {
"border": "#333333",
"borderWidth": 0,
"borderRadius": 3,
"itemDistance": 20,
"itemMarginBottom": 3,
"margin": 5,
"padding": 10,
"align": "center",
"itemStyle": {
"fontSize": "10",
"font-weight": "normal",
"fontFamily": "Arial"
},
"itemWidth": 200
},
"subtitle": {
"text": ""
},
"colors": ["#67A262", "#67A262", "#FFC110", "#f77b3f", "#61d3f0"],
"xAxis": {
"categories": ["12/11", "4/12", "8/12", "12/12", "4/13", "8/13", "12/13", "4/14", "8/14", "12/14", "4/15", "8/15", "12/15", "4/16", "8/16", "12/16", "4/17", "8/17", "12/17", "4/18", "8/18", "12/18", "4/19", "8/19", "10/19"],
"tickmarkPlacement": "on",
"title": {
"enabled": false
},
"labels": {
"align": "center",
"style": {
"fontSize": "10px",
"font-weight": "normal",
"fontFamily": "Arial, Helvetica, sans-serif"
}
}
},
"yAxis": {
"title": {
"text": "Percent"
}
},
"tooltip": {
"pointFormat": "<span style=\"color:{[#67A262, #67A262, #FFC110, #f77b3f, #61d3f0]}\">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>",
"shared": true
},
"plotOptions": {
"area": {
"stacking": "percent",
"lineColor": "#ffffff",
"lineWidth": 1,
"marker": {
"lineWidth": 0,
"lineColor": "#ffffff",
"enabled": false
}
}
},
"series": [{
"name": "Cash",
"data": [0, 0, 3247037, 4115431, 3649666, 5297250, 4956569, 1625115, 3174121, 6694144, 1512948, 3440926, 683988, 889192, 703447, 2515743, 5878442, 5260639, 2247735, 1696123, 6485498, 1514393, 2055804, 1546508, 1421063]
}, {
"name": "Fixed Income",
"data": [0, 0, 1216772, 1659681, 1902223, 1570967, 1314055, 977437, 887057, 1536891, -653674, -1059915, -1339804, -1071393, -998063, -1200418, -1375094, -1438987, 377989, -133323, 7332923, 12508089, 13924871, 15185459, 15145308]
}, {
"name": "Equities",
"data": [0, 0, 2924177, 7939481, 10863595, 12100681, 16650757, 18639670, 20783963, 17146281, 9656794, 6784358, 7574038, 5126567, 5647696, 2539386, 2750490, 3856696, 4627848, 6936117, 22863720, 19581687, 23265765, 21775318, 22517049]
}, {
"name": "Alternatives",
"data": [11729500, 11896355, 12286734, 12043719, 12763997, 11602665, 9505520, 9005992, 9954085, 11116397, 1982778, 3138404, 3767757, 3899267, 3614944, 5307771, 1708839, 889320, 3074970, 840986, 15276520, 15166745, 15090469, 14700818, 14904036]
}, {
"name": "Other",
"data": [482853, 550589, 627809, 813745, 946673, 1017471, 1101900, 1076074, 1254348, 1230801, 1499999, 1500000, 1631191, 2188279, 2188478, 2254838, 2423621, 2422634, 2432769, 2367905, 4647985, 4530435, 22885564, 23693095, 23706588]
}]
});
Here the Highcharts treats the negative values as positive while computing the percentage.
Expected calculations:
Implemented calculations:
Please help me understand the implementations.

How to do Pie chart onload animation using billboard js

I am using billboard js to develop a pie chart with animation. I am unable to do the onload animation so, How will apply onload animation?
Here is the example of onload animation. Please help us.
Here is my code in codepen
HTML Code
<div id="chart"></div>
JS code:
bb.generate({
"data": {
"columns": [
["data1", 30],
["data2", 50]
],
"type": "pie",
"xLocaltime": true,
"xSort": true
},
"legend": {
"show": false
},
"clipPath": true,
"gauge": {
"width": 0,
"startingAngle": 0,
"expand": {
"duration": 88
}
},
"pie": {
"label": {
"threshold": 100
}
},
"donut": {
"label": {},
},
"tooltip": {
"show": false,
"grouped": false
},
interaction: {
enabled: false
}
});
Thanks!

The key point is initialize with '0' data and then load your final data.
// (1) Initialize with 0
var chart = bb.generate({
"data": {
"columns": [
["data1", 0],
["data2", 0]
],
});
// (2) then load data via .load() api
chart.load( ... );
Try with the Run code snippet.
var chart = bb.generate({
"data": {
"columns": [
["data1", 0],
["data2", 0]
],
"type": "pie"
},
"legend": {
"show": false
},
"pie": {
"label": {
show: false
}
},
interaction: {
enabled: false
}
});
setTimeout(() => {
chart.load({
"columns": [
["data1", 30],
["data2", 50]
],
});
}, 1000);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>billboard.js</title>
<script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

highcharts tooltip not working properly for hacked gantt chart

The tooltips for my hacked gantt chart using highcharts doesnt seem to be working properly. I used the gantt chart provided by the highcharts team from here-:
http://jsfiddle.net/highcharts/r6emu/
I am using UnixTime and that seems to be somehow throwing off the tooltips. Here-:
http://jsfiddle.net/bootkick/NFS5M/
// Define tasks
var tasks = [{
"name": "a",
"intervals": [{
"from": 1366005607000,
"to": 1366006490000
}]
}, {
"name": "b",
"intervals": [{
"from": 1366059607000,
"to": 1366061858000
}, {
"from": 1366056006000,
"to": 1366058223000
}, {
"from": 1366047007000,
"to": 1366049299000
}, {
"from": 1366034407000,
"to": 1366036682000
}, {
"from": 1366030808000,
"to": 1366033050000
}, {
"from": 1366027208000,
"to": 1366029512000
}, {
"from": 1366018209000,
"to": 1366021296000
}]
}, {
"name": "c",
"intervals": [{
"from": 1366018209000,
"to": 1366019966000
}]
}, {
"name": "d",
"intervals": [{
"from": 1366005607000,
"to": 1366047612000
}, {
"from": 1366002007000,
"to": 1366002202000
}]
}];
// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function (i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function (j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]);
}
});
series.push(item);
});
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Daily activities'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function () {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Activity'
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + tasks[this.y].name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.point.options.from) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function () {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
I am relatively new to Javascript and Highcharts so pardon the obvious if any.

I figured it out. The problem was that the from,to timestamp pairs within a name/category are not in the ascending order. For the tooltip to work correctly, they need to be in the ascending order which is kinda weird.