Skip to content

Charts

Jump to bottom
pml984 edited this page Apr 26, 2016 · 7 revisions

Charts

Chart.JS

We are using Chart.JS version 2.0 as the framework for the charts within our framework. Chart.JS recently updated to version 2.0 and now contains 8 total charts for use.

To easily integrate Chart.JS within React, react-chartjs was created.

NOTE: The latest version of react-chartjs is on 0.7.4, which still uses Chart.JS version 1. The code was already completed to now work with version 2 in their chartjs-v2 branch. A fork of of the repository was created and this branch was deployed so that ChartJS version 2 could be used. Once react-chartjs is deployed, switch back to using react-chartjs framework as a dependency. https://github.com/jhudson8/react-chartjs/issues/84 contains the status of when version 2 will be pushed.

Using Charts

Import

Each of these charts can be used from within the framework by simply importing each of the chart types:

  • AreaChart
  • BarChart
  • ColumnChart
  • LineChart
  • PieChart
  • ScatterChart

import {AreaChart} from 'safe-framework'

Also included are Default charts which contain both one of the above charts along with a DataTable.

import {DefaultAreaChart} from 'safe-framework'

How to Use

Any property present in the Chart.JS Documentation can be provided to our custom charts.

<AreaChart
  data={data}
  options={options}
/>

Some custom features were added to each of the charts to allow for easier interaction.

Data

ChartJS allows for data to be provided to each of it's datasets. This data property within the dataset only contains data for that particular dataset. This may not always be practical, so an additional data property was added at the top level of the data object. An Array of Objects can be passed to this object that will be all of the data for the entire chart. Datasets are still provided, but now they don't need the data property, only a property called dataProperty that will be used to determine which property within the data to use extra data from.

const theData = {
  ...
  xAxis: [{
    dataProperty: 'name'
  }],
  yAxis: [{
    dataProperty: 'y'
  }],
  data: [{
    name: 'Some Name',
    y: 56.33,
    ...
  },
  ....
  }]
}

Axes

ChartJS currently supports a property called datasets to be able to provide each of the datasets to the chart, both x and y axes. The xAxis and yAxis properties were added to make a clear separation of each. Each is provided an array of datasets that correspond to the appropriate axis.

const theData = {
  // new way
  xAxis: [{
    dataProperty: 'name'
  }],
  yAxis: [{
    dataProperty: 'y'
  }],
  data: [{
    name: 'Some Name',
    y: 56.33,
    ...
  },

  // ChartJS way
  
  labels: ['Some Name', 'Another Label', ...],
  datasets: [{  
    data: [56.33, 16.12, ....],
    ...
    }
  ....
  }]
}

Options

Options that are provided directly to the chart. These properties can be found in ChartJS's documentation.

Scatter Chart

The Scatter chart is the exception to this. The data is provided differently to ChartJS than how you would with other charts. The Scatter Chart was a plugin with the prior version, but with version 2 was ported into ChartJS. See Scatter Chart Documentation in order to create one.

Default Charts

Default Charts are provided several properties to populate both the chart and table data.

  • chartData: The data object containing both the actual data and any axes.
  • chartOptions: Options provided directly to the chart. These properties can be found in ChartJS's documentation.
  • columns: DataTable's columns.
  • tableData: Datatable's data.
  • title: Title for the Chart.
<DefaultAreaChart
  chartData={areaSeries}
  chartOptions={chartConfig}
  columns={tableColumns}
  size={'col-xs-12 col-sm-12'}
  tableData={tableData}
  title={'US and USSR nuclear stockpiles'}
/>

Coloring Scheme

ChartJS provides a grayscale coloring scheme for it's charts by default. To override this in ChartJS, a color needs to be assigned to each dataset when providing the data.

colorGenerator This property was created to allow for an easier way to provide a color scheme to a chart without the need to provide a color to each dataset. This option takes a function with a single parameter with the number of datasets. This function should return an array of hex strings. Below is the default function.

colorGenerator: function(numDataSets) {
  return chroma.scale('RdYlBu')
    .colors(Math.min(numDataSets, 2));
}

ChromaJS is being used as the framework to generate our coloring scale. https://github.com/gka/chroma.js/wiki/Predefined-Colors

Future

There are several features that need to be added to both this framework and ChartJS that will provide for easier to use and a better user experience.

ChartJS Features

Safe Features

  • Data Functions: In additional to the property dataProperty for axes, add a way to have a function to provide a custom data field.
  • Single Data for Default: Add a way to provide just a data property to provide to both the chart and table.
Clone this wiki locally