Skip to content

Instantly share code, notes, and snippets.

@andredumas
Last active December 19, 2018 12:30
Show Gist options
  • Save andredumas/ad585d6d68cf8a894207 to your computer and use it in GitHub Desktop.
Save andredumas/ad585d6d68cf8a894207 to your computer and use it in GitHub Desktop.
TechanJS Server Side Generation
node_modules

Demonstrates chart generation on both server side (top chart) using node.js and client side (bottom chart).

Note: For the purpose of this example and not having node.js available servers side, chart.svg has been pre generated using instructions for this project:

npm install
node index.js > chart.svg
svg {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path.candle {
stroke: #000000;
}
path.candle.body {
stroke-width: 0;
}
path.candle.up {
fill: #00AA00;
stroke: #00AA00;
}
path.candle.down {
fill: #FF0000;
stroke: #FF0000;
}
/**
* Construct a sample chart, accepting runtime environment loaded dependencies and data. This object is not aware of
* where it runs: browser or node/V8
*
* @param d3
* @param techan
* @param csvData CSV data string
* @returns {Function}
*/
function chart(d3, techan, csvData) {
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var parseDate = d3.timeParse("%d-%b-%y");
var x = techan.scale.financetime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var candlestick = techan.plot.candlestick()
.xScale(x)
.yScale(y);
var accessor = candlestick.accessor();
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var data = csvData.slice(0, 200).map(function (d) {
return {
date: parseDate(d.Date),
open: +d.Open,
high: +d.High,
low: +d.Low,
close: +d.Close,
volume: +d.Volume
};
}).sort(function (a, b) {
return d3.ascending(a.date, b.date);
});
return function(g) {
var svg = g.append("svg")
.attr("version", "1.1")
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(accessor.d));
y.domain(techan.scale.plot.ohlc(data, accessor).domain());
svg.append("g")
.datum(data)
.attr("class", "candlestick")
.call(candlestick);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
}
}
// If we're in node
if(typeof module === 'object') {
// Expose the chart
module.exports = chart;
}
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Date Open High Low Close Volume
9-Jun-14 62.40 63.34 61.79 62.88 37617413
6-Jun-14 63.37 63.48 62.15 62.50 42442096
5-Jun-14 63.66 64.36 62.82 63.19 47352368
4-Jun-14 62.45 63.59 62.07 63.34 36513991
3-Jun-14 62.62 63.42 62.32 62.87 32216707
2-Jun-14 63.23 63.59 62.05 63.08 35995537
30-May-14 63.95 64.17 62.56 63.30 45283577
29-May-14 63.84 64.30 63.51 63.83 42699670
28-May-14 63.39 64.14 62.62 63.51 47795088
27-May-14 61.62 63.51 61.57 63.48 55681663
23-May-14 60.41 61.45 60.15 61.35 38293993
22-May-14 60.94 61.48 60.40 60.52 54200116
21-May-14 58.56 60.50 58.25 60.49 58991505
20-May-14 59.50 60.19 58.18 58.56 53931469
19-May-14 57.89 59.56 57.57 59.21 43033925
16-May-14 58.31 58.45 57.31 58.02 47933075
15-May-14 59.26 59.38 57.52 57.92 56813940
14-May-14 59.53 60.45 58.95 59.23 47428583
13-May-14 59.66 60.89 59.51 59.83 48525476
12-May-14 57.98 59.90 57.98 59.83 48575487
9-May-14 56.85 57.65 56.38 57.24 52583858
8-May-14 57.23 58.82 56.50 56.76 61251053
7-May-14 58.77 59.30 56.26 57.39 78587247
6-May-14 60.98 61.15 58.49 58.53 55900809
5-May-14 59.67 61.35 59.18 61.22 46057411
2-May-14 61.30 61.89 60.18 60.46 54189197
1-May-14 60.43 62.28 60.21 61.15 82428606
30-Apr-14 57.58 59.85 57.16 59.78 76093004
29-Apr-14 56.09 58.28 55.84 58.15 75557202
28-Apr-14 58.05 58.31 54.66 56.14 107757756
25-Apr-14 59.97 60.01 57.57 57.71 92501529
24-Apr-14 63.60 63.65 59.77 60.87 138769345
23-Apr-14 63.45 63.48 61.26 61.36 96564750
22-Apr-14 62.65 63.44 62.22 63.03 60631312
21-Apr-14 59.46 61.24 59.15 61.24 60363619
17-Apr-14 59.30 60.58 58.72 58.94 88040346
16-Apr-14 59.79 60.19 57.74 59.72 78773521
15-Apr-14 59.29 59.68 55.88 59.09 108622706
14-Apr-14 60.09 60.45 57.78 58.89 72324603
11-Apr-14 57.60 60.31 57.31 58.53 91451960
10-Apr-14 63.08 63.18 58.68 59.16 114987616
9-Apr-14 59.63 62.46 59.19 62.41 100215307
8-Apr-14 57.68 58.71 57.17 58.19 78835935
7-Apr-14 55.90 58.00 55.44 56.95 108487569
4-Apr-14 59.94 60.20 56.32 56.75 125465774
3-Apr-14 62.55 63.17 59.13 59.49 83859330
2-Apr-14 63.21 63.91 62.21 62.72 66276613
1-Apr-14 60.46 62.66 60.24 62.62 59291210
31-Mar-14 60.78 61.52 59.87 60.24 53011205
28-Mar-14 61.34 61.95 59.34 60.01 67051528
27-Mar-14 60.51 61.90 57.98 60.97 112649694
26-Mar-14 64.74 64.95 60.37 60.38 97689774
25-Mar-14 64.89 66.19 63.78 64.89 68785500
24-Mar-14 67.19 67.36 63.36 64.10 85695872
21-Mar-14 67.53 67.92 66.18 67.24 60041228
20-Mar-14 68.01 68.23 66.82 66.97 44438500
19-Mar-14 69.17 69.29 67.46 68.24 43980558
18-Mar-14 68.76 69.60 68.30 69.19 40827226
17-Mar-14 68.18 68.95 66.62 68.74 52196699
14-Mar-14 68.49 69.43 67.46 67.72 48226824
13-Mar-14 71.29 71.35 68.15 68.83 57091157
12-Mar-14 69.86 71.35 69.00 70.88 46400431
11-Mar-14 72.50 72.59 69.96 70.10 59615238
10-Mar-14 70.77 72.15 70.51 72.03 59949746
7-Mar-14 71.08 71.18 69.47 69.80 38985763
6-Mar-14 71.88 71.89 70.25 70.84 46126260
5-Mar-14 69.69 71.97 69.62 71.57 74649486
4-Mar-14 68.66 68.90 67.62 68.80 42164222
3-Mar-14 66.96 68.05 66.51 67.41 56900444
28-Feb-14 69.47 69.88 67.38 68.46 66900863
27-Feb-14 69.34 70.01 68.87 68.94 41695855
26-Feb-14 70.19 71.22 68.85 69.26 55400399
25-Feb-14 70.95 71.00 69.45 69.85 52189031
24-Feb-14 68.74 71.44 68.54 70.78 76951946
21-Feb-14 69.69 69.96 68.45 68.59 70991892
20-Feb-14 67.73 70.11 65.73 69.63 131043748
19-Feb-14 67.05 69.08 67.00 68.06 64258631
18-Feb-14 66.94 67.54 66.07 67.30 43862297
14-Feb-14 67.50 67.58 66.72 67.09 36786427
13-Feb-14 64.18 67.33 64.05 67.33 62013396
12-Feb-14 64.92 65.06 64.05 64.45 47409857
11-Feb-14 63.75 65.00 63.35 64.85 45746832
10-Feb-14 64.30 64.49 63.47 63.55 43736562
7-Feb-14 62.27 64.57 62.22 64.32 60835746
6-Feb-14 61.46 62.78 61.46 62.16 42153754
5-Feb-14 62.74 63.16 61.27 62.19 53032420
4-Feb-14 62.05 63.14 61.82 62.75 46064897
3-Feb-14 63.03 63.77 60.70 61.48 75105994
31-Jan-14 60.47 63.37 60.17 62.57 87930298
30-Jan-14 62.12 62.50 60.46 61.08 150438699
29-Jan-14 54.61 54.95 53.19 53.53 98089932
28-Jan-14 54.02 55.28 54.00 55.14 48364998
27-Jan-14 54.73 54.94 51.85 53.55 74142331
24-Jan-14 56.15 56.42 54.40 54.45 55545338
23-Jan-14 56.37 56.68 55.69 56.63 47996403
22-Jan-14 58.85 59.31 57.10 57.51 61495880
21-Jan-14 56.60 58.58 56.50 58.51 48734147
17-Jan-14 57.30 57.82 56.07 56.30 40883205
16-Jan-14 57.26 58.02 56.83 57.19 34599775
15-Jan-14 57.98 58.57 57.27 57.60 33730619
14-Jan-14 56.46 57.78 56.10 57.74 37590987
13-Jan-14 57.91 58.25 55.38 55.91 63106519
10-Jan-14 57.13 58.30 57.06 57.94 42529258
9-Jan-14 58.65 58.96 56.65 57.22 92349222
8-Jan-14 57.60 58.41 57.23 58.23 56800776
7-Jan-14 57.70 58.55 57.22 57.92 77329009
6-Jan-14 54.42 57.26 54.05 57.20 68974359
3-Jan-14 55.02 55.65 54.53 54.56 38287706
2-Jan-14 54.83 55.22 54.19 54.71 43257622
31-Dec-13 54.12 54.86 53.91 54.65 43152127
30-Dec-13 54.93 55.18 53.43 53.71 68307317
27-Dec-13 57.48 57.68 55.25 55.44 60465751
26-Dec-13 58.32 58.38 57.37 57.73 55101367
24-Dec-13 58.27 58.58 56.91 57.96 46617754
23-Dec-13 55.50 58.32 55.45 57.77 98296983
20-Dec-13 54.91 55.15 54.23 55.12 239823912
19-Dec-13 54.34 55.19 53.95 55.05 89825393
18-Dec-13 55.57 55.89 53.75 55.57 76003479
17-Dec-13 54.75 55.18 54.24 54.86 78751463
16-Dec-13 53.27 54.50 52.91 53.81 85118518
13-Dec-13 51.61 53.50 51.34 53.32 82640992
12-Dec-13 51.03 52.07 50.66 51.83 92723034
11-Dec-13 50.56 50.77 49.01 49.38 65776366
10-Dec-13 48.62 50.77 48.54 50.24 68478561
9-Dec-13 48.06 48.97 47.74 48.84 36055891
6-Dec-13 48.98 49.39 47.71 47.94 42937659
5-Dec-13 48.15 48.70 47.87 48.34 43855036
4-Dec-13 46.46 48.77 46.26 48.62 60890176
3-Dec-13 46.75 47.20 46.29 46.73 32085905
2-Dec-13 46.90 47.54 46.26 47.06 50773647
29-Nov-13 46.75 47.21 46.50 47.01 22953916
27-Nov-13 45.97 46.67 45.53 46.49 44993195
26-Nov-13 44.66 46.17 43.55 45.89 82016490
25-Nov-13 46.36 46.65 44.04 44.82 82565324
22-Nov-13 47.04 47.27 45.96 46.23 40545375
21-Nov-13 46.99 47.46 46.68 46.70 34886170
20-Nov-13 46.61 47.55 46.31 46.43 53932698
19-Nov-13 46.26 47.00 45.72 46.36 75602413
18-Nov-13 48.47 48.84 45.80 45.83 85909884
15-Nov-13 49.11 49.48 48.71 49.01 42452937
14-Nov-13 48.70 49.57 48.03 48.99 75117049
13-Nov-13 46.23 48.74 46.06 48.71 79245346
12-Nov-13 46.00 47.37 45.83 46.60 68195832
11-Nov-13 47.04 47.53 45.73 46.20 80909626
8-Nov-13 47.81 48.65 47.25 47.53 70731178
7-Nov-13 49.24 49.87 47.30 47.56 97127618
6-Nov-13 50.26 50.45 48.71 49.12 67889337
5-Nov-13 47.79 50.18 47.51 50.10 76835006
4-Nov-13 49.36 49.75 48.02 48.22 80371218
1-Nov-13 50.85 52.09 49.72 49.75 95032876
31-Oct-13 47.16 52.00 46.50 50.20 248809006
30-Oct-13 50.00 50.21 48.75 49.01 127072652
29-Oct-13 50.73 50.79 49.25 49.40 102143469
28-Oct-13 51.54 51.70 49.61 50.23 73472347
25-Oct-13 53.18 53.24 51.88 51.95 45085348
24-Oct-13 52.38 52.84 51.59 52.44 46775185
23-Oct-13 51.75 52.25 51.13 51.90 57207154
22-Oct-13 54.33 54.76 52.20 52.68 83203892
21-Oct-13 54.68 54.81 53.51 53.85 58235283
18-Oct-13 54.18 54.82 53.60 54.22 88260093
17-Oct-13 51.12 52.22 50.95 52.21 71521899
16-Oct-13 50.04 51.24 49.90 51.14 64678247
15-Oct-13 49.99 51.00 49.18 49.50 81166571
14-Oct-13 48.31 49.63 47.91 49.51 68780552
11-Oct-13 49.18 49.87 48.79 49.11 58428451
10-Oct-13 47.86 49.68 47.83 49.05 99773784
9-Oct-13 47.38 47.84 45.26 46.77 147296862
8-Oct-13 50.60 50.60 47.08 47.14 136081330
7-Oct-13 50.73 51.29 50.40 50.52 57203957
4-Oct-13 49.77 51.16 49.57 51.04 74446947
3-Oct-13 50.47 50.72 49.06 49.18 82045323
2-Oct-13 50.13 51.10 49.95 50.28 62834429
1-Oct-13 49.97 51.03 49.45 50.42 98113699
30-Sep-13 50.14 51.60 49.80 50.23 100095417
27-Sep-13 50.29 51.28 49.86 51.24 81410460
26-Sep-13 50.01 50.60 49.50 50.39 98220046
25-Sep-13 49.23 49.54 48.46 49.46 87879619
24-Sep-13 48.50 49.66 48.16 48.45 136716101
23-Sep-13 47.28 47.55 46.29 47.19 75319202
20-Sep-13 46.32 47.60 45.74 47.49 115508400
19-Sep-13 45.51 46.05 45.23 45.98 63972369
18-Sep-13 44.84 45.47 44.40 45.23 79316945
17-Sep-13 42.50 45.44 42.43 45.07 91934557
16-Sep-13 44.85 44.94 42.43 42.51 70807761
13-Sep-13 45.04 45.08 43.93 44.31 52765299
12-Sep-13 45.53 45.62 44.65 44.75 68072239
11-Sep-13 43.39 45.09 43.11 45.04 71676653
10-Sep-13 44.24 44.26 43.23 43.60 54540282
9-Sep-13 44.36 44.79 43.70 44.04 75794696
6-Sep-13 43.09 44.61 42.40 43.95 117535626
5-Sep-13 41.79 42.76 41.77 42.66 50035380
4-Sep-13 42.01 42.17 41.44 41.78 42581854
3-Sep-13 41.84 42.16 41.51 41.87 48774896
30-Aug-13 42.02 42.26 41.06 41.29 67735053
29-Aug-13 40.89 41.78 40.80 41.28 58303395
28-Aug-13 39.96 40.85 39.88 40.55 57918194
27-Aug-13 40.68 41.20 39.42 39.64 72695050
26-Aug-13 40.90 41.94 40.62 41.34 94162358
23-Aug-13 39.00 40.63 38.93 40.55 86442283
22-Aug-13 38.37 38.75 38.34 38.55 21931163
21-Aug-13 38.38 38.85 38.14 38.32 46116868
20-Aug-13 38.35 38.58 37.69 38.41 57995140
19-Aug-13 37.43 38.28 37.14 37.81 57609591
16-Aug-13 36.97 37.49 36.90 37.08 45840714
15-Aug-13 36.36 37.07 36.02 36.56 56521095
14-Aug-13 36.83 37.55 36.62 36.65 48423890
13-Aug-13 38.24 38.32 36.77 37.02 65379198
12-Aug-13 38.20 38.50 38.10 38.22 31160951
9-Aug-13 38.59 38.74 38.01 38.50 43620024
8-Aug-13 39.13 39.19 38.43 38.54 41300906
7-Aug-13 38.61 38.94 37.70 38.87 68854764
6-Aug-13 39.11 39.25 37.94 38.55 63950791
5-Aug-13 38.43 39.32 38.25 39.19 79994774
2-Aug-13 37.66 38.49 37.50 38.05 73058424
1-Aug-13 37.30 38.29 36.92 37.49 106066472
31-Jul-13 37.96 38.31 36.33 36.80 154828679
30-Jul-13 35.65 37.96 35.32 37.63 173582710
29-Jul-13 34.07 35.63 34.01 35.43 124884870
26-Jul-13 33.77 34.73 33.56 34.01 136028897
25-Jul-13 33.54 34.88 32.75 34.36 365935212
24-Jul-13 26.32 26.53 26.05 26.51 82635587
23-Jul-13 26.10 26.30 25.97 26.13 28221534
22-Jul-13 25.99 26.13 25.72 26.04 27526213
19-Jul-13 25.82 26.11 25.60 25.88 46544938
18-Jul-13 26.75 26.77 26.12 26.18 24806825
17-Jul-13 26.37 26.78 26.30 26.65 21518463
16-Jul-13 26.39 26.75 26.01 26.32 30817554
15-Jul-13 25.93 26.43 25.65 26.28 24233957
12-Jul-13 25.74 25.93 25.55 25.91 16537840
11-Jul-13 25.96 26.00 25.45 25.81 26777354
10-Jul-13 25.58 25.83 25.47 25.80 26721794
9-Jul-13 25.07 25.49 25.03 25.48 30387889
8-Jul-13 24.47 25.04 24.42 24.71 27073983
5-Jul-13 24.65 24.66 24.20 24.37 20229451
3-Jul-13 24.22 24.71 24.15 24.52 10404332
2-Jul-13 24.70 24.77 24.30 24.41 18394008
1-Jul-13 24.97 25.06 24.62 24.81 20582195
28-Jun-13 24.68 24.98 24.42 24.88 96778879
27-Jun-13 24.24 24.84 24.21 24.66 34694013
26-Jun-13 24.51 24.65 23.99 24.16 29890205
25-Jun-13 24.14 24.43 24.04 24.25 24719988
24-Jun-13 23.95 24.11 23.38 23.94 40625948
21-Jun-13 24.59 24.70 24.05 24.53 45826173
20-Jun-13 24.28 24.74 23.65 23.90 42765586
19-Jun-13 24.20 25.19 24.10 24.31 31790525
18-Jun-13 24.09 24.69 24.08 24.21 36709004
17-Jun-13 23.91 24.25 23.75 24.02 33664419
14-Jun-13 23.56 23.89 23.26 23.63 30561387
13-Jun-13 23.72 23.83 23.26 23.73 31189247
12-Jun-13 24.16 24.26 23.58 23.77 26445790
11-Jun-13 24.03 24.35 24.00 24.03 29676383
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="chart.css" type="text/css" />
<body>
<!-- Demonstrate that we don't need any javascript dependencies loaded before rendering svg chart-->
<object type="image/svg+xml" data="chart.svg">Your browser does not support SVG</object>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>
<script src="chart.js"></script>
<script>
d3.csv("data.csv", function(error, data) {
d3.select("body").call(chart(d3, techan, data));
});
</script>
/**
* Example of using techanjs in a node runtime environment
*/
var fs = require('fs');
var d3 = require('d3');
var techan = require('techan');
var chart = require('./chart');
var csvData = d3.csvParse(fs.readFileSync('./data.csv', { encoding: 'utf-8' }).trim());
var document = require('jsdom').jsdom();
// Create the chart, passing in runtime environment specific setup: node d3, techan and csv data
var body = d3.select(document.body).call(chart(d3, techan, csvData));
// Output result AVG
console.log('<?xml version="1.0" encoding="utf-8"?>');
console.log('<?xml-stylesheet type="text/css" href="chart.css" ?>');
console.log('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');
console.log(body.html());
{
"scripts": {
"start": "node index.js"
},
"dependencies": {
"techan": "~0.7.0",
"jsdom": "~3.1.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment