How to add a hyperlink using Google Sheets API? - google-sheets-api

I'm trying to write a python script to add hyperlinks to a google sheet. I'm using the google api for this. From searching, I've gathered that I need pass the rest api a "=HYPERLINK()" type of message.
From documentation: https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/other#ExtendedValue.FIELDS.formula_value
{
// Union field value can be only one of the following:
"numberValue": number,
"stringValue": string,
"boolValue": boolean,
"formulaValue": string,
"errorValue": {
object(ErrorValue)
}
// End of list of possible types for union field value.
}
It looks like I should be using the 'formulaValue' property.
Edit:
I've attempted to use the UpdateCells request
Edit: Solution below.

I figured it out:
def addHyperlink(self, hyperlink, text, sheetId, rowIndex, colIndex):
requests = []
requests.append({
"updateCells": {
"rows": [
{
"values": [{
"userEnteredValue": {
"formulaValue":"=HYPERLINK({},{})".format(hyperlink, text)
}
}]
}
],
"fields": "userEnteredValue",
"start": {
"sheetId": sheetId,
"rowIndex": rowIndex,
"columnIndex": colIndex
}
}})
body = {
"requests": requests
}
request = self.service.spreadsheets().batchUpdate(spreadsheetId=self.spreadsheetId, body=body)
return request.execute()

links not worked!!! But add like note)
def addHyperlink(self, uri_1, summa_, sheetId, rowIndex, colIndex):
requests = []
requests.append({
"updateCells": {
"rows": [{
"values": [{
'userEnteredValue': {'numberValue': float(summa_)}, #
'effectiveValue': {'numberValue': float(summa_)},
'formattedValue': "р."+summa_,
'userEnteredFormat': {
'numberFormat': {'type': 'NUMBER', 'pattern': '[$р.-419]#,##0.00'},
'backgroundColor': {'red': 1, 'green': 1, 'blue': 0.6}, 'borders': {
'top': {
'style': 'SOLID', 'width': 1, 'color': {}, 'colorStyle': {'rgbColor': {}}},
'bottom': {
'style': 'SOLID', 'width': 1, 'color': {}, 'colorStyle': {'rgbColor': {}}},
'left': {
'style': 'SOLID', 'width': 1, 'color': {}, 'colorStyle': {'rgbColor': {}}},
'right': {
'style': 'SOLID', 'width': 1, 'color': {}, 'colorStyle': {'rgbColor': {}}}},
'horizontalAlignment': 'RIGHT', 'verticalAlignment': 'BOTTOM',
'textFormat': {
'foregroundColor': {'red': 0.06666667, 'green': 0.33333334, 'blue': 0.8},
'fontFamily': 'Arial', 'underline': True,
'foregroundColorStyle': {'rgbColor': {'red': 0.06666667, 'green': 0.33333334, 'blue': 0.8}},
'link': {'uri': uri_1}
},
'hyperlinkDisplayType': 'LINKED','backgroundColorStyle': {'rgbColor': {'red': 1, 'green': 1, 'blue': 0.6}}
}
, 'hyperlink': uri_1 , 'note': uri_1,
}
]
}], "fields": '*', "start": {
"sheetId": sheetId, "rowIndex": rowIndex, "columnIndex": colIndex}}})
body = {
"requests": requests}
request = self.service.spreadsheets().batchUpdate(spreadsheetId=self.spreadsheetId, body=body)
return request.execute()

Related

apexcharts - Area chart not filling area

I'm trying to make an area chart using apexcharts with nuxt (vue2), but the area is not getting filled, and the options i set in chartOptions for fill are getting used by the line itself instead of the area, as below:
this is my apexchart component:
<client-only>
<apexcharts
type="area"
width="70%"
ref="realtimeChart"
:options="chartOptions"
:series="series">
</apexcharts>
</client-only>
this is my chartOptions:
chartOptions: {
chart: {
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
},
},
id: "basic-bar",
colors: ["#FFA07A"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
forecastDataPoints: {
count: 28,
strokeWidth: 4,
dashArray: 5,
},
title: {
text: "doesnt matter",
align: "center",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
type: "date",
tickAmount: 40,
},
yaxis: [
{
title: {
text: "Mt CO2eq/we",
},
forceNiceScale: true,
},
]
},
Can anyone help ?
I was declaring type: "line" in my series. thats all.

How to introduce newline character in xAxes Label with chart js

I am facing problem in inserting a newline character in xAxes labels with chart Js.
Below is the sample code used for formatting xAxes labels
"scales": {
"xAxes": [{
"type" : 'time',
"display": true,
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}]
}
With the above code, the xAxes labels looks like 13:10 - 2022/02/01.
But, I want to be like below:
For multiline labels you will need to proide an array for the label in which each entry is its own line. This can be achieved with the tick callback:
function newDate(milis) {
return moment().add(milis, 'ms');
}
var config = {
type: 'line',
data: {
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets: [{
label: "My First dataset",
data: [1, 3, 4, 2, 1, 4, 2],
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: (tick) => (tick.split('-'))
},
type: 'time',
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Echarts datazoom with grid of 4 charts

I have an eChart grid layout with 4 stacked bar charts and cannot figure out how to assign datazoom (nor have I found any examples of this online).
When I place the datazoom before the series, I DO get a zoom controller but only on one of the charts...
dataZoom: [{type: 'inside', start: 50, end: 100},
{start: 50, end: 100 }
}],
series: [{type: 'scatter'...
I won't post code for now (it's large) in hopes that someone can just tell me where to put the datazoom node.
I have no idea why you charts not working. Without example and with complex data you need to call fortune-teller only. In general datazoom can be easily attached to series.
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
}
],
yAxis: [{
gridIndex: 0
},
{
gridIndex: 1
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
grid: [{
bottom: '55%'
},
{
top: '55%'
}
],
series: [{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2012'
}
}, {
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2013'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2014'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2015'
}
}],
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0, 1],
start: 1,
end: 70
},
{
type: 'inside',
xAxisIndex: [0, 1],
start: 1,
end: 35
},
],
};
myChart.setOption(option);
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>

Different color on the bar chart in react native

Hi I want to create a rectangular bar chart in my react native app. Something like below image
I used react-native-chart-kit but its having only one color configuration. I was googling through other carts but did not find the right one to satisfy the referred image. Is there any example with any bar chart library which can be helpful to me
Excuse my code formatting, navigating my way in Stackoverflow.
This is a code example I have used before, change of padding and color is up too you.
/* App.js */
var React = require('react');
var Component = React.Component;
var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
constructor() {
super();
this.toggleDataSeries = this.toggleDataSeries.bind(this);
}
toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dazaSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
this.chart.render();
}
render() {
const options = {
animationEnabled: true,
title:{
text: "All Time Summer Olympic Medals"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right",
reversed: true,
cursor: "pointer",
fontSize: 16,
itemclick: this.toggleDataSeries
},
toolTip: {
shared: true
},
data: [
{
type: "stackedColumn100",
name: "Gold",
showInLegend: true,
color: "#D4AF37",
dataPoints: [
{ label: "United States", y:1118},
{ label: "Soviet Union", y:473},
{ label: "Great Britain", y:273},
{ label: "France", y:243},
{ label: "Germany", y:269},
{ label: "Italy", y:243},
{ label: "Sweden", y:195},
{ label: "China", y:236},
{ label: "Russia", y:194},
{ label: "East Germany", y:192}
]
},
{
type: "stackedColumn100",
name: "Silver",
showInLegend: true,
color: "#C0C0C0",
dataPoints: [
{ label: "United States", y: 897},
{ label: "Soviet Union", y: 376},
{ label: "Great Britain", y: 299},
{ label: "France", y: 272},
{ label: "Germany", y: 272},
{ label: "Italy", y: 212},
{ label: "Sweden", y: 210},
{ label: "China", y: 189},
{ label: "Russia", y: 156},
{ label: "East Germany", y: 165}
]
},
{
type: "stackedColumn100",
name: "Bronze",
showInLegend: true,
color: "#CD7F32",
dataPoints: [
{ label: "United States", y: 789},
{ label: "Soviet Union", y: 355},
{ label: "Great Britain", y: 303},
{ label: "France", y: 310},
{ label: "Germany", y: 283},
{ label: "Italy", y: 236},
{ label: "Sweden", y: 233},
{ label: "China", y: 174},
{ label: "Russia", y: 187},
{ label: "East Germany", y: 162}
]
}
]
}
return (
<div>
<CanvasJSChart options = {options}
onRef={ref => this.chart = ref}
/>
{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
</div>
);
}
}
module.exports = App;

Echarts how to highlight area between 2 line charts

I want to develop an echart that has the area between 2 linecharts highlighted in a color. To achieve this, I made use of stacked area chart. I set the color of the upper area as the highlight color and color of lower area as white so as to achieve my result. However, the color of bigger area is merging with the lower area and producing a diff color. How can I set the colors of 2 areas to not interfere? Is there a way to give z-index to the areas for this?
Here is my code:
option = {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
}
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'联盟广告',
type:'line',
smooth: true,
areaStyle: {color: 'red'},
data:[170, 182, 161, 184, 160, 180, 165]
},
{
name:'邮件营销',
type:'line',
smooth: true,
areaStyle: {color: 'white'},
data:[120, 132, 111, 134, 110, 130, 115]
}
]
};
What I have achieved:
You need to increase the opacity of the below chart:
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
z: -1, // optional, makes the yAxis' splitLines appear on top
data: [170, 182, 161, 184, 160, 180, 165],
smooth: true,
type: 'line',
areaStyle: {}
},
{
z: -1, // optional, makes the yAxis' splitLines appear on top
data: [120, 132, 111, 134, 110, 130, 115],
smooth: true,
type: 'line',
areaStyle: {
color: 'rgb(243, 243, 243)', // color of the background
opacity: 1, // <--- solution
},
}
]
};
The above answer only works if the series do not cross the X axis. Here is the configuration that works if your data is both above and below 0 for both upper and lower boundaries:
data = [{
"date": "2012-08-28",
"l": -2.6017329022,
"u": 0.2949717757
},
{
"date": "2012-08-29",
"l": 0.1166963635,
"u": 0.4324086347
},
{
"date": "2012-08-30",
"l": -0.8712221305,
"u": 0.0956413566
},
{
"date": "2012-08-31",
"l": -0.6541832008,
"u": 0.0717120241
},
{
"date": "2012-09-01",
"l": -1.5222677907,
"u": -0.2594188803
},
{
"date": "2012-09-02",
"l": -1.4434280535,
"u": 0.0419213465
},
{
"date": "2012-09-03",
"l": -0.3543957712,
"u": 0.0623761171
}];
myChart.setOption(option = {
xAxis: {
type: 'category',
data: data.map(function (item) {
return item.date;
})
},
yAxis: {
},
series: [
{
z: -1,
name: 'U',
type: 'line',
data: data.map(function (item) {
return item.u;
}),
lineStyle: {
opacity: 0
},
areaStyle: {
color: '#ccc',
origin: "start"
},
symbol: 'none'
},
{
name: 'L',
type: 'line',
data: data.map(function (item) {
return item.l;
}),
lineStyle: {
opacity: 0
},
z: -1,
areaStyle: {
color: "white",
origin: "start",
// opacity: 1
},
symbol: 'none'
}]
});
Create a third series with the difference between the minimum and maximum values. This data series is used only to be able to color the area between minimum and maximum values.
The stackStrategy option works from version v5.3.3
let max = [10, 22, 28, 20, 23];
let min = [8, 15, 23, 18, 19];
let dif = max.map((v, i) => min[i] - v); // [-2, -7, -5, -2, -4]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
tooltip: {
trigger: 'axis',
},
series: [
{
data: max,
type: 'line',
stack: 'x', // stack name
},
{
data: dif,
type: 'line',
stack: 'x', // stack name
stackStrategy: 'positive', // strategy
lineStyle: {
opacity: 0 // hide line
},
symbol: 'none', // hide symbol
areaStyle: {
color: '#ccc'
},
tooltip: {
show: false // hide value on tooltip
}
},
{
data: min,
type: 'line',
},
]
};