Skip to content

Commit

Permalink
Updated README with BAR chart details
Browse files Browse the repository at this point in the history
  • Loading branch information
tshaddix committed Aug 11, 2013
1 parent 41b9728 commit 2b80d79
Showing 1 changed file with 77 additions and 0 deletions.
77 changes: 77 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,82 @@ You can also easily create Timelines through the HTML Attribute API as well.
</html>
```

##Bar##
A Bar is a Google Visualization [bar chart](https://developers.google.com/chart/interactive/docs/gallery/barchart) which shows metric values over a dimension.

####Using JS####

- `constructor(profile, startDate, endDate)` - The Bar constructor takes in the Google Analytics profile, start date, and end date. All of these parameter options are discussed above in the *Basics* section.
- `addMetric(metric, label)` - Adds the `metric` to the timeline with the name `label`.
- `setDimension(dimension)` - Sets the dimension for the bar chart.
- `setOptions(opts)` - Overwrites any default options for the bar chart. See bar chart options [here](https://developers.google.com/chart/interactive/docs/gallery/barchart#Configuration_Options). `opts` is a simple object, for example: `{ colors : ['#000', '#111', '#222'] }` would assign colors to the timeline.
- `draw(container, callback)` - Calling draw will draw the Timeline into the `container` element. The `container` can either be a `String` of the target element's id, or the DOM element object itself.

```html
<html>
<head>
</head>
<body>
<div id='chart'></div>
<script src='oocharts.js'></script>
<script type="text/javascript">
window.onload = function(){
oo.setAPIKey("{{ YOUR API KEY }}");
oo.load(function(){
var bar = new oo.Bar("{{ YOUR PROFILE ID }}", "30d");
bar.addMetric("ga:visits", "Visits");
bar.addMetric("ga:newVisits", "New Visits");
bar.setDimension("ga:continent");
bar.draw('chart');
});
};
</script>
</body>
</html>
```

####Using HTML Attributes####
You can also easily create Bar Charts through the HTML Attribute API as well.

- `data-oochart` - Should always have value of `bar` for bar charts.
- `data-oochart-start-date` - The beginning date of the data. Can be relative, formatted `YYYY-MM-DD`, or null (indicating current date).
- `data-oochart-end-date` - The ending date of the data. Can be relative, formatted `YYYY-MM-DD`, or null (indicating current date).
- `data-oochart-profile` - The Google Analytics profile ID.
- `data-oochart-metrics` - A list of comma-deliminated metrics in the format: `metric,label,metric,label`. Check out the example below.
- `data-oochart-dimension` - The dimension to group metric values by.

```html
<html>
<head>
</head>
<body>
<div data-oochart='bar' data-oochart-start-date='30d' data-oochart-dimension='ga:continent' data-oochart-metrics='ga:visits,Visits,ga:newVisits,New Visits' data-oochart-profile='{{ YOUR PROFILE ID }}'></div>

<script src='oocharts.js'></script>
<script type="text/javascript">
window.onload = function(){
oo.setAPIKey("{{ YOUR API KEY }}");
oo.load();
};
</script>
</body>
</html>
```

##Pie##
A Pie chart is really just what it sounds like: A Pie chart. This chart uses the Google Visualization [Pie Chart](https://developers.google.com/chart/interactive/docs/gallery/piechart) to display a metric over a dimension (such as visits by browser type).

Expand Down Expand Up @@ -446,6 +522,7 @@ You probably want to throw your own styles on the charts, right? You can do this
- `oo.setTimelineDefaults(opts)` - Sets the default options of all new Timelines to `opts`.
- `oo.setTableDefaults(opts)` - Sets the default options of all new Tables to `opts`.
- `oo.setPieDefaults(opts)` - Sets the default options of all new Pies to `opts`.
- `oo.setBarDefaults(opts)` - Sets the default options of all new Bar charts to `opts`.

This is especially helpful if you want to stick to the HTML API. Set your defaults before the load call, and all HTML Attribute charts will pick up those defaults.

Expand Down

0 comments on commit 2b80d79

Please sign in to comment.