FAQ Database Discussion Community


Changing background colour of a Google Charts (Google Visualization) Graph

javascript,css,google-visualization
I'm trying to simply change the background color of a line graph I've created using Google Charts. I feel like I'm following Google's Official Documentation, but none of the changes I'm specifying are being applied. I'm passing the options like so: var options = { backgroundColor: 'black', chartArea: { backgroundColor:...

google chart shows wrong data

c#,asp.net,google-visualization
I'm having some trouble creating a data chart with Google charts, I don't know why my chart is showing this way? As you might see in the image the y value should be 2 but I'm getting a 3 or so. What can cause this problem? This is my current...

Google Charts legend is not correctly displayed

javascript,html,css,graph,google-visualization
I am creating google chart and my legend is not being folded into pages. My code is somthing like <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script> google.load("visualization", "1.1", { packages: ["bar", "table"] }); var chart; var table; var graphOptions = { title: 'Liczba ekspozycji w miesiącu', pointSize: 5, vAxis: { viewWindowMode: "explicit", viewWindow:...

Google Visualization Area Chart not Shaded

javascript,json,charts,google-visualization
I'm using the Google Charts API and am trying to make a combo chart with four series. Two of them would be of type line and two of them area. The area chart doesn't seem to be shaded (although it has a mouseover vertical line like an area chart). I've...

Removing Label in Google Visualization Pie Chart

javascript,charts,google-visualization
I am trying to hide the labels in my pie chart. I think the correct word is labels? But I could be wrong. Basically I have a pie chart That displays some data, outside of the pie chart it has a label with a color cube and a name next...

Google charts - Stacked Bar Chart. How to introduce different colours within each bar

javascript,charts,google-visualization
I am creating a stacked bar chart using google api. Each bar will consist of 3 "slices" representing Negative, Neutral and Positive feedback we received. my data and options code looks as follows: data = google.visualization.arrayToDataTable([ ['Category', 'Negative', 'Neutral', 'Positive', ], ['icon', 10, 800, 5], ['colour', 5, 5, 5], ['copy',...

Google Charts Add Markers to Linecharts Function

javascript,google-visualization
I am using this code to display google linecharts: google.load('visualization', '1', {'packages':['linechart']}); google.setOnLoadCallback(drawChartYear); function drawChartYear() { var data = google.visualization.arrayToDataTable([ ['Year', 'Cars', 'Bikes', 'Both'], ['2012', 1000, 400, 1400], ['2013', 1170, 460, 1630], ['2014', 660, 1120, 1780], ['2015', 1030, 540, 1570] ]); var chart = new google.visualization.LineChart(document.getElementById('line_chart_year_div')); chart.draw(data, {width: 800, height:...

Google Charts json data not loading

c#,ajax,json,asp.net-mvc,google-visualization
I'm using ASP.NET MVC and Google Charts to try and generate a simple line graph with two data records. I'm pulling the data successfully from the database, but the data isn't appearing on my chart. The data consists of two records with two fields: WeekOfEntry(DateTime) and Weight (decimal). The chart...

Google Visualiation Table Won't Return From Function

javascript,charts,google-visualization
I'm having some trouble making the datatable for a google timeline inside of a function and then returning the datatable out side of the function. My intent is to eventually have this function called inside of a loop to make several datatables off of a spreadsheet, for now it's static....

Can't render Google Visualizations ChartWrapper

javascript,google-visualization
Hey stackoverflow community, I'm trying to render a Column Chart using google.visualizations.ChartWrapper but I am unable to get the following javascript code to work: google.load('visualization', '1', {packages: ['corechart','controls']}); google.setOnLoadCallback(drawDashboard); function drawDashboard() { var data = google.visualization.DataTable(); data.addColumn('string', 'Element'); data.addColumn('number', 'FillRate'); data.addRows([['Tank11Chocolate', 100.0],['Tank20Gold', 50.0]]); var chart = new...

Using Google visualizations how can you trigger a select event on a specific row?

javascript,jquery,google-visualization
I currently have one table that that when a row is clicked on, I would like to simulate clicking the same row on a GV table. Here is the listener. $(".mytable tbody tr td").click(function() { var colIndex = $(this).parent().children().index($(this)); var rowIndex = $(this).parent().parent().children().index($(this).parent()); google.visualization.events.trigger(chart, 'select', null); }); This is triggering...

Chartkick rails 4 and table charts

ruby-on-rails-4,google-visualization,chartkick
I can't seem to figure out how or if Chartkick supports table charts. I tried table_chart as if I were doing any other chart, but it didn't work. Anyone know if chartkick supports that? I couldn't find it in the documentation.

How to fix overlap issue in Google Visualization - Materials Line

javascript,google-visualization
Looks like when the value for two different fields is the same, you can only see the most recent on on top. Is there a way to account for the overlapping so that we can see each field that belongs to the value? Example here - google.load('visualization', '1.1', {packages: ['line']});...

How can I get png(base64) with images inside of svg in Google Charts?

javascript,svg,google-visualization
How can I get base64 with image inside of svg? Check this Fiddle that I got from another question. If you see the second graphic, its not generating the image that overlays the bar. var chart = new google.visualization.ColumnChart(document.getElementById('chart_survey')); $("[fill='#FFFFFF']").each(function( index, element ) { var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); svgimg.setAttributeNS(null,'x',element.x.baseVal.value); svgimg.setAttributeNS(null,'y',element.y.baseVal.value);...

speeding up google charts rendering or alternatives

javascript,optimization,google-visualization
So I need to display basic graphs for around 30,000 data points and I am currently using Google Charts with the following code in javascript with a little jinja thrown in there: <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['line']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable();...

how to remove legends from MS chart in asp.net

asp.net,google-visualization,google-chartwrapper
I am trying to remove or disable the legend from MS chart but i can't seem to find where and how to remove the legends <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var options = { title: 'Total Hours By Project Category', is3D: true };...

google charts change background color

charts,background,google-visualization,background-color
I saw some previous questions/answers here on StackOverflow but none of the code provided in those answers seemed to work with my chart: Here is my code: <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["bar"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Month', 'Sales', 'Expenses'], ['January', 200, 150], ['February',...

How to parse string to JSON

javascript,json,google-visualization
I have a string like below var str = "{u'MALWARE TROJAN_HORSE': 16, u'MALWARE DUQU': 0, u'MALWARE STUXNET': 8, u'MALWARE STALLING_MANUFACTURING_PLANTS': 1, u'MALWARE VIRUS': 0, u'MALWARE WORM': 0, u'MALWARE NUCLEAR_POWER_PLANTS': 8}" I need to pass it to google visualization api chart as data object in the form as show below: var...

Export google chart in a dashboard as png

charts,google-visualization,dashboard
I am trying to export google chart in a dashboard to png image through a button. But I get the following error- One or more participants failed to draw() undefined is not a function Here is the code: <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> //...

How to get the instance of a previously created Google Chart?

javascript,charts,google-visualization
I have a Web App which uses Google Charts. There are more than one chart on a page. I successfully create and render the charts. Depending on the user's filters, I receive new chart data via Ajax. How can I reacquire a chart object and update it, if I don't...

Culture for days in Google Calendar Chart

google-visualization
How can I change the first day letter from Google Calendar Chart to match the culture? Actually the months are right. ...

Google Visualization Charts not displaying in Firefox only

firefox,google-visualization,ssl-certificate
I came across this issue the other day, I have been using the Google Visualization API specifically for a chart. Everything was working in Chrome and IE but when trying to view the page in Firefox the chart would not display. I did receive an error in the Firefox developer...

Google Geochart - Unable to set region to a specific province

javascript,google-maps,google-visualization
I'm trying to display City markers for cities within the Province of Quebec Map. Based on google documentation, we should be able to set the resolution option to provinces and set the region to the ISO code (Eg: US-GA..). When i try with CA-QC (Found this code here on wikipedia....

Cant seem to get a query Right

google-spreadsheet,google-visualization
Inside of spreadsheets, i have some data, A:BH inside a tab called: Info. i was trying to query against it in a new tab, something like this: =Query(Info!A:BH, "select c,d,e,f,m,n,o where (o contains 'Trenton' or o contains 'Braddock')", -1) Firstly, i think i did the query wrong, secondly, i was...

Google charts X-axis don't look so good

javascript,html,web,google-visualization,pygooglechart
I draw a chart using google charts API. and i get this chart: My problem in this chart is the X-axis. The labels are not in look so good. if I have more Strings in X-axis it's look like this: I think the problem is because the X column type...

Rendering a google chart using datastore data

python,google-app-engine,google-visualization
I am struggling to use data stored in datastore to render a google chart. At the moment I have queried the data model: results = MyDataModel.query().fetch() It is at this stage I am unsure what to do. For example, is it best to create a list in python like: result_list...

google chart api draws negative axis as well though minValue is 0

javascript,google-visualization,google-chartwrapper
I have a google chart as follows which plots Age for various IDs. However, as age cannot be negative, I want it to be only on the positive axis. I have given the minValue for vertical axis as 0, however it still shows the negative axis. How can I fix...

How to change Google Charts number format for controllers?

charts,google-visualization
When implementing a dashboard using Google Charts we are able to change the format of displayed quantities in tables with google.visualization.NumberFormat(). However, we haven't been able to find a way to change number formats in controllers. We would like to accomplish what the image shows: We looked in the documentation...

how can i make my JSON dynamically looks the same as in the example below for google charts?

php,json,for-loop,charts,google-visualization
First of all check this example: https://jsfiddle.net/hisham91/ws6mjkps/ CREATE TABLE `googlecharts` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `item_code` VARCHAR( 100 ) NOT NULL , `sold_date` DATE NOT NULL , `serial_no` INT NOT NULL ) ENGINE = MYISAM ; INSERT INTO `googlecharts` VALUES (1, 'scratch card 3 USD', '2014-11-21',...

Google chart showing blank using JSON

php,json,google-visualization
I've been trying to get some Google Charts working from some data on a local db. I think I have got the JSON coming out properly now. { "cols": [ { "id": "", "label": "Inits", "pattern": "", "type": "string" }, { "id": "", "label": "SalesVal", "pattern": "", "type": "number" }...

Google Chart Api make use of datetime value

php,mysql,json,google-api,google-visualization
Hello I want in my chart to display the datetime, I made some search over the stack and I found similaer problems like this one but I could not understand how to fix that. The part of the code that i believe i should change is the below.. <?php $DB_NAME...

google charts remove event listener

events,google-visualization,listener
I haven't seen much documentation and cant seem to get my code to work. the code snippet is below. I'm trying to remove the on mouse over listener but have had no success. Google charts docs has the method as such - google.visualization.events.remove Listener(listener_handler). I'm uncertain what the listener_handler actually...

How to show tooltip on a Google Pie Chart on legend hover?

charts,google-visualization,legend,mousehover,legend-properties
I want to show the tooltip of the slices on the mouse hover in the legend. By default it shows the tooltip only when the mouse is over a slice of the pie. Currently the nearest thing I have is to show the tooltip when I click on the legend,...

Using jQuery to read a CSV to pass to the Google Visualization API

javascript,jquery,arrays,csv,google-visualization
I am trying to create a map from data in a CSV using the geochart package of the Google Visualization API (https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart). The workflow is as follows: Convert CSV to array using jQuery Convert array to datatable Generate chart from datatable I am able to generate the map when I...

Invalid JSON string

php,mysql,json,google-visualization
Hi im trying to make a line chart for my web displaying data from my database in MysQL but i get an inavlidd JSON string error and nothing display this is my code. I'm using as example the server side code from https://developers.google.com/chart/interactive/docs/php_example HTML <html> <head> <!--Load the AJAX API-->...

Google chart redraw onclick

javascript,jquery,drop-down-menu,charts,google-visualization
I am trying to make a chart from which the data is selectable through various dropdown menu's and a date selector. I can't seem to find a way to pass new data in the chart on a click event. I got it working so far that onClick, it draws an...

Matplotlib heatmap: Image rotated when heatmap plot over it

python,matplotlib,plot,google-visualization,heatmap
I am trying to plot a heatmap on top of an image. What I did: import matplotlib.pyplot as plt import numpy as np import numpy.random import urllib #downloading an example image urllib.urlretrieve("http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png", "/tmp/cards.png") #reading and plotting the image im = plt.imread('/tmp/cards.png') implot = plt.imshow(im) #generating random data for the histogram...

Using array index/variables in Animated Google Barchart Labels

javascript,arrays,google-visualization
I have a series of tables in my database, and want to use google charts to show this data. I'd also like it to animate nicely, and I found a good code snippet from somewhere that helps out with this, and I'm modifying it. As the tables in my database...

Download Google Chart as jpeg instead of png?

javascript,google-visualization
I am currently downloading Google Charts as png with the following code: var imgUri = my_chart.getImageURI(); var url = window.URL || window.webkitURL; linkPNG = document.createElement("a"); linkPNG.href = imgUri; linkPNG.download = title+".png"; link.click(); It works fine. Unfortunately, my users need a jpeg instead of a png, and my usual var imgURL...

Json to DataTable for Google Visualization wrong output

javascript,php,json,csv,google-visualization
I am trying to create a chart using Google Visualization from a CSV. I have parsed the CSV file using PHP and output the data I require as Json. To be specific, Column 1 contains dates formatted as "dd/mm/yyyy" and Column 2 contains prices formatted to 2 d.p. just as...

Responsive more than one google charts

javascript,charts,google-visualization
I'm using google charts in my website, and since yesterday i'm searching about a solution to make my charts responsive, I found one in stackoverflow : <script> function resize () { // change dimensions if necessary chart.draw(dataTable1, options); chart.draw(dataTable2, options); chart.draw(dataTable3, options); } if (window.addEventListener) { window.addEventListener('resize', resize); } else...

angularjs angular-google-chart, remove the percent from the tooltip of piechart

angularjs,google-visualization
I use angularjs and angular-google-chart directive to make PieChart. This is a working* example on plunkr The A pie is with true data but i want to render something like B pie because I have on element ('mnhn') who have 99% of the data and the others elements are almost...

Uncaught Error: Container Is Not Defined - Google Charts

javascript,charts,google-visualization
I'm trying to load a google chart and am getting the following answer: Uncaught Error: Container is not defined I've read the other questions about this message for Google charts and the most common problem seems to be if getElementById isn't working correctly. However, I don't believe this is the...

Display West Africa with Google GeoChart

javascript,google-visualization
I'd like to display a worldmap (GeoChart) using Google's Chart API where some countries are listed by country and others are displayed based on a grouping/region. My data might look like this: [["Country","DataValue"],["United States",2000],["West Africa",3000],["Great Britain",1500]]; Is this possible to do? I tried playing with the displayMode property of the...

Removing extra spaces in Google Charts

javascript,google-visualization
You can notice that there are many unwanted space (in the left,top and bottom too) in the chart. How to clear them ? var options = { 'width':500, 'height':400 }; ...

How to change the text 'Value' in Chartkick's geochart

google-visualization,chartkick
I am rendering a geochart with the following: <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> <%= geo_chart Company.group(:country).count, colors: ["#33C1FF", "#008ED6"] %> This works great, but the text used on the map to specify the count for each country is 'Value'. I am using the Google Charts API to do this, and...

Draw a column chart using Google Charts for this JSON var_dump(); data

php,json,mysqli,google-visualization,nested-loops
How can I put the below PHP-JSON code into a column chart using Google-Visualization? <?php /* Connect to database */ $mysqli = new mysqli("localhost","root","123","charts"); if(mysqli_connect_errno()){ trigger_error('Connection failed: '.$mysqli->error); } /* Build the query */ $query = "SELECT a.item_code,a.total,a.date FROM chart_values a, (SELECT DISTINCT item_code FROM chart_values GROUP BY item_code,date) b...

Passing data with Google Charts

javascript,json,google-visualization
I'm trying to pass data with Google Charts and I am getting an error in the console that reads "Uncaught Error: Every row given must be either null or an array." I found this post on stackoverflow already however it doesn't seem to be applicable. Dynamic data with Google Charts....

Ajax responseText URL not working

php,mysql,ajax,google-visualization
I am trying to query mysql db and put the results in the chart. It has two file index.php and getpiechartdata.php. Both of this file are on my remote server in /public_html/ folder. I am not sure whether index.php is even calling my getpiechartdata.php script. Although the data returned (when...

How to make a bubble chart from CSV file?

javascript,php,csv,google-visualization,bubble-chart
So I have the following file, data.csv. Which looks like this: TestID,Cronbach,Percent Correct,Population 12416,0.866,0.17,26 12421,0.945,0.21,8 12385,0.777,0.40,258 12412,0.85,0.44,34 12407,0.831,0.45,48 And I want it to look like this: [ ["Test ID", "Cronbach", "Percent Correct", "Population"], ["12416", 0.866, 0.17, 26], ["12421", 0.945, 0.21, 8], ["12385", 0.777, 0.40, 258], ["12412", 0.85, 0.44, 34], ["12407",...

R googleVis: How can I gvisGeoMap multiple variables using markers

r,google-visualization,googlevis,gvisgeomap
I have a dataframe in which some states are characterized by two variables. Briefly you can think of every row as a vector of (state,var1,var2). I want to map states using googleVis package. My approach is to use markers whose size and color represent var1 and var2 respectively. I can...

change cursor to pointer for all rows of the datatable except the last one

javascript,php,jquery,css,google-visualization
Here is what I have done so far var table = new google.visualization.Table(document.getElementById('report_results')); var view = new google.visualization.DataView(d); var swidth = screen.width; view.setColumns([2,3,4,5,6,7,8,9,10]); var cssClassNames = {'hoverTableRow': 'hover-table-row'}; var swidth = screen.width; table.draw(view, {height: 700,width:swidth,'cssClassNames':cssClassNames}); <style> .hover-table-row{ color: #9a64ff; cursor:pointer; } </style> Now I have the cursor as pointer in...

Google Charts - dont link 2 points

google-visualization,googlevis
I have a line in my Chart that represent a stat that always resets at 8am. Is there anyway I can prevent the Chart from connecting the 2 points in that particular position? I have not been able to find such setting or property for LineCharts. The pic shows how...

How can I group columns with Chartkick

ruby-on-rails,ruby,charts,google-visualization,chartkick
I have the following data structure: @data = [['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350]] and I want to display a column chart with Chartkick grouped by Year. I tried the following plan call in my Rails...

Is it possible to add borders for legend in google visualization core chart?

javascript,google-visualization,bar-chart
Is it possible to add borders for legend in google visualization core chart? Here is the code http://jsfiddle.net/mchx2nLe/1/ google.load('visualization', '1', { packages: ['corechart'] }); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Status', 'Completed', 'In Progress', 'Registered / Not Started', 'Past Due', { role: 'annotation' }], ['Safety', 100.0, 0.0,...

Adding value in Google Charts

javascript,html5,charts,google-visualization
I'm trying to build a chart on some dynamic data. I found Google Chart api which looks easy to use however I'm having problem modifing my row values. For example in this code Mushroom initially has the value of 3 but later when I parse more data and I get...

Angular JS Working with JSON Data

json,angularjs,google-visualization
I am using https://github.com/bouil/angular-google-chart for Data Visualization. I need to get data from JSON file. Below is the snippet which was responsible for data display on html page: $scope.chartObject.data = {"cols": [ {id: "t", label: "Topping", type: "string"}, {id: "s", label: "Slices", type: "number"} ], "rows": [ {c: [ {v:...

Show tooltip on load with google charts

javascript,google-visualization,tooltip
I'm trying to use the tooltip.trigger = 'selection' and setSelection([{row:4,column:null}]), but the tooltip doesn't show up automatically. Only when you click on another tooltip. Here's a jsfiddle showing the problem. Any ideas what I can try? Thanks!...

Draw Google Line Chart with multiple missing values

charts,google-visualization
I copied this code from Google Line Chart reference and made some small changes: function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Dag'); data.addColumn('number', 'Målvikt'); data.addColumn('number', 'Uppmätt vikt'); data.addRows([ [1, 37.8, 55.0], [2, null, 69.5], [3, null, 57], [4, null, 18.8], [5, null, 17.6], [6, null, 13.6], [7, null,...

annotation in google bar chart

javascript,google-visualization,bar-chart
I don't see annotations in my google charts. Here is the code. http://jsfiddle.net/sn37vp58/1/ google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Status', 'Completed', 'In Progress', 'Registered / Not Started','Past Due',{role: 'annotation'}], ['Safety',100.0,0.0,0.0,0.0,'Hello'],['Conduct...

How to add HTML to chart elements

javascript,angularjs,google-visualization
I am trying to add costum HTML to my google organization chart: $scope.chartElements = []; $scope.chart = { type: "OrgChart", data: { "cols": [ {"label": "Name", "pattern": "<div class='text-danger'></div>", "type": "string"}, {"label": "Manager", "pattern": "", "type": "string"}, ], "rows": $scope.chartElements } }; $http.get(api.getUrl('getMyFamilyTree', null)) .success(function (response) { response.forEach(function (y) {...

Google charts, alternative stacked column chart

charts,google-visualization
I want to be able to create a graph showing a top 5 per day in a week. The graph I'm trying to mimic look like this: So my problem with the google charts api is that I cannot find a way to for each day to contain possibly different...

Google Visualization Chart Data Range

charts,google-visualization
I have this code, <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", '1', {packages:['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E/edit#gid=0'); query.setQuery('order by A'); query.send(handleQueryResponse); } function...

Changing x axis ticks in Material google bar charts

javascript,charts,google-visualization
I am trying to build a usage bar chart using https://developers.google.com/chart/interactive/docs/gallery/barchart#top-x. I was wondering how can I maximize the range of the X-axis tick marks? I've tried doing that in the fiddle https://jsfiddle.net/gbta075L/ using the suggestion from another post - set x Axis range in google chart but that did...

How to set default value in google.visualization.string filter

google-visualization
Hi i wanna set default value in my string filter when page is loaded.below is my code but it is not working.can any one tell me whats wrong on that.Thank you. var fteFilter = new google.visualization.ControlWrapper({ 'controlType': 'StringFilter', 'containerId': 'control_fteFilter', 'options': { 'filterColumnLabel': 'FTE Id' , 'value' : '1234', 'matchType':'any',...

Multiple trendlines in Google Charts

javascript,jquery,charts,google-visualization
I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line. Here is my code example with a single line based on a date and value to build the chart: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script>...

Max and min values on Google Charts

google-visualization
How can I set a max and a min value on a Google Chart? I've tried this without success: vAxis: { viewWindowMode:'explicit', viewWindow: { max:3000, min:500 } } This is all the code I'm using: <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["bar"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data =...

Google Charts with 3 columns

javascript,google-visualization
I want to create a google chart which has 3 columns. Also I want to add 2 sets to data to it. Please refer to the JS code for understanding. Also you can check https://jsfiddle.net/dt6syt2w/2/ I'm looking forward to getting some solution from user : asgallant google.load('visualization', '1', {packages: ['corechart',...

Google visualization Data Table header event

javascript,google-visualization
I am not able to trigger event when header is clicked in google visualization table. I have disabled the sort in the DataTable. http://jsfiddle.net/xj3ww79n/ google.visualization.events.addListener(table, 'select', function() { alert('Hi'); var row = table.getSelection()[0].row; alert('You selected ' + data.getValue(row, 0)); }); ...

How I change the size of bubbles in google charts?

javascript,html,web,google-visualization,pygooglechart
I create a bubble chart using google-charts. It seems like this: Here the data that i use: My Question is How I change the size of bubbles so they will be like the column:"bubble size" that in the table? And how can i make the X-axis be more wider?...

Adding Google Chart function to Objects

javascript,charts,google-visualization
I'm trying to add a Google Charts feature to an object. I've tested out the following code in NetBeans and it has worked giving it arbitrary data arrays: google.setOnLoadCallback(costChart); function costChart() { var energyType = 'Monthly Cost'; var energySavings = [1,2,3,4,5,6,7,8,9,10,11,12]; //=this.costSavings var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']; // Create the data...

Google charts different colors w/ single series Material bar chart

charts,google-visualization
Using {role: 'style'} I can apply different colors to a single series bar chart. But if I use the new Google "Material" barcharts, I can't. "regular" Google charts (works): google.load("visualization", '1.1', {packages:['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Element', 'Density', {role: 'style'} ], ['Copper', 8.94, 'color: #FF9900'], ['Silver',...

Google Charts backgroundColor not working with example code

javascript,google-visualization
I use code from example page to create horizontal bars chart: Option backgroundColor work for other chart types, like this and that. Is there are way to change background color for Bars charts? google.load('visualization', '1.1', {packages:['bar']}); function drawVisualization() { // Create and populate the data table. var data = new...

Google Stacked Bar Chart color

javascript,html,google-visualization
How can I change the color of the column in a stacked bar chart? If I specify the colors attribute in my MakeBarChart function, it only takes the first parameter. And makes the other columns a lighter version of that color. This is what it looks like; And this is...

Uncaught error: Invalid type for google table column

javascript,json,google-maps,google-visualization
I recently started using google visualization due to its simplicity. But while implementing in my recent project i seem to have run into a bit of trouble. The program shown is used to pull data from a JSON object and utilize it to display data in the google tables. Now...

Annotation chart google function after rangechange

javascript,google-api,google-visualization
I'm using the annotation chart and the map from google api, I would like to know if there's anyway to trigger a function after the range change when the user's clic releases. I just find this google.visualization.events.addListener(chart, 'rangechange', feed_with_chartMap); in the documentation but the function is not only called when...

How to get column name/index when header is clicked

javascript,google-visualization
How to get the column name(header) when the respective column name /header is clicked in google visualization table? http://jsfiddle.net/xj3ww79n/ google.load('visualization', '1', {packages: ['table']}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time'); data.addRows(5); data.setCell(0, 0, 'John'); data.setCell(0, 1, 10000, '$10,000'); data.setCell(0, 2, true);...

Table has no column in google charts and php

php,json,google-visualization
i need help with my google chart...i currently have a getdata.php which has a query with information from my DB table..i have a page that enables one to select a particular user, once the user is selected i use the &_GET option to get an ID and feed it into...

Adding property in php datatable for google chart custom html tooltips

javascript,php,jquery,datatable,google-visualization
I am trying to create custom html tooltips in my google chart by adding them into the datatable, right now my datatable is being created in PHP like this: $datatable = array('cols' => array( array('type' => 'string', 'role' => 'domain', 'label' => 'Month'), array('type' => 'string', 'role' => 'tooltip'), array('type'...

Display annotation text in google charts for max and min values only

asp.net,google-visualization
How to display annotation text in google charts for max and min values only. I do not want to display and annotation message for other values please see image for info Note :Just want to show text for circled points...

How to apply a label color to a Pie Chart slice from Google Charts API

google-visualization
Hej guys , I tried 2 or 3 different functions but i can´t get any of them to work. I want that the label´s from the 3 different stats are colored in for example white. A picture is below. var options = {'title':'Lead statistik von<?php echo $_SESSION['user_name'];?>', 'width':400, 'height':300, backgroundColor:'#0a0a0a',...

Google Charts unsafe-eval

javascript,jquery,google-visualization,google-chartwrapper,csp
I have removed script-src: 'unsafe-eval' from my CSP headers for security purposes. I have noticed this now broke Google Charts. The chart now fails to render and displays the error: Invalid JSON string: {} Any ideas or is Google just blowing it and allowing unsafe-eval in their libraries? I had...