Google charts piechart Material design - gchart

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'
};

Related

Looking for an example how to create Bubble Chart inside the Spreadsheet programmatically on Apps Script

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.

How to render in HTML5 a chart made with FSharp.Charting?

There doesn't seem to be any documentation around this capability from the FSharp.Charting library, which is briefly mentioned in the main webpage in this paragraph:
F# Charting is designed so that the same charting specifications can
be supported when using different charting implementations. For
example, the Try F# charts use similar charting specifications,
implemented using in HTML5 using Dojo Charts.
Any sample around that I can follow?
The documentation is not very clear - what it is trying to say is that F# Charting does not support HTML5, but you can use other libraries that do.
The most advanced one is probably XPlot, which provides wrappers over Google Charts and Plot.ly and in both of the cases, you can get the HTML representation of the chart (and do whatever you want with it).
For example, I used it to display chart in a Suave-based web site:
open XPlot.GoogleCharts
// Create a chart - the API is similar to F# Charting
let chart = Chart.Pie [ for r in results -> r.Option, r.Votes ]
// Get the HTML of the chart (you also need to load Google Charts in JavaScript)
let html = chart.InlineHtml

Google Maps with night view?

Is it possible to use with google api v3 something similar to this: https://earthbuilder.google.com/10446176163891957399-13737975182519107424-4/mapview/
Should I use google map engine to apply the night view overlay?
Please advice
The link no longer works, but assuming you want something like Google Maps' "night mode" (that automatically activates when navigating during night), yes, it's possible!
You need to use map styling, as described in this official documentation.
With style options you can customize the presentation of the standard Google map styles, changing the visual display of features like roads, parks, businesses, and other points of interest. This means that you can emphasize particular components of the map or make the map complement the style of your app.
(...)
To style your map, call GoogleMap.setMapStyle() passing a MapStyleOptions object that contains your style declarations in JSON format.
You can use the Maps Platform Styling Wizard as a quick way to generate a JSON styling object.

Primefaces bar Charts export to JPEG or PNG

I am trying to find out Export feature for Bar charts to JPEG/PNG... I didn't find this any where in Prime-faces demo section.
Please let me know if this feature is available in prime faces charts or not.
Also, Please let me know if we have any animation features like fade in/fade out etc...
Please share the examples or URLs on this, if any.
Any thing on this will be much appreciable!!
Primefaces chart components is based on jqPlot charting library , and although this library does not have the export feature , it is possible to achieve it with the help of jquery... (I haven't tried it myself) You can google a bit for export jqplot to png in google and you will see several articles / forum threads about the export of jqplot
here are several
Output plots to PDF/etc.
Export jqplot to PNG <-- got several links inside
export-jqplot-to-png
So basically you need to add commandButton that will call some js code that will generate the image...
I think that it is possible, but don't know how easy it is...
Regarding the animation , again , the jqplot does have some animation look here
I don't know if primefaces got it...
But its not so hard at all to use the original jqPlot charting library with primefaces...
UPDATE
Just noticed that the jqPlot does have the export to image option... look here
so you can ask the primefaces team to upgrade their jqPlot version... or use directly the jqPlot library in your project
The Primefaces chart components don't come with a built-in export feature. There is a JFreeChart integration example that produces charts in png format that can be download with a right-click.
From theory fade-in/fade-out features could be implemented with javascript/jquery.

Google maps api: Customising the MapTypeControl for separate map overlays

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.