Skip to content

Instantly share code, notes, and snippets.

@frontrangerider2004

frontrangerider2004/Project Structure

Last active December 4, 2015 14:55
Show Gist options
  • Save frontrangerider2004/fc68de9a9ed201e1dd57 to your computer and use it in GitHub Desktop.
Save frontrangerider2004/fc68de9a9ed201e1dd57 to your computer and use it in GitHub Desktop.
Download ZIP
Bare-bones example of using <chart-bar> in a custom wrapper that holds data.
Raw
app.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../FrontEnd/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./my-chart.html">
<style>
.container {
height: 800px;
width: 800px;
border: 2px dotted orange;
}
</style>
</head>
<body>
<div class="container">
<my-chart></my-chart>
</div>
</body>
</html>
Raw
my-chart.html
<link rel="import" href="../FrontEnd/bower_components/polymer/polymer.html">
<link rel="import" href="../FrontEnd/bower_components/chart-elements/chart-bar.html">
<dom-module id="my-chart">
<style>
chart-bar {
height: 70%;
width: 70%;
border: 2px dashed green;
}
</style>
<template>
<chart-bar data="[[data]]" options="[[options]]"></chart-bar>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-chart',
properties: {
data: {
type: Object,
notify: true,
value: function () {
return {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
}
},
options: {
type: Object,
notify: true,
value: function () {
return {
responsive: true
};
}
}
},
ready: function(){
console.log(this.is + ' ready()');
},
});
}());
</script>
</dom-module>
Raw
Project Structure
.
├── app
│   ├── my-chart.html
│   └── polymer-app.html
|
└── FrontEnd
└── bower_components
├── chart-elements
├── Chart.js
├── polymer
└── webcomponentsjs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment