# simple-charts

> Provide ability to draw charts without any dependencies

Latest version **1.0.19** (published 2017-03-19) · 0 weekly downloads

## Install

```sh
npm install simple-charts
pnpm add simple-charts
yarn add simple-charts
bun add simple-charts
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.19 |
| Published | 2017-03-19 |
| First published | 2017-02-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sebastian Heinz |
| Maintainers | sebastian-heinz |

## Links

- npm: https://www.npmjs.com/package/simple-charts
- Repository: https://github.com/sebastian-heinz/simple-charts
- Homepage: https://github.com/sebastian-heinz/simple-charts#readme
- Issues: https://github.com/sebastian-heinz/simple-charts/issues
- npm.io page: https://npm.io/package/simple-charts

## Recent versions

- 1.0.19 (latest) — 2017-03-19
- 1.0.18 — 2017-03-09
- 1.0.17 — 2017-03-09
- 1.0.16 — 2017-03-09
- 1.0.15 — 2017-03-09
- 1.0.14 — 2017-03-09
- 1.0.13 — 2017-03-09
- 1.0.12 — 2017-03-08
- 1.0.11 — 2017-03-05
- 1.0.10 — 2017-03-02
- 1.0.9 — 2017-03-02
- 1.0.8 — 2017-03-02
- 1.0.7 — 2017-03-01
- 1.0.6 — 2017-02-28
- 1.0.5 — 2017-02-28
- … 5 more at https://npm.io/package/simple-charts/versions

## README

# simple-charts
Provide ability to draw charts without any dependencies

## Supported charts
- Line Chart

## Links
### Github Pages
[https://sebastian-heinz.github.io/simple-charts/](https://sebastian-heinz.github.io/simple-charts/)

### NPM 
[![npm package](https://nodei.co/npm/simple-charts.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/simple-charts/)  
[https://www.npmjs.com/package/simple-charts](https://www.npmjs.com/package/simple-charts)

## Installation
```
npm install simple-charts --save
```

## Usage
Include it into your build process and require it.
```js
var SimpleCharts = require("simple-charts")
```

Or use the bundled library dircetly in your Browser.
```html
    <script src="./node_modules/simple-charts/bundle.js"></script>
```
Which will expose a "SimpleCharts"-Variable for you.


```js
var group = new SimpleCharts.LineDataGroup('a');
group.addPosition(1, 1);
group.addPosition(3, 1.5);
group.addPosition(4, 1.7);
group.addPosition(5, 1.9);
group.addPosition(6, 2);

var set = new SimpleCharts.LineDataSet();
set.Height = 200;
set.Width = 600;
set.addLineDataGroup(group);

var chart = new SimpleCharts.LineChart(set);
chart.Update();
chart.appendTo(document.body);
```

### LineChart
Programmatically:  
To create a line chart programmatically you will need to utilize three classes.

1) Create an instance of [LineDataGroup.ts](./src/lib/charts/linechart/LineDataGroup.ts). This object has a 'addPosition(x,y)'-Method. You need to feed it all your coordinates.

2) Create an instance of [LineDataSet.ts](./src/lib/charts/linechart/LineDataSet.ts). The LineDataSet defines the charts size and which LineDataGroups are displayed. You need to add the previous created LineDataGroup to this Instance via the "addLineDataGroup(group)"-method.

3) Create an instance of [LineChart.ts](./src/lib/charts/linechart/LineChart.ts). The constructor takes the previously created LineDataSet as argument. Call the "Update()"-method on the newly created LineChart, followed by the "appendTo(node)"-method. The "appendTo(node)"-method expect an HTML-Node element as input parameter, which will be used to attach the generated chart.

For an example please reffer to [LineChartExample.ts](./docs/src/LineChartExample.ts).

### BarChart
For an example please reffer to [BarChartExample.ts](./docs/src/BarChartExample.ts).

## Structure
 * [config/](./config)
   * [nodemon.json](./config/nodemon.json)
   * [webpack-dev.config.js](./config/webpack-dev.config.js)
   * [webpack-lib.config.js](./config/webpack-lib.config.js)
 * [docs/](./docs)
   * [src/](./docs/src/)
      * [BarChartExample.ts](./docs/src/BarChartExample.ts)
      * [index.ts](./docs/src/index.ts)
      * [LineChartExample.ts](./docs/src/LineChartExample.ts)
      * [LineChartJson.ts](./docs/src/LineChartJson.ts)
   * [bundle.js](./docs/bundle.js)
   * [index.html](./docs/index.html)
   * [styles.css](./docs/styles.css)
   * [tsconfig.json](./docs/tsconfig.json)
 * [src/](./src)
   * [lib/](./src/lib/)
      * [charts/](./src/lib/charts/)
        * [linechart/](./src/lib/charts/linechart/)
          * [LineChart.ts](./src/lib/charts/linechart/LineChart.ts)
          * [LineDataGroup.ts](./src/lib/charts/linechart/LineDataGroup.ts)
          * [LineDataSet.ts](./src/lib/charts/linechart/LineDataSet.ts)
          * [LineLegendArtist.ts](./src/lib/charts/linechart/LineLegendArtist.ts)
          * [LineRasterArtist.ts](./src/lib/charts/linechart/LineRasterArtist.ts)
          * [LineValueArtist.ts](./src/lib/charts/linechart/LineValueArtist.ts)
        * [barchart/](./src/lib/charts/barchart/)
          * [BarChart.ts](./src/lib/charts/barchart/BarChart.ts)
          * [BarDataGroup.ts](./src/lib/charts/barchart/BarDataGroup.ts)
          * [BarDataSet.ts](./src/lib/charts/barchart/BarDataSet.ts)
        * [Artist.ts](./src/lib/charts/Artist.ts)
        * [Chart.ts](./src/lib/charts/Chart.ts)
        * [DataSet.ts](./src/lib/charts/DataSet.ts)
        * [Scale.ts](./src/lib/charts/Scale.ts)
      * [Label.ts](./src/lib/Label.ts)
      * [Line.ts](./src/lib/Line.ts)
      * [Map.ts](./src/lib/Map.ts)
      * [Point.ts](./src/lib/Point.ts)
      * [Rectangle.ts](./src/lib/Rectangle.ts)
      * [Screen.ts](./src/lib/Screen.ts)
   * [index.ts](./src/index.ts)
   * [tsconfig.json](./src/tsconfig.json)
 * [.editorconfig](./.editorconfig)
 * [.gitignore](./.gitignore)
 * [.npmrc](./.npmrc)
 * [LICENSE.md](./LICENSE.md)
 * [package.json](./package.json)
 * [publish.sh](./publish.sh)
 * [README.md](./README.md)

### Development
First install all development dependencies by running:
```
npm install
```

You can run the library in the browser by running:
```
npm start
```

This will start a webpack development server.  
Navigate to: [http://localhost:8080/](http://localhost:8080/)


The [docs/index.html](./docs/index.html)-file is beeing displayed in the development server. It includes the generated bundle.js and uses styles from [docs/styles.css](./docs/styles.css). Additionally the [docs/](./docs/) folder makes up the github page. The [docs/src/](./docs/src/) directory contains the js-code for the page, if the input data for the library need to be tested or changed this is the place.

The library source can be found in [src/](./src). 

Changes to [src/](./src) or [docs/src/](./docs/src/) trigger a compile of the .ts-files, rebundling the generated .js-files as a single bundle.js-file and finally a reload of the browser to reflect the changes.

Note:
The webpack live server will not recreate the bundle.js-file on your disk while developing changes are bundled, the generated bundle.js from the webpack development server will be served from ram.
In order to generate an up to date bundle.js-file you need to manually run:
```
npm run bundle-docs
```
This will updated your bundle.js file on disk. This step should only be necessary if your updates should be reflected on the github page.

### Future Plans
 * BarChart

## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

---
_Source: https://npm.io/package/simple-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._