Financial charts with D3
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data Translation of time selector Jul 17, 2016
index.html Changing size for demo purpose Jul 17, 2016
preview.png Translation of time selector Jul 17, 2016
readme.md Relative values for each variable Jul 24, 2016
script.js Relative values for each variable Jul 24, 2016
styles.css Changing size for demo purpose Jul 17, 2016

readme.md

#D3-stockcharts

This script aims to provide simple, lightweight, modulable and responsive financial charts. It allows to draw curves, areas or bands, on one or several charts, to show custom time intervals, and show values on over. See the demo.

Usage

d3.csv("data.csv", function(e, data) {
  var chart = new stockchart(data, "2y", "#mydiv", [
    // First chart
      {
        height: 250,
        x_axis: true,
        curves: [
          {id: "open",  color: "#A2C0D9", name: "Open"},
          {id: "high",  color: "#F4A6A6", name: "High"},
          {id: "low",   color: "#A2C0D9", name: "Low"},
          {id: "close", color: "#666666", name: "Price", diff: true},
        ]
      },
    // Second chart
      {
        curves: [
          {id: "signal", color: "#E0B8DA", name: "Signal"},
        ]
      }
    ]);
});

Reference

Functions

# stockchart(data, time, container, parameters)

Create a stockchart constructor and show the chart in the specified container, based on the specified data (see stocks.load), time interval (see stocks.show), and module and curves parameters (see below).

d3.csv("mydata.csv", function(e, data) {
  var chart = new stockchart(data, "1y", "#mydiv", parameters);
});

# stocks.load(data)

Read and draw the specified data, which can be returned from d3.csv, d3.tsv, d3.json or d3.xml. If another chart is already shown, clear the current chart and draw the specified data.

d3.csv("mydata.csv", function(e, data) {
  chart.load(data);
});

# stocks.show([time])

Show data from the specified time interval, provided as a string in months (e.g. 6m) or years (e.g. 2y). If time interval isn't specified or can't be read, show all values.

chart.show("2y");
chart.show("6m");

Parameters

The parameters argument provides a list of charts (defined as objects), which contains a list of curves (also defined as object). Both can take several options.

Charts

# curves: list of the curves to be drawn in the current chart; see below.

# height: defines the height of the current chart, which defaults to 60.

# ratio: gives the ability to show relative values, based on the data selected the specified id; if simply set to true, show relative values based on each variable.

# x_axis: if true, draw an horizontal axis under the given chart.

# y_axis: if sym is provided, the vertical axis will have a symetrical domain.

Curves

# color: specify the color of the curve.

# diff: if true, show the evolution since the day before in the legend.

# id: set the curve id, which must be the same than the column name in the provided data; if an array of two id is specified, draw an area between those two curves.

# name: specify the name shown in the legend; if not specified, the data won't be shown in the legend.

# type: if area is provided, draw a green and red area chart depending of the sign.

# width: specify the width of the curve.

Question?

Please feel free to open an issue or to push a commit.

License

This repository is released under MIT License.