I am looking for an example how to create an embedded Bubble Chart inside the Spreadsheet programmatically on Apps Script or to edit (apply options) an existing embedded Bubble Chart (ideally to see both examples of code)
Google Chart Gallery provides an example for a standalone web app.
Spreadsheet: Class EmbeddedScatterChartBuilder shows examples how to create embedded charts except the Bubble Chart!
Charts.ChartType doesn't have BUBBLE value!
Or maybe possible to use EmbeddedScatterChartBuilder to create a Bubble Chart? If so could somebody provides such an example of code please.
What I want: I want to control Size and Colour of Bubbles and also I want to Series to show Ids (but it doesn't accept range with strings - only numbers!)
colorAxis: {
Values: [0,1,8,15],
colors: ['white', 'green','yellow','red']
},
sizeAxis: {
minValue: 0,
maxSize: 30
},
hAxis: {
title :'Deadline',
ticks: [{v:0, f:'now'},{v:1, f:'soon'},{v:2, f:'approaching'},{v:3, f:'Distant'}],
min: 0,
max: 3
},
And why Google doesn't provide EmbeddedBubbleChartBuilder?
I found that Old version of the Chart Editor provides the opportunity to apply colours manually for series:
This is the best result which I reached manually customise a Bubble Chart in the Old Chart Editor. This is what I would like to create programmatically (or with formulas in a sheet:
But when I scale down the Chart I see such a picture:
UPDATE
As of April 11, 2018, Google Sheets now officially supports Bubble Charts.
See change log.
I think your best bet is to look for analogs between the Apps Script APIs and the example code used to embed charts that can be found in the chart gallery.
The EmbeddedScatterChartBuilder class has a method called setOptions that is used to set advanced options. These options probably correspond to options variable listed in the sample code you linked to in the Chart Gallery. So looking at the samples you linked to there are options such as bubble and colorAxis that you should be able to pass to the setOptions method.
Here's a full list of advanced configuration options taken from the same page you linked to in your question:
https://developers.google.com/chart/interactive/docs/gallery/bubblechart#configuration-options
Try them out and see what works.
Related
I need to show data in several types of charts and I like the look and feel of the Material design charts over the default google charts.
Linecharts and barcharts work nicely, however, a piechart does not seem to be available in Material design... Or at least.. I can't get it to work.
On this page, Google states that for every corechart, a Material design is available:
https://developers.google.com/chart/interactive/docs/gallery/barchart
Creating Material bar charts In 2014, Google announced guidelines
intended to support a common look and feel across its properties and
apps (such as Android apps) that run on Google platforms. We call this
effort Material Design. We'll be providing "Material" versions of all
our core charts; you're welcome to use them if you like how they look.
Creating a Material Bar Chart is similar to creating what we'll now
call a "Classic" Bar Chart. You load the Google Visualization API
(although with the 'bar' package instead of the 'corechart' package),
define your datatable, and then create an object (but of class
google.charts.Bar instead of google.visualization.BarChart).
On the piechart page, Material design is not mentioned at all:
https://developers.google.com/chart/interactive/docs/gallery/piechart
I have tried to draw the table as explained above, loading 'pie' instead of 'corechart' and loading 'google.charts.Pie' instead of 'google.visualization.PieChart'. This does not work.
Has anyone got a google piechart to work in Material design? Or is it really not available?
Add options theme in function drawChart()
var options = {
theme: 'material'
};
I created a line chart using app script and inserted it on google site, it shows up fine on google site as the following screenshot, but I am just wondering if I could resize the chart to make it bigger so that all legends (e.g: store F) will fully show up. (It's like I could drag the chart and make it big in excel)
Here is the part of the code I used (copied from a tutorial) and changed a bit, I tried to use .setOption to change the width but nothing happened.
var chart = Charts.newLineChart()
.setDataTable(dataTable)
.setTitle("Testing Chart")
.setOption("width",1000)
.build();
var app = UiApp.createApplication().setTitle("Testing Chart");
app.add(chart)
return app;
In terms of inserting the app script into google site, I did set up the width of "app script gadget" to 100% so I guess this is not the issue. Any advice would be greatly appreciated!
Thanks!
Going through the docs, you should try changing setOption() to be like:
.setOption("theme", "maximized")
maximized from the docs (in line with theme):
Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. Sets the following options:
I am creating a google scatter chart using google apps script EmbeddedChart Option.
Below is the datatable that I want to assign to the chart.
The first column goes to x axis labels and graph is getting generated for NPP and Noise values.
NPP Noise
-1.28, -7.84625, 2.33
-1.83, -12.561, 4.55
I need to set the datalabels for each scatter point in the graph and its working with setting "datalabel" to "value". But my requirement is to display different text as data labels not the value. Like below, I have added a column datalabel and given the values for each point.
NPP Noise DataLabel
-1.28, -7.84625, 2.33, Spring
-1.83, -12.561, 4.55, Hibernate
Can I display this labels as datalabel on the scatter points?
Code:
var chart = NormalGraphSheet.newChart()
.setChartType(Charts.ChartType.SCATTER)
.setPosition(2, 1, 7, 6) .addRange(normalPlotCalculationsSheet.getRange(tableStartRow,2, noOfCols, 4))
.setOption('series', {0: {pointSize: 14, color: 'red'},1: {pointSize:0},2: {pointSize: 10, color: 'green'}})
.setOption('trendlines', {1: {type: 'linear',color:'blue',lineWidth:2,opacity:80}}).build(); NormalGraphSheet.insertChart(chart);
Okay, so I googled and looked around the community for quite sometime, and managed to see this very similar post, only difference I can see is the data you guys use, the first top answer suggests just adding a Tool tip for each of the data points, which I'm guessing is not what you want.
The second top answer suggests using the Visualization API, which is the same as to this accepted answer from WebApps Community (with a similar concern), though the second answer seems to demonstrate that custom data labels are automatically included when formatted in a specific way:
First column: X axis
Second column: Y axis
Third column: Data label
When looked at in the customization tab via spreadsheets, the value of Data Label is shown as Custom though when trying to manually do a chart, and going to the Data Label drop-down again, it only shows None and Value. So I think, since you are doing the chart via the script, it better for you to use the Visualization API. Hope this helps you somehow. Good luck.
I have a Google fusion table that has a map based off a column of coordinates. The map and fusion table work fine for my application, but I'm noticing inconsistencies between the map view through Google fusion tables, and the map in my application which uses that exact fusion table. I'm wondering if anyone out there has had similar issues and if/how they alleviated them.
Inconsistencies:
Overlay color. The overlay color is set to green through the Google fusion table map view, but displays red in my map app, no matter what I change it to or how many times I change it.
Number Formatting: I've formatted the numbers to be displayed with
commas (123456 should be 123,456) through Google fusion tables UI. It is displaying like this when I view the column through the fusion table interface but it still displays it as 123456 in my application.
Google map pop out balloon. The pop-out balloon is not big enough for the text contained within it. So part of the text hangs off the bottom of the balloon. In some browsers/sessions it works fine, in others it hangs off the bottom.
Thank you for reading my question.
I also had run into your pop-out balloon overflow problem. Prior to today, I had just solved it by avoiding use of the <p> tags, favoring instead <br>. Today I searched for a separate solution which led me to an answer I think you'll get much benefit from: Tip: Use dynamic templating
I also ran into your first issue with overlay displaying as red. This is a baffling bug with fusion tables map styles. The only way I resolved it was by setting each style to default, then changing the overlay color to "static for all entries".
About number formatting. using the dynamic formatting link above, you can see that there's a way to deliver the formatted number, which uses a variable property of {$data.formatted.ColumnName}.
I hope that this answers all of your questions.
Ive found a solution to why the overlay colors are inconsistent and also why the pop-out boxes are not large enough for the containers:
You need to add "styleID" and "templateId" properties to the Fusion Tables Layer object:
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: 297050
},
map: map,
styleId: 1,
templateId: 2
});
The way to find what your ID's are is a little tricky. Open your fusion table, click on the "map" tab and click "publish" in the dropdown from the map tab. Copy that URL and paste it somewhere, look for something like this towards the end of the URL:
"y=2&tmplt=2"
the "y" is the styleID and the "tmplt" is the templateId.
I'm still working on the solution for the number formatting, thanks dwagPDX, im going to try your solution and let you know how that goes.
https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
https://groups.google.com/forum/#!topic/fusion-tables-users-group/EceabeRWqWc
I have lots of slices of (non-geographical) data that I'm trying to
view via google maps. It basically breaks down into N 'maps', each
containing M 'layers'.
This sample shows basically what I want to do:
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html
I can get it to switch between two different maps by providing two
custom MapTypes (much like the Map/Sattelite toggle in the sample),
but I can't figure out how to make it so I can toggle on and off an
additional overlay layer (like the 'terrain' checkbox).
The official docs vaguely mention this (
http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface
) but unfortunately the bit I'm after ('See Adding MapType Controls
below') is a dead link, and I can't find this bit of the
documentation.
Does anyone know where the documentation on how to control the drop-
down toggle boxes exists?
Thanks
If you are looking to have a particular overlay appear or disappear based on a checkbox, you can check out http://geojason.info/2010/overlay-map-management-with-google-maps-api-v3/.
However, that involves checkboxes that are not actually on the map. They need to go in a sidebar or above the map or whatever. If you are hoping to be able to add things to the control where the "terrain" and the "layer" checkbox appear, I don't think there's any hooks in Google Maps API v3 to do that. I'd be happy to be wrong, but I don't think it's simple and I would expect any solution that managed to accomplish it would be brittle.