cedchart v1.0.7

CedChart.js

CedChart.js is a react-native module which renders a 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 x-axis can contain hourly, weekly or monthly values. 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 install the module through npm: https://www.npmjs.com/package/cedchart

run npm install cedchart

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 4 props: data, timeUnit, valUnit and period.

  • data must be an array of objects containing at least 2 different object with at least a time unit and a value unit. IMPORTANT: Your time unit must be of a Unix Time Stamp format with 10 digits (see Example below)
  • timeUnit and valUnit are just titles that need to match the names of your time and value names inside your data.

  • 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. Warning: If you want 24-hour format, you also need to have a data array that corresponds to 24 hours worth of data. Same goes for other periods.

    Example:

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

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= {[...]}
    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.