cedchart-rn v1.0.0

CedChart.js

CedChart.js is a react-native module which renders a fully scalable Line Chart.

Table of Contents

1. Description
2. Installation
   1. Dependencies
3. Usage
   1. Compulsory properties
   2. Color
   3. Second Color
4. Contributing
5. F.A.Q

Description

• The chart has two modes:

  • Data is fetched inside the module with axios get or post. The chart displays a loader during the fetch
  • Data is fetched outside the module and you can pass an array that has been fetched elsewhere.

• The x-axis can contain 24-hours value for the moment. The scale will adapt depending on the amount of data with more or less vetical strokes displaying.

• The y-axis will always display 11 adaptive values corresponding to 0, 10, 20, 30, ... , 100% of the data's max value.

Installation

You can instlal the module through npm: https://www.npmjs.com/package/cedchart-rn

run npm install cedchart-rn

Usage

You implement the chart by calling <CedChart /> in your render()

Compulsory properties

• Option 1 - You pass pre-fetched data to the Chart: You need 5 props: data, timeUnit, valUnit, dataType and period.

  • data must be an array of objects containing at least 2 different object with at least time: and value:

  • period will determine the format of the date. Please indicate 1d for 24-hour format, 1w for day-of-the-week format and 1m or 3m for mm/dd format.

    Example:

    <CedChart 
        data={[
            {
              time: '1570522315',
              value: '0',
            },
            {
              time: '1570522215',
              value: '100',
            },
          ]}
        dataType = {"temperature"}  
        timeUnit = {"time"}
        valUnit = {"value"}
        period = {"1w"} 
    />

  Color

  One additional property for your Chart is color. You can choose between 6 colors:

• red

• green
• blue
• orange
• purple

• pink

  If not specified, the default color is blue.

  Example:

<CedChart
    data= {[...]}
    dataType = {"temperature"}
    timeUnit= {"time"}
    valUnit= {"value"}
    color= {"red"}
/>

You can adapt the height a little bit.

Can I load multiple graphs on the same screen ?

Yes you absolutely can.