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.

Json data for apexcharts

I have some problems rendering some data from a JSON in my apexchart series.
Here is the example of my chart with the data that I want to be in my JSON, and i don't know how to write it.
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
var options = {
series: [{
name: "Q",
data: [0, 4800, 9500, null],
},
{
name: "Q - 1",
data: [0, 6500, 12000, 16000]
},{
name: "Q Target",
data: [15500, 15500, 15500, 15500]
},
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Clicks',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [' ', 'Month1', 'Month2', 'Month3'],
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart {
max-width: 450px;
margin: 35px auto;
}
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If someone could give me a hint, is kindly appreciated.

The JSON looks like this , for retrieving data for the apexchart
{
"data_clicks":[
{
"name":"Q",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":2400
},
{
"x":"Month2",
"y":5200
},
{
"x":"Month3",
"y":null
}
]
},
{
"name":"Q - 1",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":1800
},
{
"x":"Month2",
"y":7150
},
{
"x":"Month3",
"y":10200
}
]
},
{
"name":"Q Target",
"data":[
{
"x":" ",
"y":11000
},
{
"x":"Month1",
"y":11000
},
{
"x":"Month2",
"y":11000
},
{
"x":"Month3",
"y":11000
}
]
}
],

append API data into an array

I need to display apex chart (Brush Chart). I am trying to append data from API into Array. i have given code below and also API data.
I used console to check that the data is coming correctly from API but not appending to series array
<div id="app" style="background:white">
<div id="chart1">
<apexchart type=line height=230 :options="chartOptionsArea" :series="series" />
</div>
<div id="chart2">
<apexchart type=area height=130 :options="chartOptionsBrush" :series="series" />
</div>
</div>
below is my VUEjs code
data() {
return {
series: [{
data: this.generateDayWiseTimeSeries(new Date('01 Jan
2014 ').getTime(),185, {
min: 30,
max: 90
})
}],
chartOptionsArea: {
chart: {
id: 'chartArea',
toolbar: {
autoSelected: 'pan',
show: false
}
},
colors: ['#546E7A'],
stroke: {
width: 3
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
},
markers: {
size: 0
},
xaxis: {
type: 'datetime'
}
},
chartOptionsBrush: {
chart: {
id: 'chartBrush',
brush: {
target: 'chartArea',
enabled: true
},
selection: {
enabled: true,
xaxis: {
min: new Date('01 Jan 2014').getTime(),
max: new Date('09 Jan 2014').getTime()
}
},
},
colors: ['#008FFB'],
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.91,
opacityTo: 0.1,
}
},
xaxis: {
type: 'datetime',
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
}
}
}
below is Function
generateDayWiseTimeSeries: function() {
var i = 0;
var self = this;
var series;
axios
.get("http://172.31.0.114:5000/api/eco/BNG-JAY-136-001")
.then(function(res) {
self.series = res.data; //not working
})
return series;
}
API data
[
[
"2019-5-23",
0
],
[
"2019-5-24",
0
],
[
"2019-5-25",
0
],
[
"2019-5-26",
0
],
[
"2019-5-27",
0
],
[
"2019-5-28",
0
],
[
"2019-5-29",
0
],
[
"2019-5-30",
0
],
[
"2019-5-31",
0
]
]

You can use updateSeries method or you can directly update the value of series. Please check below code
Code Snippet
generateDayWiseTimeSeries: function() {
var me = this;
axios.get("data.json")
.then(function(res) {
me.series[0].data = res.data;
//OR you can use updateSeries method
/* me.$children[0].updateSeries([{
data: res.data
}]);*/
});
return [];
}
You can check here with working fiddle.

generateDayWiseTimeSeries function return undefined variable => series.
Assign returned data to series instead of self.series.

How to add GeoJSON(MultiLineString) layer to a Google Map

I need to create maps that will use GeoJSON data(MultiLineString format) as a data layer over a Google Map. I have created a Google Maps JavaScript API project, and have an API key.
I have tried the following examples:
Example I:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
(This renders a polygon but does not seem to support the styling of a MultiLineString).
Example II:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop
(This example allows for addition of GeoJSON via Drag and Drop but I do not see how to save the map and data layer.)
Sample GeoJSON MultiLineString from http://geojsonlint.com :
{
"type": "MultiLineString",
"coordinates": [
[
[
-105.0214433670044,
39.57805759162015
],
[
-105.02150774002075,
39.57780951131517
],
[
-105.02157211303711,
39.57749527498758
],
[
-105.02157211303711,
39.57716449836683
],
[
-105.02157211303711,
39.57703218727656
],
[
-105.02152919769287,
39.57678410330158
]
],
[
[
-105.01989841461182,
39.574997872470774
],
[
-105.01959800720215,
39.57489863607502
],
[
-105.01906156539916,
39.57478286010041
]
],
[
[
-105.01717329025269,
39.5744024519653
],
[
-105.01698017120361,
39.574385912433804
],
[
-105.0166368484497,
39.574385912433804
],
[
-105.01650810241699,
39.5744024519653
],
[
-105.0159502029419,
39.574270135602866
]
],
[
[
-105.0142765045166,
39.57397242286402
],
[
-105.01412630081175,
39.57403858136094
],
[
-105.0138258934021,
39.57417089816531
],
[
-105.01331090927124,
39.57445207053608
]
]
]
}

Following the example in the documentation
Data class
google.maps.Data class
A layer for displaying geospatial data. Points, line-strings and polygons can be displayed.
Every Map has a Data object by default, so most of the time there is no need to construct one. For example:
var myMap = new google.maps.Map(...);
myMap.data.addGeoJson(...);
myMap.data.setStyle(...);
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, 70.1419),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.data.addGeoJson(jsonData);
map.data.setStyle({
strokeColor: "blue"
})
}
google.maps.event.addDomListener(window, "load", initialize);
var jsonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"stroke": "#555555",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [
[
79.8046875,
45.583289756006316
],
[
73.828125,
48.922499263758255
],
[
72.421875,
46.07323062540838
],
[
72.0703125,
42.553080288955826
],
[
79.453125,
41.77131167976407
],
[
78.046875,
37.71859032558816
],
[
72.7734375,
34.016241889667015
],
[
66.796875,
39.63953756436671
],
[
66.4453125,
48.45835188280866
],
[
74.1796875,
53.74871079689897
],
[
55.1953125,
55.7765730186677
],
[
49.92187499999999,
48.69096039092549
],
[
50.625,
40.17887331434696
]
]
}
}]
};
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

You can add the GeoJSON like
function loadGeoJsonString(geoString) {
var geojson = JSON.parse(geoString);
map.data.addGeoJson(geojson);
}
With
map.data.setStyle({
//Put styling here
});
you can style your added GeoJSON. So the styling is not applied when you load the GeoJSON but you can add it afterwards.

Angular-Nvd3 dates and numbers do not match data

I'm using Angular-Nvd3 to represent my sets of data, and I'm currently getting some weird results from my data. The dates and numbers in my data does not correspond to the dates and numbers that are shown on the graph.
My $scope.data contains this JSON-array:
http://www.jsoneditoronline.org/?id=654aba4a1a8f3fd7d31f75dd295da363
and my $scope.options look like this:
$scope.options = {
chart: {
type: 'cumulativeLineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 60,
left: 65
},
x: function(d){ return d[0]; },
y: function(d){ return d[1]; },
average: function(d) { return d.mean/100; },
color: d3.scale.category10().range(),
transitionDuration: 300,
useInteractiveGuideline: true,
clipVoronoi: false,
xAxis: {
axisLabel: 'X Axis',
tickFormat: function(d) {
return d3.time.format('%m/%d/%Y')(new Date(d))
},
showMaxMin: false,
staggerLabels: true
},
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d3.format('')(d);
},
axisLabelDistance: 20
}
}
};
The problem is that my chart only shows dates from 1970, and the numbers are completely off:
I have no idea why the chart is showing both the wrong dates and numbers, please help me figuring this out.

Your values are actually in 1970.
You can see it by yourself:
var json = [
{
"key": "IBM",
"values": [
[
1112313600,
90.44
],
[
1124755200,
82.03
],
[
1137456000,
83
],
[
1149811200,
77.63
],
[
1162252800,
92.33
],
[
1175040000,
94.26
],
[
1187568000,
109.22
],
[
1200009600,
97.67
],
[
1212624000,
128.47
],
[
1225065600,
79.66
],
[
1237766400,
98.71
],
[
1250121600,
119.58
],
[
1262736000,
130
],
[
1275350400,
124.34
],
[
1287619200,
139.83
],
[
1300233600,
153
],
[
1312761600,
166.22
],
[
1325116800,
186.18
],
[
1337731200,
196.12
],
[
1350259200,
208.93
],
[
1363132800,
212.06
],
[
1375660800,
195.5
],
[
1388016000,
185.35
],
[
1400630400,
186.39
],
[
1413158400,
183.52
],
[
1425859200,
160.77
],
[
1438214400,
160.96
]
]
}
];
[].forEach.call(json[0].values, function(value) {
document.body.innerHTML += '<div>' + new Date(value[0]) + '</div>';
});