plotters

/**
* Preparation.
*/
plotter.open({
xAxis : this._xAxis, // xAxis must have 'getPosition' method.
yAxis : this._yAxis, // yAxis must have 'getPosition' method.
numberOfPoints : len, // Number of data points.
numberOfTicks : len,
numberOfTicksEstimate: len,
/**
* msMeasure: dates' measure in milliseconds.
* ( Since dates in data are something like 2016-05-01, 2016-05-02,
* 2016-05-03, so the measure (gap) is 1 day. )
*/
msMeasure : Dates.millisPerDay,
recordSize : 1
});

for (var i = 0; i < len; i++) {
var row = data[i];

/**
* put() method add data point to plotter instance.
*/
plotter.put(row.shift(), row.length > 1 ? row : row[0]);
}

/**
* Plotter instance draw CANVAS by calling close() method.
* this._xAxis, this._yAxis both need to implement getPosition() method,
* Plotter instance will call each one's getPosition() to convert date and
* value to corresponding x and y coordinates on the canvas.
*/
plotter.close();
}
};


/**
* A simplified DateAxis class.
*/
var DateAxis = function () {
this._index = new DateIndex();
};
DateAxis.prototype = {
constructor: DateAxis,

setDates: function (dates) {
/**
* Index dates.
*/
this._index.setAll(Arrays.iterator(dates));

this._lowIdx = this._index.get(dates[0]);
this._highIdx = this._index.get(dates[dates.length - 1]);
},

/**
* Get a date's relative position.
*/
getPosition: function (date) {
var idx = this._index.get(date);
if (idx < 0)
throw "IllegalArgumentException: date is not found.";

return ( idx - this._lowIdx )
/ ( this._highIdx - this._lowIdx );
}
};

/**
* A simplified NumberAxis class.
*/
var NumberAxis = function () {
this._min = null;
this._max = null;
this._range = null;
};
NumberAxis.prototype = {
constructor: NumberAxis,

setRange: function (min, max) {
this._min = min;
this._max = max;
this._range = this._max - this._min;
},

/**
* Get relative position of a value.
*/
getPosition: function (number) {
if ( typeof number !== 'number'
|| isNaN(number) )
throw "IllegalArgumentException: number must be a Number.";

return (number - this._min) / this._range;
}
};


/**
* You can ignore this object, its purpose is to generate a series of fake data.
*/
var util = {

_addDay: function (date, i) {
return new Date(date.getTime() + i * Dates.millisPerDay);
},

/**
* Generate an array of date and values according to given value range,
* base date, and number of data points.
*/
generateData: function (baseDateStr, minPrice, maxPrice, numOfPoints, isOHLC) {

var priceGen = this._priceGenerator(minPrice, maxPrice, numOfPoints),
baseDate = Dates.isoStringToUTCDate(baseDateStr),
data = [];

for (var i = 0; i < numOfPoints; i++) {
var date = this._addDay(baseDate, i),
price = priceGen(),
row = [date, price];

if (isOHLC) {
var close = price + Math.random() - 0.5;
row.push(this._toDollars(Math.max(close, price + (Math.random() / 4))));
row.push(this._toDollars(Math.min(close, price - (Math.random() / 4))));
row.push(this._toDollars(close));
}

data.push(row);
}

return data;
},

_priceGenerator: function (minPrice, maxPrice, length) {
var range = (maxPrice - minPrice) / 40; // 5% variation
var variation = range / 5; // point by point variation: 0.25%
var barAt = (maxPrice + minPrice) / 2; // start in the middle.

var inc = 0;
var cnt = 0;

return function () {

if (--cnt <= 0) {
cnt = Math.ceil(Math.random() * 5);
inc = (Math.random() * range) - (range / 2);
if ( (barAt < minPrice + range && inc < 0)
|| (barAt > maxPrice - range && inc > 0) )
inc = -inc;
}
barAt += inc;
return util._toDollars((Math.random() * variation) + barAt);
};
},

_toDollars: function (number) {
return Math.round(number * 100) / 100;
}
};


/*
* Draw charts.
/

var playGround = $('#play-ground');

var reloadAllCharts = function () {
playGround.html(''); // I am lazy.
loadAllCharts();
};
$('#regen').bind('click', reloadAllCharts);

var loadAllCharts = function () {

var chart = new Chart(playGround),
/**
* Generate an array of data which contains 20 data-points,
* value ranges between 10 and 20.
*/
data = util.generateData('2016-05-01', 10, 20, 20, false);

/**
* The format of generated data will be something like:
*
* [ [Date, 10], [Date, 13.5], [Date, 16.7], 0.9.19. ]
*/

chart.plotterStyle('Line') // Plotter Line.
.setColor('yellow')
.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, false);
chart.plotterStyle('Line?MOUNTAIN') // Plotter Mountain.
.setColor('orange')
.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, false);
chart.plotterStyle('Line?MOUNTAIN', 'Line: (BaseValue is 15)');
var plotter = chart.plotter();
plotter.baseline(15); // Plotter MOUNTAIN with base value setting to 15.
chart.setColor('red')
.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, false);
chart.plotterStyle('Line?DASHED') // Dashed Line
.setColor('magenta');

var plotter = chart.plotter();
plotter.lineWidth(2)
.isFirstSegmentSolid(true)
.ratioSpaceToSolid(0.8)
/**
* Draw dashed line starts from '2016-05-07'
*/
.dashedTransitions([Dates.isoStringToUTCDate('2016-05-07')]);
chart.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, false);
chart.plotterStyle('Bar?ABOVE_AND_BELOW') // Bar.
.setColor('violet')
.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, true);
chart.plotterStyle('OHLC') // Stock OHLC.
.setColor('blue')
.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, true);
chart.plotterStyle('OHLC?CANDLESTICKS')
.setColor('cyan')
.load(data);

chart = new Chart(playGround);
data = util.generateData('2016-05-01', 10, 20, 20, true);
chart.plotterStyle('OHLC?CANDLESTICKS_RED_GREEN')
.setColor('green')
.load(data);
};

loadAllCharts();

``

Demo

1. Clone this repo.
2. Run npm install ( You can skip this step if you have a globally installed jspm.)
3. Run jspm install.
4. Run live-server ( [live-server][link-ls] is very useful, but if you have other server tools you don't have to use it.)
5. Open demo.html in a browser.

[icon-nv]: https://img.shields.io/npm/v/plotters.svg?style=flat
[link-nv]: https://www.npmjs.com/package/plotters
[icon-bs]: https://travis-ci.org/wenwuwu/plotters.svg?branch=master
[link-bs]: https://travis-ci.org/wenwuwu/plotters
[icon-ds]: https://img.shields.io/david/wenwuwu/plotters.svg?style=flat
[link-ds]: https://david-dm.org/wenwuwu/plotters
[icon-dds]: https://img.shields.io/david/dev/wenwuwu/plotters.svg?style=flat
[link-dds]: https://david-dm.org/wenwuwu/plotters#info=devDependencies
[icon-cc]: https://img.shields.io/badge/code-clean-orange.svg?style=flat
[link-cc]: https://github.com/wenwuwu/code-convention-js
[link-ls]: https://www.npmjs.com/package/live-server
[icon-li]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat