https://github.com/juijs/jui-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)
https://github.com/juijs/jui-chart

animation canvas chart javascript realtime svg

Last synced: 6 days ago
JSON representation

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)

• Host: GitHub
• URL: https://github.com/juijs/jui-chart
• Owner: juijs
• Created: 2015-12-10T16:43:06.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:32:20.000Z (about 2 years ago)
• Last Synced: 2024-12-12T18:52:08.591Z (13 days ago)
• Topics: animation, canvas, chart, javascript, realtime, svg
• Language: JavaScript
• Homepage: https://codepen.io/collection/nLydod/
• Size: 8.21 MB
• Stars: 57
• Watchers: 10
• Forks: 25
• Open Issues: 108
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Installation

### NPM

```bash

npm install juijs-chart

```

### Browser

```html

```

### ES Modules

The difference with the existing method is that you need to add the module directly using the 'use' function.

```js

import graph from 'juijs-chart'

import BarBrush from 'juijs-chart/src/brush/bar.js'

import ColumnBrush from 'juijs-chart/src/brush/column.js'

import TitleWidget from 'juijs-chart/src/widget/title.js'

graph.use(BarBrush, ColumnBrush, TitleWidget);

```

## Usage

```html



```


The UI component creation code is the same as the existing one.

```js

graph.ready([ "chart.builder" ], function(builder) {

    var obj = builder("#chart", {

        width: 600,

        height : 600,

        theme : "classic",

        axis : {

            x : {

                type : "block",

                domain : "quarter",

                line : true

            },

            y : {

                type : "range",

                domain : function(d) { return [d.sales, d.profit ]; },

                step : 3,

                line : true,

                orient : "right"

            },

            data : [

                { quarter : "1Q", sales : 1, profit : 3 },

                { quarter : "2Q", sales : 3, profit : 2 },

                { quarter : "3Q", sales : 10, profit : 1 },

                { quarter : "4Q", sales : 0.49, profit : 4}

            ]

        },

        brush : [{

            type : "column",

            target : [ "sales", "profit" ]

        }],

        widget : [{

            type: "title",

            text: "hihi"

        }]

    });

});

```