var d3 = require('d3');
var oCharts = require('nightingale-charts');
// the element to draw the chart into
var svg = document.createElement('svg');
document.body.appendChild(svg);
// the data for the chart
// in this example 3 equities
var data = [
{timestamp: new Date(2014, 10, 20), aapl: 99.76, goog: 518.6, msft: 44.08},
{timestamp: new Date(2014, 10, 21), aapl: 102.47, goog: 526.54, msft: 44.86},
{timestamp: new Date(2014, 10, 22), aapl: 102.99, goog: 532.71, msft: 44.38},
{timestamp: new Date(2014, 10, 23), aapl: 103, goog: 535.1, msft: 44.29},
{timestamp: new Date(2014, 10, 24), aapl: 102.94, goog: 533.44, msft: 44.32}
];
// bind the data and options
// to the SVG element and then render the chart
d3.select(svg)
.data({
title: 'Large tech companies last week',
subtitle: '$',
source: 'Bloomberg',
footnote: null,
x: {
series: 'timestamp'
},
y: {
series: [
{key: 'aapl', label: 'Apple'},
{key: 'goog', label: 'Google'},
{key: 'msft', label: 'Microsoft'}
]
},
data: data
})
.call(oCharts.chart.line);Charts (and chart components) can now be 'themed'. Currently ft-web (default), ft-video and ft-print. Set this by adding the following to the data config object:
theme: 'ft-web'
##date axis ft.charts.dateAxis() For drawing a date axis in the ft style (horizontal only)
##value axis ft.charts.valueAxis() For drawing a value axis in the ft style (horizontal or vertical)
Copyright (c) 2015 Financial Times Ltd. All rights reserved.
This software is published under the MIT licence.