AngularChart

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #typescript #llm #docker #nodejs #java #windows #awesome-list #pytorch #ios #openai

(★ 12)

AngularChart is an angularjs directive to build charts quickly and easily.

AngularChart 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# AngularChart

AngularChart is an angularjs directive to build charts quickly and easily. 
It lets you to create a chart in a declarative way using specific html tags and attributes with the minimum effort. Indeed it is a unique interface to complex and specific libraries for charts.

## Usage

### Example
For a line chart, put in your html file:

`
<chart title="Line chart example" xData="lineChartXData" yData="lineChartYData" xName="Month" yName="Hit" ></chart>
`

where xData and yData attributes specify the name of the variables that point to the chart data. This variables must be created in corresponding angularjs scope (in the example *lineChartXData* and *lineChartYData* are variables declared in corresponding angularjs scope).

This tag produces the following chart:
![Example image](https://github.com/bitliner/AngularChart/raw/master/examples/img/screenshot.png "Example image")

### Format of chart data

It depends on type of the chart.
If the chart is a line chart, the data is an object with 2 properties:
* **xData**: data of x axis, it is an array of values
* **yData**: data of y axis, it is an array of objects, where every has 2 parameters
  * **name**: the name of the line 
  * **data**: an array of values. The lenght of the array is the same length of xData, and the value in each position of the array coresponds to the x value at same position in the xData array

See the example, and `examples/data/line-chart.json` file to see the format of data of a line chart.

### Html supported attributes

The following attributes of `chart` tag are now supported:
* title: the title of the chart
* subtitle: a subtitle that compares just below the title
* xData: the name of scope variable the holds the data of x axis
* yData: the name of scope variable the holds the data of y axis
* xName: the name of x axis
* yName: the name of y axis
* yInterval: the interval of markers of y axis (if not specified the library calculates it automatically)
* yMin: the minimum value of y axis (if not specified the library calculates it automatically)
* yMax the maximum value of y axis (if not specified the library calculates it automatically)
* formatter: the name of variable in the scope that points to function/value that will be displayed when the mouse is over a point of a line

All attributes are optional, except xData and yData

### Type of charts

Now it supports only a line chart, and it uses HighCharts library to build the charts. More types and more libraries will be supported in the next future.

## TODO

* define the unique interface to other libraries
* support for more libraries to build the charts (d3)
* support for more types of charts (pie chart, etc.)

AngularChart

AngularChart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

AngularChart

AngularChart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README