Hello! (Just posted this in Spreadsheet API as I am not sure which group this really belongs in)
This is going to seem silly as I have a found a really roundabout way to achieve my goals already, I am wondering now if there is a simpler way. I have created a set of charts for one of my projects using the Google Code Playground and essentially stapling solutions together from those sources. I took the Data Resource Request example (data was stored in a spreadsheet already), and then attached it to the Image Bar Chart example as my PM wanted me to add labels to the end of Bar Charts. I would then save the resulting image and drop them into the document that way. It was not the most automated process and now it was eaten by the Google Gadget Editor... I had saved my Frankenstein code in the Google Gadget Editor in iGoogle and it just deleted all of my XML files so I am trying to recreate what I did (however my looping logic is failing to return to me). Example Chart: <https://lh4.googleusercontent.com/-eQHllWt9e2g/T2ur-Ca8gyI/AAAAAAAAAAY/nVARsp6YByg/s1600/AGG.png> Is there any easier way to achieve this, is there a gadget that can be used? Or even created? Alternatively... The solution I did have is about 80% away from being completed (and attached to this post), I am just having a bear of a time with the looping part. It is just really not clicking for whatever reason this time. I know I'm close but the Google Code Playground Debugger and I are not friends and I cannot get it to cooperate with me to save my soul (I wish it would!). -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/4RLxUYcsEDAJ. To post to this group, send email to google-visualization-api@googlegroups.com. To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
<!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['imagechart']}); </script> <script type="text/javascript"> function drawVisualization() { // This is the code to pull a spreadsheet in from a published site... // Further in the line &range determines what rows and columns you read from var query = new google.visualization.Query( 'http://spreadsheets.google.com/tq?key=0Ak0WtxlJXbFIdHlxM2thYWhBYnNlaUhxeXR3RG1tMEE&range=A1:D4&pub=1'); // Send the query with a callback function. query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var options = {}; // 'bhg' is a horizontal grouped bar chart in the Google Chart API. // The grouping is irrelevant here since there is only one numeric column. options.cht = 'bvg'; // Change the visible axes, x to only display x, y to only display y, '' to display nothing options.chxt = 'x'; // Add a data range. /* var min = 0; var max = 700; options.chds = min + ',' + max; */ // Change the series colours // Seperating with ',' changes colour by column // Seperating with '|' changes colour by row options.chco = '3399CC,80C65A,FF0000,FFCC33,BBCCED,C870FF'; // The FOLLOWING sets labels at the end of each bar. // Add % suffix to the labels. var suffix = 'N** %'; // Draw labels in a colour. var color = '000000'; // Google Chart API needs to know which column to draw the labels on. // Here we have one labels column and one data column. // The Chart API doesn't see the label column. From its point of view, // the data column is column 0. //var index = 0; // -1 tells Google Chart API to draw a label on all bars. var allbars = -1; // 10 pixels font size for the labels. var fontSize = 12; // The following loop now draws one long statement for chm var maxCols = 2; var divider = '|'; //var stringHolder = '0'; var labelString = [suffix, color, index, allbars, fontSize]; //var labelString = '0'; // The point of this for loop is to iterate multiple "indexes" and // concatenate them to one another thus creating an entry for each // row rather then manually having to do it with a long string like // BlahBlah|BlahBlah2|BlahBlah3 for each. for(var count=0; count<= maxCols; count++) { //index = count; //var stringHolder = [suffix, color, index, allbars, fontSize]; //stringHolder = labelString; //labelString = stringHolder; //labelString += [suffix, color, index, allbars, fontSize]+ '|'); labelString = labelString + '|' + [suffix, color, index, allbars, fontSize]; //labelString = labelString + '|' + stringHolder; //index = index + 1; index++; } options.chm = labelString.join(','); // Create and draw the visualization. new google.visualization.ImageChart(document.getElementById('visualization')). draw(data, options); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 500px; height: 300px;"></div> </body> </html>?????????????????
