https://github.com/mithril-components/mithril-node-linechart

Simple Line chart component for Mithril-NodeJS using SVG.
https://github.com/mithril-components/mithril-node-linechart

Last synced: 18 days ago
JSON representation

Simple Line chart component for Mithril-NodeJS using SVG.

• Host: GitHub
• URL: https://github.com/mithril-components/mithril-node-linechart
• Owner: mithril-components
• Created: 2016-05-09T04:18:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-07-08T02:44:13.000Z (over 8 years ago)
• Last Synced: 2024-10-07T17:10:49.766Z (about 1 month ago)
• Language: JavaScript
• Size: 165 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
node-mithril-linechart

======================

A simple SVG line chart component for Mithril and NodeJS.

![Line chart screenshot](screenshot.png)

Usage

=====

Add `linechart` to your dependencies on `package.json` file then:

    const linechart = require("linechart");

    const model = {

        "lines": [

            {

                "title": "A",

                "color": "#ff33ee",

                "data": [

                    {

                        "label": "Sample label",

                        "value": 100,

                        "tooltip": "More details"

                    },

                    ...

                ]

            },

            {

                "title": "B",

                "color": "#2233ee",

                "data": [

                    {

                        "label": "Some label",

                        "value": 130,

                        "tooltip": "More details"

                    },

                    ...

                ]

            },

            ...

        ]

    };

    const ctrl = linechart.controller(model);

    const view = linechart.view(ctrl);

Options

=======

* **lines**: Define the lines of the line chart.

    * **title**: Define the title of the line.

    * **color**: Define the color of the line.

    * **data**: Define values to draw the line chart.

        * **label**: X value of the point.

        * **value**: Y value of the point.

Test

====

Setup [mithril-component-tools](https://github.com/mithril-components/mitthril-components-tools) first. Then:

    npm install

    mct test .