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; | |
| } |
| 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" | |
| } | |
| } |
| 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: | |
| ```sh | |
| npm install | |
| node index.js > chart.svg | |
| ``` |
