How to change the appearance of the google line chart

Question

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/

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

From your image link given, your desired customizations can be done via Google Chart API options (eg 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.