Difference Chart

Difference Chart

Sections

• Sample
• Properties
  • dataModel
    • Object Keys
  • metric
  • dateFormat
  • keys

Sample

<template>
  <div>


  </div>
</template>

<script>

import {D3DifferenceChart} from 'jscatalyst'
export default{
  data(){
    return{
        differenceChartData = []
    }
  },
  components:{
    differenceChart: D3DifferenceChart
  }
}

</script>

Properties

dataModel

Type: Array

The dataModel for the D3DifferenceChart takes the form of an array of objects and is empty by default.

differenceChartData = [
  { date: "2017-01-01", expected: 100, actual: 50 },
  { date: "2017-01-05", expected: 30, actual: 50 },
  { date: "2017-01-10", expected: 45, actual: 90 },
  { date: "2017-01-15", expected: 110, actual: 150 },
  { date: "2017-01-20", expected: 90, actual: 130 },
  { date: "2017-01-25", expected: 80, actual: 50 },
  { date: "2017-01-30", expected: 150, actual: 60 },
  { date: "2017-02-04", expected: 100, actual: 30 }
];

dataModel Object Keys

• date

  Type: String

  Takes a date written as a string in the form "YYYY-MM-DD" by default. This format can be changed using the the dateFormat property.

• expected

  Type: Number

  Represents the expected value of this data point.

• actual

  Type: Number

  Represent th actual value of this data point.

metric

Type: String

The label of the Y-Axis.

dateFormat

Type: String

String representing the expected format of the date key in the dataModel. Default YYYY-MM-DD

keys

Type: Array

The keys property takes an array of strings. Its indicated function is to allow the developer the ability to overwrite the "actual" and "expected" keys in the dataModel. However this appears to be broken.

<--- Back to Top