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.

Is there a way to add images to each points of the polygon with mapbox draw?

I am using Mapbox draw and i like to know is there a way to add images on each points(coordinates) of polygon ?
this is my code for the polygon:
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
polygon:true,
trash: true,
},
userProperties: true,
change the style of points and line.
styles: [
{
"id": "gl-draw-polygon-stroke-active",
"type": "line",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#D20C0C",
"line-dasharray": [0.2, 2],
"line-width": 2
}
},
{
"id": "gl-draw-polygon-and-line-vertex-active",
"type": "circle",
"filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
"paint": {
"circle-radius": 10,
"circle-color": "#3c33ff",
}
}
]
});
map.addControl(draw)
Update i found a way here's my code:
first i load and add a image with the var img then i create a click function to take the coordinates from the map with lnglat and now i can put a image everywhere i clicked.
var img = 'photo';
map.on('load', function() {
map.loadImage('https://image.shutterstock.com/image- photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg', function(error, image) {
if (error) throw error;
map.addImage('photo', image); // donner un nom à image
map.on('click', function (e) {
var imageId = e.lngLat.lng + e.lngLat.lat + "";
map.addLayer({
"id": imageId,
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [e.lngLat.lng, e.lngLat.lat]
}
}]
}
},
"layout": {
"icon-image": img,
"icon-size": 0.1
}
});
});
});
});
};

Precision in AmCharts stocklegend

I need to change precision to the values in the "stockLegend" property cause it shows over other values.
"stockLegend": {
"periodValueTextRegular": "[[value.average]]",
"spacing": 10
}

The value precision can be controlled by setting precision at the individual panel level or in panelsSettings if you want it set for all panels.
AmCharts.makeChart("chartdiv", {
// ...
panelsSettings: {
precision: 2, //global setting
// ...
},
// ...
panels: [{
// ...
precision: 1, //individual setting
// ...
},
// ...
],
// ...
});
Demo below set at the top panel:
var chartData1 = [];
var chartData2 = [];
generateChartData();
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData1,
"categoryField": "date"
},
{
"title": "second data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData2,
"compared": true,
"categoryField": "date"
}
],
"panels": [ {
"precision": 2,
"recalculateToPercents": false,
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
} ],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
},
{
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1
} ],
"stockLegend": {
"periodValueTextRegular": "[[value.close]]"
}
}
],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
}
} );
function generateChartData() {
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() - 500 );
firstDate.setHours( 0, 0, 0, 0 );
for ( var i = 0; i < 500; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
var a1 = Math.random() * 2;
var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
var a2 = Math.random() * 10;
var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
chartData1.push( {
"date": newDate,
"value": a1,
"volume": b1
} );
chartData2.push( {
"date": newDate,
"value": a2,
"volume": b2
} );
}
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

JavaScript-Amscharts categoryAxis parseDate

First I am a beginner in JS
I am using Amcharts to display some sensor values.
First i wrote it s´traight forward as in the Amcharts documentation.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 200,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD-JJ:NN:SS",
"valueAxes": [{
"id": "v1",
"axisAlpha": 1,
"position": "left",
"ignoreAxisWidth":true,
"precision": 2,
"axisColor": PosColor1,
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"valueAxis": "v1",
"id": "Graph1",
"lineColor": PosColor1,
"negativeLineColor": NegColor1,
//"bullet": "round",
//"bulletBorderThickness": 1,
//"hideBulletsCount": 30,
"title": ChartValue1,
"valueField": ChartValue1,
//"fillAlphas": 0,
"balloonText": "<span style='font-size:22;'>[[Heizkurve]]</span>",
"balloonFunction": function(item, graph) {
var result = graph.balloonText;
for (var key in item.dataContext) {
if (item.dataContext.hasOwnProperty(key) && !isNaN(item.dataContext[key])) {
var formatted = AmCharts.formatNumber(item.dataContext[key], {
precision: chart.precision,
decimalSeparator: chart.decimalSeparator,
thousandsSeparator: chart.thousandsSeparator
}, 2);
result = result.replace("[[" + key + "]]", formatted);
}
}
return result;
}
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":10,
"scrollbarHeight": 40,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"chartCursor": {
//"pan": true,
//"valueLineEnabled": true,
//"valueLineBalloonEnabled": true,
"categoryBalloonDateFormat": "MMM DD JJ:NN",
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
//"valueZoomable":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff",
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataLoader": {
"url": file,
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reload": 0,
//"timestamp": true,
"delimiter": ",",
"useColumnNames": true
},
........;
Now I tried to generate the chart object based, cause I want to update it dynamically with different data.
But when I added the "categoryAxis.oarseDate = true" then no chart will be displayed.
If i comment it out, graph is drawn but X axis is not formatted as date like before.
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.addListener("dataUpdated", zoomChart);
var categoryAxis = chart.categoryAxis;
categoryAxis.minPeriod="fff";
categoryAxis.parseDates = true;
Using the same .csv als data source.
Just load it with the Amcharts function "AmChartsLoadCSV"
function AmChartsLoadCSV(file,chart){
var newchart = new AmCharts.AmSerialChart();
newchart = chart;
AmCharts.loadFile(file, {}, function(data) {
var chartData = AmCharts.parseCSV(data, {
"delimiter": ",",
"useColumnNames": true,
"showCurtain": true,
"showErrors": true
});
var chart1 = MakeChart(chartData);
AddGraphtoChart(chart1,6);
return chart1;
});

solved!
according to the samples and democode I had a double definition for the Date axis.
I defined a general DateFormat for the Chart chart.dataDateFormat="YYYY-MM-DD-JJ:NN:SS";cause it was in the Amcharts doc.
After deleting this, the categoryAxis.parseDates = true; works fine

Highchart and timeline does not work with large dataset

I have been working on a large dataset : http://jsfiddle.net/470bddfp/1/
It's about 2600 entries
I don't want to group data, but use zoomtype feature instead
Unfortunately it does not work, I just change selection, and I have empty data.
What is even worst, is when I use smaller dataset like I made in this exemple http://jsfiddle.net/470bddfp/2/ zoomtype is working !
$(function() {
var chart = new Highcharts.Chart({
chart: {
"renderTo": "container",
"zoomType": "x",
"panning": true,
"panKey": "shift"
},
plotOptions: {
"series": {
"states": {
"hover": {
"enabled": false
}
}
}
},
series: [{
"name": "First Timeline",
"type": "line",
"data": [
[1447608100000, 4.256],
[1447608070000, 4.471],
[1447608045000, 4.916],
[1447608042000, 2.946],
[1447608029000, 3.517],
[1447608003000, 5.801],
[1447607954000, 4.162],
[1447607924000, 2.415],
[1447607908000, 3.314],
[1447607898000, 2.765],
[1447607888000, 3.581],
[1447607861000, 7.016],
[1447607740000, 3.485],
[1447607719000, 4.264],
[1447607700000, 2.855],
[1447607694000, 3.142],
[1447607676000, 4.92],
[1447607613000, 2.899],
[1447607603000, 2.729],
[1447607594000, 4.054],
[1447607538000, 2.61],
[1447607526000, 2.43],
[1447607515000, 5.984],
[1447607467000, 2.529],
[1447607445000, 3.398],
[1447607391000, 4.9],
[1447607365000, 4.829],
[1447607310000, 2.935],
[1447607287000, 4.811],
[1447607242000, 4.897],
[1447607219000, 3.354],
[1447607157000, 5.929],
[1447607156000, 4.444],
[1447607128000, 6.542],
[1447607125000, 8.854],
[1447607121000, 5.693],
[1447607118000, 3.906],
[1447607092000, 2.843],
[1447607085000, 2.615],
[1447607076000, 2.651],
[1447607060000, 5.015],
[1447607057000, 2.441],
[1447607045000, 4.417],
[1447607015000, 5.198],
[1447607012000, 7.056],
[1447607006000, 4.014],
[1447606988000, 3.363],
[1447606965000, 2.329],
[1447606925000, 4.209],
[1447606922000, 4.095],
[1447606892000, 3.021],
[1447606879000, 4.54],
[1447606815000, 3.73],
[1447606783000, 7.097],
[1447606781000, 4.336],
[1447606732000, 2.786],
[1447606714000, 2.774],
[1447606675000, 6.027],
[1447606626000, 3.349],
[1447606576000, 3.147],
[1447606565000, 4.873],
[1447606518000, 4.064],
[1447606500000, 2.458],
[1447606484000, 2.601],
[1447606480000, 3.839],
[1447606429000, 5.348],
[1447606390000, 5.665],
[1447606287000, 7.904],
[1447606079000, 4.976],
[1447606055000, 5.577],
[1447606016000, 4.474],
[1447605931000, 5.43],
[1447605893000, 2.979],
[1447605889000, 6.101],
[1447605758000, 2.608],
[1447605757000, 5.77],
[1447605732000, 4.056],
[1447605701000, 5.834],
[1447605668000, 3.143],
[1447605665000, 2.924],
[1447605647000, 2.941],
[1447605631000, 3.544],
[1447605589000, 3.78],
[1447605566000, 7.102],
[1447605564000, 4.404],
[1447605563000, 5.95],
[1447605536000, 3.158],
[1447605499000, 2.618],
[1447605470000, 4.327],
[1447605456000, 4.384],
[1447605434000, 6.955],
[1447605307000, 3.632],
[1447605289000, 3.25],
[1447605276000, 3.711],
[1447605266000, 4.151],
[1447605224000, 4.985],
[1447605186000, 3.37],
[1447605163000, 2.553],
[1447605136000, 6.708],
[1447605042000, 6.076],
[1447604944000, 2.934],
[1447604923000, 6.721],
[1447604660000, 5.824],
[1447604608000, 4.777],
[1447604572000, 2.702],
[1447604560000, 3.34],
[1447604512000, 8.953],
[1447604509000, 7.409],
[1447604399000, 6.201],
[1447604327000, 2.912],
[1447604317000, 3.708],
[1447604280000, 4.575],
[1447604251000, 6.961],
[1447604248000, 3.878],
[1447604237000, 3.699],
[1447604232000, 4.066],
[1447604194000, 2.265],
[1447604182000, 4.943],
[1447604135000, 2.764],
[1447604132000, 7.494],
[1447603986000, 6.042],
[1447603983000, 3.071],
[1447603948000, 5.029],
[1447603887000, 7.517],
[1447603762000, 6.409],
[1447603758000, 4.375],
[1447603729000, 6.743],
[1447603584000, 2.78],
[1447603561000, 5.06],
[1447603536000, 5.109],
[1447603499000, 3.178],
[1447603433000, 6.729],
[1447603368000, 4.771],
[1447603278000, 4.775],
[1447603256000, 2.522],
[1447603242000, 6.729],
[1447603065000, 5.433],
[1447603016000, 3.842],
[1447602983000, 7.156],
[1447602780000, 7.057],
[1447602609000, 5.594],
[1447602566000, 6.967],
[1447602420000, 4.171],
[1447602345000, 5.094],
[1447602311000, 3.869],
[1447602293000, 4.59],
[1447602290000, 2.944],
[1447602271000, 6.146],
[1447602174000, 2.749],
[1447602161000, 2.713],
[1447602116000, 7.074],
[1447602065000, 3.175],
[1447602053000, 3.326],
[1447601987000, 3.973],
[1447601984000, 5.376],
[1447601933000, 3.106],
[1447601899000, 6.304],
[1447601822000, 2.749],
[1447601773000, 5.92],
[1447601650000, 7.701],
[1447601547000, 2.893],
[1447601532000, 3.036],
[1447601523000, 6.992],
[1447601392000, 7.213],
[1447601061000, 6.555],
[1447600809000, 5.283],
[1447600771000, 4.829],
[1447600748000, 2.75],
[1447600719000, 5.896],
[1447600632000, 4.905],
[1447600607000, 2.821],
[1447600583000, 2.98],
[1447600582000, 4.549],
[1447600568000, 4.821],
[1447600527000, 3.244],
[1447600521000, 6.498],
[1447600404000, 4.902],
[1447600380000, 5.754],
[1447600287000, 4.958],
[1447600250000, 3.106],
[1447600235000, 2.655],
[1447600231000, 3.266],
[1447600194000, 5.529],
[1447600152000, 4.377],
[1447600086000, 3.799],
[1447600083000, 3.085],
[1447600072000, 5.024],
[1447600036000, 4.372],
[1447600024000, 2.653],
[1447600024000, 3.836],
[1447600015000, 3.173],
[1447600007000, 5.187],
[1447599920000, 3.063],
[1447599914000, 3.986],
[1447599898000, 4.572],
[1447599817000, 4.282],
[1447599807000, 4.841],
[1447599802000, 4.515],
[1447599764000, 2.617],
[1447599749000, 2.932],
[1447599724000, 7.049],
[1447599720000, 4.841],
[1447599695000, 6.434],
[1447599692000, 3.248],
[1447599687000, 3.738],
[1447599680000, 4.174],
[1447599625000, 4.691],
[1447599575000, 3.657],
[1447599561000, 3.93],
[1447599506000, 7.645],
[1447599243000, 7.372],
[1447599242000, 5.109],
[1447599212000, 3.965],
[1447599188000, 3.358],
[1447599177000, 5.133],
[1447599177000, 2.737],
[1447599168000, 3.591],
[1447599104000, 3.627],
[1447599094000, 4.185],
[1447599079000, 4.75],
[1447599040000, 3.388],
[1447599029000, 2.608],
[1447599020000, 2.721],
[1447598998000, 3.548],
[1447598983000, 4.117],
[1447598967000, 3.311],
[1447598953000, 4.011],
[1447598911000, 3.208],
[1447598886000, 4.261],
[1447598878000, 5.554],
[1447598845000, 4.951],
[1447598783000, 4.79],
[1447598728000, 4.677],
[1447598665000, 3.013],
[1447598648000, 3.199],
[1447598630000, 5.953],
[1447598556000, 2.935],
[1447598549000, 3.082],
[1447598521000, 4.991],
[1447598493000, 5.14]
],
"tooltip": {
"valueSuffix": " secondes"
}
}],
title: {
"text": "Temps de r\u00e9ponse de RISe"
},
xAxis: [{
"type": "datetime",
"dateTimeLabelFormats": {
"hours": "%H:%M"
}
}],
yAxis: {
"labels": {
"format": "{value}s"
},
"title": {
"text": null
},
"min": 0,
"max": 9
},
});
});
I didn't found anything in documentation relating on limitations for zoomtype
Thanks by advance for any help