Develop Reference

Is there a way to modify the leader line items display total in addition to percentage in Google Apps Script generated pie chart?

Is there a way to adjust the leader line labels on a pie chart generated using Google Apps Script in Google Docs? Currently the lines show the label and the percentage of the slice.
Ideally, I'd like it to either list the Total Value of the Slice & the percentage, but even if I can just get it to show the Total Value only would work. I've tried searching Google's documentation but can't seem to find anything other then putting the values on the slices themself (Which I think makes the charts look really poorly made when the value can even fit on the slice).
I've included a code snippet showing how the chart is built, as well as an example chart with the item I'm looking to adjust circled.
var chart = Charts.newPieChart()
.setTitle('Chart Title')
.setDimensions(864,534)
.setDataTable(dataTable)
.setColors(["#1CADE4", "#00B6DE", "#00BECC", "#00C3B0", "00C68B", "#56C663"])
.setOption('legend',{position: 'labeled', textstyle: {color: 'black',
fontsize: 10}})
.setOption('pieSliceText', 'none')
.build()

Highcharts: Add ONE custom label to yAxis

I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!

You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/

Plugin for custom horizontal line Y-axis marker on grid of a Line chart with Chart.js

I need to create "up" and "low" markers on along the Y-axis of my Chart.js line chart. I can't seem to find an out-of-the-box way of doing this. Anybody can help me on how to write a plugin to achieve something like this? (See the horizontal red lines along the 70 and 50 Y-axis.

I found a plugin called Chart.Annotations.js on the Chart.js GitHub root page. It is exactly what I needed!
You need to add the following attributes to your options object. Add an annotations: attribute per line you want to draw. In my case I had 2.
annotation: {
annotations: [{
type:'line',
mode:'horizontal',
scaleID:'y-axis-1',
value:'10',
borderColor:'#000000',
borderWidth:2
}]
}
Look at this screenshot of my final implementation:

Google Charts API labels with lines

Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.

You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart:

How to change the appearance of the google line chart

Is there any way to change the UI or design of the google chart. I want my chart to look like
http://www.flickr.com/photos/41695354#N08/6020984362/in/photostream/

First you need to load the right chart API. For line charts,
<script> google.load("visualization", "1", {packages:["corechart"]}); </script>
Then set the graph options like this
chart.draw(data, {width: X, height: Y, title: <graph Title>, pointSize:4, legend:bottom,
hAxis: {title: <x-axis title>, titleTextStyle: {color: 'red'}},
vAxis: {title: <Y-axis title>, titleTextStyle: {color: 'red'}}
});
You can vary the value for pointSize to either increase or decrease the value points on the graph. If you don't want the points to show on the graph, delete the pointSize option.
Google automatically assigns colors to the different data sets you have. It may be possible to choose specific colors

To change the color of a data series, line chart, etc, use the following code :
var options = {
title: 'My Chart',
series: {0:{color:'F38921',lineWidth:2}}
};

If you're wanting to change the colors, check out this color picker that lets your preview different themes on google visualization charts/graphs
http://www.philipwhitt.com/projects/google-visualization-theme-picker
Select the color list you want then put them in the colors options like so:
var chartOptions = {
title: 'Some Title',
colors: ['#657CD0','#DA68A0','#06C3C0','#777B80','#7C6D70','#7C0850','#F75870']
};

From your image link given, your desired customizations can be done via Google Chart API options (e.g. setting legend at bottom, setting columns/series colours)
If you want to configure the look and feel of a Dashboard, you can (i) adapt the Google Chart CSS Themes at http://battlehorse.github.com/google-charts-controls-gallery/#google-visualization-controls-theme-plus which would customize the chart itself (ii) consult ThemeForest Google Chart Themes such as http://themeforest.net/item/dream-works-responsive-admin-template/full_screen_preview/1988987?ref=gundoel007 , but most of them only configure the look and feel outside the actual chart.