A chart js view plugin for BetaJS
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demos
dist
docs
docsrc
src
vendors
.codeclimate.yml
.gitignore
.project
Gruntfile.js
LICENSE
README.md
package-source.json
package.json

README.md

betajs-chartjs 1.0.10

Code Climate NPM Gitter Chat

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
	grunt

Basic 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:

  {
   display: true,
   text: "Title text."
  }
{
          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