Google Sheets API Chart - change a given datapoint fillcolor - google-sheets-api

In Google Sheets API, when using a chart shape, how can I colour a given datapoint a custom RGB? In the image below I have changed the color of 3 random datapoints. Is this possible?

It is possible to change the color and use a custom RGB color. If you already have the chart created, all you need to do is to use the batchUpdate method, and when creating the request include updateChartSpecRequest, then you'll need to select the type of chart that you are updating. In your case, based on the screenshot it would be basicChart, then from the chart, you want to update the series since those are the ones that generate the columns, and you can modify the color parameter there according to the official documentation.
Depending on what you want to end up doing, the structure of the request may end up being similar to this:
Request:
'request' : [
{
"updateChartSpec": {
"chartId": integer,
"spec": {
"basicChart": {
"series": [
{
"color": {
{
"red": number,
"green": number,
"blue": number,
"alpha": number
}
},
}
]
},
}
},
}
]
Note:
If you want to do it upon creation, instead of using updateChartSpec you would want to use addChart.
References:
updateChartSpecRequest
Color
BasicChartSeries
BasicChartSpec
addChart

Related

Can we create multiple sheets using Google Sheet API the way we create manually?

I want to add multiple sheets with different values under a google sheet but I cannot find it anywhere. Is it possible?
Your question is quite unclear. In case you're looking for a python way of adding new sheets, then you can refer to google sheets API documentation to Add sheets. You may use the Batch Update and Add Sheet request
{
"requests": [
{
"addSheet": {
"properties": {
"title": <<Your Sheet Name Goes Here>>,
"gridProperties": {
"rowCount": 20,
"columnCount": 12
},
"tabColor": {
"red": 1.0,
"green": 0.3,
"blue": 0.4
}
}
}
}
]
}

Specifying color mapping in react components

Using the new "Colors" section of the analytical designer, I can specify custom colors to use for my insight:
When I get my visualization object, this comes through with properties that look like this:
"colorMapping": [
{
"id": "fdda26a33ca048f28bc702f047c04d73",
"color": {
"type": "guid",
"value": "guid3"
}
},
{
"id": "893b13af5d064ec5ba57f82ea3241bbe",
"color": {
"type": "guid",
"value": "guid4"
}
}
]
Passing that into the config section of the react component props results in some console errors (item.predicate is not a function in color.js:219). It seems to me that the color map values aren't coming through correctly when I get the visualization object.
Is there any way to get the custom color values and set them in the react component props?
If you use Visualization component consuming URI of existing visualization, it will automatically use this color mapping from visualization object so no extra config is needed.
If you use explicit components like BarChart or so, you need to transform colorMapping into form of so called predicates. For more info please read Gooddata.UI documentation and provide also colorPallete config. Hope this helps

How to apply filters in Googlesheet API using Java

I have an API built along with Google Sheet API which interact with my google sheet and returns all the data. Is there a possible way to apply filter in google sheet and get only the data available to the filter(As like how we do filter in google sheet manually)?
You may check the following:
DataFilter that describes what data should be selected or returned from a request.
{
// Union field filter can be only one of the following:
"developerMetadataLookup": {
object(DeveloperMetadataLookup)
},
"a1Range": string,
"gridRange": {
object(GridRange)
},
// End of list of possible types for union field filter.
}
FilterCriteria for showing/hiding rows in a filter or filter view.
{
"hiddenValues": [
string
],
"condition": {
object(BooleanCondition)
},
}
PivotFilterCriteria for showing/hiding rows in a pivot table.
{
"visibleValues": [
string
],
}
Hope this helps!

How can I override the total sum of the EXTJS summary?

I am using EXTJS 4.2.1 and my application has a grid including paging, the grouping summary and the summary feature. I want to override the sum of the summary feature, because it should display the grand total sum of the whole data set and not only for the current displayed page.
Is that possible to override the summary feature to do so?
Thanky you very much for every advice in advance. :-)
Use summaryRenderer in column configuration. It is an undocummented feature of ExtJS allowing you to show custom data in your summary row.
You will have to summarize the data server-side and send them to client where you will access it in the summaryRenderer.
Like so:
columns: {
items: [
{
text: "Column A",
dataIndex: "field_A",
summaryRenderer: function( value, summaryData, dataIndex ) {
var grid = this;
// Get the value here and return it
var result = functionToGetValue( grid );
return result;
}
},
// ...
}
]
The functionToGetValue is the place where you pass the summarization value you sent to your client from server.
How you do that depens on your code. You have access to store via grid.getStore().
It is possible to add the summary data to each record and then simply use store.getAt(0).get( 'summaryValue' ), it is kind of wasteful, but it is simple and it works.

Hiding a series by default in a spider plot

I have a spider plot in using the graphing library of Dojo defined like this:
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Spider",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/charting/axis2d/Default"
], function (Chart, theme, Spider, Tooltip, Legend, Default) {
var chart = new Chart(element).setTheme(theme).addPlot("default", {
type: Spider,
radius: 200,
fontColor: "black",
labelOffset: "-20"
});
var colors = ["blue", "red", "green", "yellow", "purple", "orange", "teal",
"maroon", "olive", "lime", "aqua", "fuchsia"];
$.each(factors, function (index, factor) {
chart.addAxis(factor.name, {
type: Default,
min: factor.min,
max: factor.max
});
});
$.each(presets, function (pIndex, preset) {
var data = [];
$.each(factors, function (fIndex, factor) {
data[factor.name] = preset.values[fIndex];
});
chart.addSeries(preset.short, data, {
fill: colors[pIndex % colors.length]
});
});
new Tooltip(chart, "default");
chart.render();
new Legend({
chart: chart,
horizontal: false
}, $(element).next(".legend")[0]);
});
I add a series for every member of an array called presets and I use a selectable legend that lets the user turn them on or off as they want. However, what I can't seem to find in the docs is how to start a series in the unselected, not visible state? What I ideally want to do is cap the number of series visible when the page loads because in some cases I have up to 14 presets and it just looks a mess until the user deselects a bunch. So I'd like to have, say, every preset above the first 5 be hidden at the start.
Here's a crude fiddle I've knocked to demonstrate. What I want is to have some of the series unselected when the plot is first displayed.
Update: I tried adding this after adding my series:
var checkboxes = $(".dijitCheckBoxInput").each((index, elem) => {
if (index > 4) {
elem.click();
}
});
Which works, but seems very fragile. If they change the class assigned to checkboxes, it'll break. Also, it prohibits me using more than one set of dojo checkboxes because I don't have a good way to tell the difference. (Note, the IDs of the checkboxes added by the SelectableLegend are dijit_form_CheckBox_0, dijit_form_CheckBox_1, etc, which also gives no useful information as to what they are related to). I thought I might be able to use the legend placeholder div as a way to select the descendant checkboxes, but it appears that Dojo replaces the placeholder entirely with a table.
i looked into the dojo code and found the area in which the shapes are toggled on & off whitin the SelectableLegend.js :
var legendCheckBox = query(".dijitCheckBox", legend)[0];
hub.connect(legendCheckBox, "onclick", this, function(e){
this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName);
legend.vanished = !legend.vanished;
e.stopPropagation();
});
The toggling process is very complex and is based on many local attributes:
_toggle: function(shapes, index, isOff, dyn, seriesName, plotName){
arrayUtil.forEach(shapes, function(shape, i){
var startFill = dyn.fills[i],
endFill = this._getTransitionFill(plotName),
startStroke = dyn.strokes[i],
endStroke = this.transitionStroke;
if(startFill){
if(endFill && (typeof startFill == "string" || startFill instanceof Color)){
fx.animateFill({
shape: shape,
color: {
start: isOff ? endFill : startFill,
end: isOff ? startFill : endFill
}
}).play();
}else{
shape.setFill(isOff ? startFill : endFill);
}
}
if(startStroke && !this.outline){
shape.setStroke(isOff ? startStroke : endStroke);
}
}, this);
}
I tried also checking & unchecking the dijit/form/Checkbox in a legend manually, but that does not trigger the _toggle function in any case, even if you do a render() / fullrender() on the chart.
With that in mind it seems that there is no other possibilty to toggle the series on and off than by firing the onclick events manually.
To make your code less fragile, you could access the Checkbox widgets within the legend manually using:
query(".dijitCheckBox", legend); // Should deliver an array containing
the widgets.
and triggering the onclick event on them. Their keynumber in the array should correspond to the order the series where added...
Dojo is a fine piece of work, please dont stop working with it !
dojox/charting/Series has an attribute called dirty which according to the API docs is a "flag indicating whether or not this element needs to be rendered".
Alternately, if you are limiting the display of some series you can write a separate interface for adding them. For example, loop over the first 5. Then create a select box or list of check boxes with all entries and an onchange event that calls chart.addSeries.
Keeping a reference to each series you create will allow you to later call destroy() or destroyRecursive() on it if the user no longer wishes it displayed.
So while ideally you could toggle the display of these series, the worst case senerio is that you just add, destroy, and read based on some user input.
Using a templated widget will allow you to keep this interface and the chart tightly linked and support reuse.
BTW, consider using "dojo/_base/array" and "dojo/query" in place of the jquery
I think i've got it !
I found another way to access the checkboxes ! It's the same way dojo uses internally to connect the "toggle code" to the onclick event. First take a look at this from SelectableLegend.js (Lines 150 - 156):
// toggle action
var legendCheckBox = query(".dijitCheckBox", legend)[0];
hub.connect(legendCheckBox, "onclick", this, function(e){
this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName);
legend.vanished = !legend.vanished;
e.stopPropagation();
});
It looks like they use the ".dijitCheckBox" class to find the checkbox dom element and connect to it using dojo/connect. Now based on that, i made this function:
function toggleSeries (legend,num) {
dojo.query("*",legend.legends[num])[0].click();
dijit.findWidgets(legend.legends[num])[0]._onClick(); }
It doesn't use any class definition (because of the *) and it accesses the areas where the checkboxes are from within the SelectableLegend. It needs the SelectableLegend and the number of the series you want to deactivate as parameters. Here the jsfiddle example with this function & hiding all 4 of your series with it:
http://jsfiddle.net/luciancd/92Dzv/17/
Also please notice the "onDomReady" Option in jsfiddle, without it: doesnt work in IE.
And the ready function within the code !
Lucian
I have updated your code http://jsfiddle.net/92Dzv/18/
Here is the key to toogle.
dom.byId(le._cbs[0].id).click();
dom.byId(le._cbs[2].id).click();
Choose the index of your legend and set to _cbs.
By this way le._cbs[0].id you will get the real id of checkbox (that inside in the widget) and then just use click()
Note : le is came from here.
var le = new Legend({
chart: chart,
horizontal: false
}, legend);