Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

materialDesign attribute for Material Design Charts #39

Closed
wants to merge 5 commits into from
Closed

materialDesign attribute for Material Design Charts #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ee7f49
manage materialDesign attribute to use the Material Design version of…
SmokyBob Mar 20, 2015
e2f7387
code to manage column with the proper object
SmokyBob Mar 24, 2015
2300c57
fixed spacing
SmokyBob Mar 24, 2015
e25434d
removed unecessary comments
SmokyBob Mar 24, 2015
85ed24d
use markdown for the list but kept anchor tags for consistency with t…
SmokyBob Mar 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,16 @@ <h2>Chart gallery</h2>
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
</google-chart>

<p>Here's a Material Design bar chart:</p>

<google-chart
type='bar'
options='{"title": "Days in a month"}'
cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'
materialDesign>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

material-design

</google-chart>

<p>Here's a bubble chart:</p>

<google-chart
Expand Down Expand Up @@ -224,6 +234,16 @@ <h2>Chart gallery</h2>
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
</google-chart>

<p>Here's a Material Design column chart:</p>

<google-chart
type='column'
options='{"title": "Days in a month"}'
cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'
materialDesign>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

material-design

</google-chart>

<p>Here's a combo chart:</p>

<google-chart
Expand Down Expand Up @@ -268,6 +288,16 @@ <h2>Chart gallery</h2>
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
</google-chart>

<p>Here's a Material Design line chart:</p>

<google-chart
type='line'
options='{"title": "Days in a month"}'
cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'
materialDesign>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same

</google-chart>

<p>Here's a pie chart:</p>

<google-chart
Expand All @@ -290,6 +320,20 @@ <h2>Chart gallery</h2>
[68, 15]]'>
</google-chart>

<p>Here's a Material Design scatter chart:</p>

<google-chart
type='scatter'
options='{"legend": "none"}'
data='[["A", "B"],
[20, 45],
[31, 66],
[50, 80],
[77, 50],
[68, 15]]'
materialDesign>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same

</google-chart>

<p>Here's a stepped area chart:</p>

<google-chart
Expand Down
60 changes: 51 additions & 9 deletions google-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
@status alpha
@homepage http://googlewebcomponents.github.io/google-chart
-->
<polymer-element name="google-chart" attributes="type options cols rows data selection">
<polymer-element name="google-chart" attributes="type options cols rows data selection materialDesign">

<template>
<link rel="stylesheet" href="google-chart.css">
Expand Down Expand Up @@ -179,6 +179,21 @@
selection: [],

chartTypes: null,
/**
* Try to use the Material Design version of the chart.
*
* Material Design Charts are avaliable in BETA for the following types:
* - <a href="https://developers.google.com/chart/interactive/docs/gallery/barchart#Material">Bar</a>
* - <a href="https://developers.google.com/chart/interactive/docs/gallery/columnchart#Material">Column</a>
* - <a href="https://developers.google.com/chart/interactive/docs/gallery/linechart#Material">Line</a>
* - <a href="https://developers.google.com/chart/interactive/docs/gallery/scatterchart#Material">Scatter</a>
*
* @attribute materialDesign
* @type boolean
* @default false
*
*/
materialDesign: false,

packages: null,

Expand Down Expand Up @@ -263,6 +278,16 @@
{ selection: this.chartObject.getSelection() });
}.bind(this));

if (this.materialDesign) {
if (this.type == 'bar') {
this.options.bars = 'horizontal';
this.options = google.charts.Bar.convertOptions(this.options);
}
if (this.type == 'column') {
this.options.bars = 'vertical';
this.options = google.charts.Column.convertOptions(this.options);
}
}

this.chartObject.draw(this.dataTable, this.options);

Expand All @@ -279,39 +304,56 @@
loadChartTypes: function() {
this.chartTypes = {
'area': google.visualization.AreaChart,
'bar': google.visualization.BarChart,
'bubble': google.visualization.BubbleChart,
'candlestick': google.visualization.CandlestickChart,
'column': google.visualization.ColumnChart,
'combo': google.visualization.ComboChart,
'geo': google.visualization.GeoChart,
'histogram': google.visualization.Histogram,
'line': google.visualization.LineChart,
'pie': google.visualization.PieChart,
'scatter': google.visualization.ScatterChart,
'stepped-area': google.visualization.SteppedAreaChart,
'table': google.visualization.Table,
'gauge': google.visualization.Gauge
};

if (this.materialDesign) {
this.chartTypes['bar'] = google.charts.Bar;
this.chartTypes['column'] = google.charts.Bar;
this.chartTypes['line'] = google.charts.Line;
this.chartTypes['scatter'] = google.charts.Scatter;
}else{
this.chartTypes['bar'] = google.visualization.BarChart;
this.chartTypes['column'] = google.visualization.BarChart;
this.chartTypes['line'] = google.visualization.LineChart;
this.chartTypes['scatter'] = google.visualization.ScatterChart;
}
},

loadPackageByChartType: function() {
this.packages = {
'area': 'corechart',
'bar': 'corechart',
'bubble': 'corechart',
'candlestick': 'corechart',
'column': 'corechart',
'combo': 'corechart',
'geo': 'corechart',
'histogram': 'corechart',
'line': 'corechart',
'pie': 'corechart',
'scatter': 'corechart',
'stepped-area': 'corechart',
'table': 'table',
'gauge': 'gauge'
};

if (this.materialDesign) {
this.packages['bar'] = 'bar';
this.packages['column'] = 'bar';
this.packages['line'] = 'line';
this.packages['scatter'] = 'scatter';
}else{
this.packages['bar'] = 'corechart';
this.packages['column'] = 'corechart';
this.packages['line'] = 'corechart';
this.packages['scatter'] = 'corechart';
}

},

loadData: function() {
Expand Down