betajs-chartjs
v1.0.10
Published
BetaJS-ChartJS is a ChartJS Plugin for the BetaJS Framework.
Downloads
8
Readme
betajs-chartjs 1.0.10
BetaJS-ChartJS is a ChartJS Plugin for the BetaJS Framework.
Getting Started
You can use the library in the browser and compile it as well.
Browser
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="chartjs/chartjs.js"></script>
<script src="betajs/dist/betajs.min.js"></script>
<script src="betajs-browser/dist/betajs-browser.min.js"></script>
<script src="betajs-dynamics/dist/betajs-dynamics.min.js"></script>
<script src="betajs-chartjs/dist/betajs-chartjs.min.js"></script>Compile
git clone https://github.com/betajs/betajs-chartjs.git
npm install
gruntBasic Usage
The charts module registers a wrapper for the ChartJS via the dynamics system. You can instantiate it as follows (is recommendable to read the ChartJS Docs page - http://www.chartjs.org/docs/):
BetaJS.Dynamics.Dynamic.activate();
<ba-chart-bars
ba-title=""
ba-legend=""
ba-chartdata=""
ba-chartlabels=""
ba-options=""
ba-randomcolors=""
ba-customdataobj=""
>
</ba-chart-bars>
There are multiple chart types, each one represented by a different dynamic. The currently supported types are:
- ba-chart-bars (gives support for horizontal bar chart and mixed charts - bars and line)
- ba-chart-pie
- ba-chart-doughnut
- ba-chart-line
- ba-chart-polar
- ba-chart-polar
Each one of these can be implemented with the following partials:
- ba-title (object|string): Title to show on the chart. false by default, can be configured with a string or with a json object with the following format (check more configuration options here http://www.chartjs.org/docs/#chart-configuration-title-configuration):
{
display: true,
text: "Title text."
}- ba-legend (object|boolean): Wether to show the legends or not. Legends can be configured with a json object with the following format (http://www.chartjs.org/docs/#chart-configuration-legend-configuration):
{
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}- ba-chartdata* (array): Array of dataset objects. You can find how to put together a dataset on ChartJS docs. Usually, the minimun required configuration is:
[{
label: "Dataset",
data: [1, 2, 3, 4, 5]
}]- ba-chartlabels* (array) : Labels for the dataset values. An array of strings with the following format:
["January", "February", "March", "April"]*Note: both ba-chartdata and ba-chartlabels are mandatory if ba-customdataobj is null
- ba-options (array) : A set for chart options. It contains general options, and specific options for each chart type. Refer to ChartJS docs for more info. A small example could be the following:
{
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}ba-randomcolors (boolean): If you don't want to configure specific colors for each dataset, you love life on multicolor or you just want to drive the user crazy changing chart colors each time the chart refresh, you must set this partial to true.
ba-customdataobj (object): A custom chart configuration object. Just put the object on this partial and it will display the chart as you want (No matter which partial you use). The object must contain all of the chart configuration. This is ment to be used for very specific user demands. Important!: all of the other configurations on other partials will be ignored, except for the ba-title and the ba-legend . Example, for a line chart:
{
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
}or a bars chart:
{
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
}Demos
You can find demos for each dynamic and partial on the demos folder, but I give you a small pie chart example (Remember to load the libraries!):
<ba-chart-pie
ba-chartdata="{{
[
{
label: 'My example dataset',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
}}"
ba-chartlabels="{{['January', 'February', 'March', 'April', 'May', 'June', 'July']}}"
ba-randomcolors="{{true}}"
>
</ba-chart-pie>
<script>
BetaJS.Dynamics.Dynamic.activate();
</script>and that previous bar chart using the custom data object:
<ba-chart-pie
ba-customdataobj="{{{
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
}}}"
>
</ba-chart-pie>
<script>
BetaJS.Dynamics.Dynamic.activate();
</script>Note that it doesn't matter if I put a bar chart config on the ba-chart-pie dynamic, as this overrides all of the configs.
Links
| Resource | URL | | :--------- | --: | | Homepage | http://betajs.com | | Git | git://github.com/betajs/betajs-chartjs.git | | Repository | https://github.com/betajs/betajs-chartjs | | Blog | http://blog.betajs.com | | Twitter | http://twitter.com/thebetajs | | Gitter | https://gitter.im/betajs/betajs-chartjs |
Dependencies
| Name | URL | | :----- | -------: | | betajs | Open | | betajs-browser | Open | | betajs-dynamics | Open |
Weak Dependencies
| Name | URL | | :----- | -------: | | betajs-scoped | Open |
Main Contributors
- Pablo Iglesias
License
Apache-2.0