google-visualization

Google Charts vertical axis in whole numbers

by

Simple answer: yes, but it’s complicated. If you just want numbers to display as whole numbers, then it’s easy: function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ [‘x’, ‘Cats’, ‘Blanket 1’, ‘Blanket 2’], [‘A’, 1, 1, 0.5], [‘B’, 2, 0.5, 1], [‘C’, 4, 1, 0.5], [‘D’, 8, 0.5, 1], … Read more

How can I attach the image or icon on edge of google line chart

by

use the getChartLayoutInterface method var layout = chart.getChartLayoutInterface(); to find the (x, y) location of the point var xPos = layout.getXLocation(data.getValue(row, xColumn)); var yPos = layout.getYLocation(data.getValue(row, yColumn)); then add the image manually and adjust accordingly google.charts.load(‘current’, {packages: [‘corechart’, ‘line’]}); google.charts.setOnLoadCallback(drawBackgroundColor); function drawBackgroundColor() { var data = new google.visualization.DataTable(); data.addColumn(‘number’, ‘X’); data.addColumn(‘number’, ‘Y’); data.addRows([ [0, 0], … Read more

vertical reference line in google timeline visualization

by

Create a first task to represent current date: dataTable.addRows([ [”, ‘Hoy’, new Date(2014,9,2), new Date(2014,9,2) ], Create a function with jQuery to make this task longer: function MarcarHoy (div, filas){ $(‘#’+div+’ text:contains(“Hoy”)’).css(‘font-size’,’11px’).attr(‘fill’,’#A6373C’).prev().first().attr(‘height’,filas*41+’px’).attr(‘width’,’1px’).attr(‘y’,’0′); } Call the function: chart.draw(dataTable, options); MarcarHoy(‘example1’,23); google.visualization.events.addListener(chart, ‘onmouseover’, function(obj) { MarcarHoy(‘example1’); }); } The result: Source: Viviendo en la Era de la … Read more

Google chart legends – Overlapping text

by

check that the chart is not being drawn while hidden see the following snippet, the chart is hidden by default, then shown once the chart’s ‘ready’ event fires notice, it produces the same result as posted in the question… google.charts.load(‘current’, { callback: function () { var dataTable = new google.visualization.DataTable(); dataTable.addColumn(“date”, “Data”); dataTable.addColumn(“number”, “Ton./Hora”); dataTable.addColumn(“number”, … Read more

How to add colors to spefic columns in Google Charts

by

you could assign the color as a column property on the data table then build the colors array based on the visible columns see following working snippet… google.charts.load(‘current’, { callback: drawChart, packages: [‘corechart’] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn(‘string’, ‘Year’); data.addColumn(‘number’, ‘Q1’); data.addColumn(‘number’, ‘Q2’); data.addColumn(‘number’, ‘Q3’); data.addColumn(‘number’, ‘Q4’); data.addRow([‘January 2016’, 500, … Read more

How to go about debugging JavaScript in the HtmlService in Google Scripts

by

You can use your browser’s Developers Tools. In Chrome, press the f12 button, OR choose More Tools, Developer Tools, and window will open in your browser that looks like this: One of the tabs is labeled Console. You can print information to the console by using a: console.log(‘This is text: ‘ + myVariable); statement. When … Read more

variable background colors in google line chart

by

using a ComboChart with seriesType: ‘area’ and isStacked: true you can define as many ranges as needed visibleInLegend: false hides the area series from the legend then you can set a custom type: for the series you want to track, such as ‘line’, in the following working snippet… google.charts.load(‘current’, { callback: function () { var … Read more

Google Apps Script: How to set “Use column A as labels” in chart embedded in spreadsheet?

by

Found it! Set the option useFirstColumnAsDomain to true with EmbeddedChartBuilder.setOption. This option appears to be undocumented. I found it by going to “Publish chart” (click on the chart, then select from the drop-down in the top right) and inspecting the JavaScript data structure in the given code. To be exact, I created a chart with … Read more