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.
Related
I am exploring AnyChart JS to plot candlestick stock chart. While Anychart.js has a dedicated component to plot trading volume on a second plot window, I am used to seeing volume plotted at the bottom of the price chart window. It just looks cleaner this way. The document does not mention plotting volume like this but that it can clearly be done as demo on one of their pages. ( page here: https://www.anychart.com/products/anystock/overview/ )
So I am wondering if anyone know of an "official way" of plotting volume in the same window of stock price or we have to hack it by plotting a second series (perhaps a third series even so we can show different colour of up and down days).
The source code of this sample is available in the AnyStock gallery. The idea is to create a second series (Volume) on the plot and apply a custom series height and logarithmic scale to it.
Anychart support team provided the source code as per the sample shown in the earlier comment.
You need lines 48 - 67 in the sample -
playground.anychart.com/BVHPxBya – AnyChart Support 2 hours
See code here
I am working on a prototype dashboard and had fun so far building it with Vega Lite. However, I hit a road block on the following points:
I want to add a P10 and P90 line on all the bar charts. I have followed the tutorial for the single bar chart with line but I was not able to work it with repeat charts.
Adding labels on every single bar similar to this tutorial but could not make it work with the repeat charts
I want to add a second pie chart which will be identical to the one I have except that the values will be multiplied with a constant. I tried a nested concat but it didn't work. The charts disappeared without an error.
I failed to replicate this tutorial for selecting and higlighting and I would appreciate the help
Is it possible to add filtered data tables in Vega or Vega lite?
Check the code here
For adding the line on bar chart, you can provide layer config as an array inside the spec object and provide multiple marks for it.
Similarly, add mark config with value text inside the layer. So, that will help to add the labels.
A similar pie chart is added at the bottom but the values of this pie chart is achieved by multiplying it with a value. For example: 5. The pie chart gets disappeared because it share the same axis or we can say theta config. To fix that you need to add a resolve config. Check the documentation for resolve config.
The selection configuration given in this tutorial has been added in the layer, where the mark bar is provided.
In vega or vega-lite, the data can be filtered using the transform config. Its use is somewhat similar to the calculate config which was used in your code. Check the documentation for filter transform.
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.
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.