Bitcoin, LiteCoin, Ethereum financial charts built with techan.js

[xunxdd]

This is not an issue at all, since i do not know where to put it. Just want to shout a thank you here.

I have built Bitcoin, LiteCoin, Ethereum financial charts using techan.js, i would say it is incredible.

https://bitcoin-news-charts.herokuapp.com/#/

So thank you

[xunxdd]

update: i later changed my site to use highstock.js from highcharts.com (because of the built in timeframe feature). Still love techan.js. thanks.

https://bitcoin-news-charts.herokuapp.com/#/

[joseamair]

Wow, nice Web Xunxdd. How are you?

i got impressed by you website, it is really fluid and clean. Congratulations.

Btw, can you help me with issue #216 Please? I really apreciate that. Thanks, have a good day.

[xunxdd]

thanks.

[joseamair]

Hi, xunxdd. Well, maybe im too noob in node and web enviroment. What you mean when you say that "is completely written in javascript (vue.js)" ¿What is vue.js? a file on you repo?

I would like to ask, if i may do, a simple question:

How do you load/create a simple graphic, for example a MA or a CandleStick graph if i have all the data already.

What is the syntax and what do i need?

[xunxdd]

vue.js is a javascript framework have gained a lot of popularity recently. I like it a lot.

If you only need a static chart with your own data, you probably can go to highcharts website, such as https://www.highcharts.com/stock/demo/candlestick-and-volume and modify their code to use your own data.

There might be other tools for you to create static candlestick charts. Microsoft office might also have tools for that.

If you need a web applications that can dynamically generate some charts and graphics, then your best shot is to learn javascript, html, etc. That will take some time.

[joseamair]

Yep, that is what i'm trying. Im learning Express for Node now, as fast as i can ^^. In the first try i need a static graph, but then i need to do basically the same work that is shown on your website, maybe using websockts to stream data from a good exChanger. Any Suggestion?

Wich one did you use in your web site, for then candleSticks and MA graph?

i'll take a look at vue.js to know what it is.

I got one question, well one more.

In this example : http://bl.ocks.org/andredumas/edf630690c10b89be390 He uses data.csv for the graph, it is basically static data database. ¿How do i read a different file or data locally from a folder?

`.... d3.csv("data.csv", function(error, data) { var accessor = candlestick.accessor(), indicatorPreRoll = 33; // Don't show where indicators don't have data

    data = data.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(accessor.d(a), accessor.d(b)); });

... `

[xunxdd]

https://github.com/xunxdd/bitcoin-news-charts/blob/dev-v2

the above code you pointed out is using d3 js and techan.js, which is what i used earlier (branch dev-v2). vue js (other libraries too) let you create component and pass in data.

For example, the following chart component: https://github.com/xunxdd/bitcoin-news-charts/blob/dev-v2/src/components/charts/chart.vue

let you pass in chartData, dimension etc.

[xunxdd]

https://github.com/xunxdd/financial-charts-vue

this repository is a more static version of testing out financial chart capabilities using vue js, techan.js and d3.

though now I think highstocks is actually easier to use and its various timeframe control is just precious.

For example the following code is really much simpler

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/candlestick-and-volume/

as for node, express js, I normally only use node for backend processing and api, so not sure if it can be used for advanced web applications.

[jayarjo]

@xunxdd maybe offtopic, but can I ask you if either of the products can work with realtime data? Specifically if they can survive congestion.

[xunxdd]

@jayarjo https://github.com/xunxdd/financial-charts-vue is a Proof-of-concept project, built with static data in mind.

https://github.com/xunxdd/bitcoin-news-charts is updated daily (backend). Surely backend can be configured to update real time (every 10 mins?), then front end / javascript side too.

https://github.com/xunxdd/bitcoin-news-charts data is from coinmarketcap historical data, since it updates daily, so is mine. I do not have access to real time data to most of the cryptocurrencies other than bitcoin, litecoin and ethereum.

The point is that, yes, the code does whatever we want, provided we have the resources.

[Shubhamnandwana18]

Hi @xunxdd I need to add timeframe feature on my techanjs charts. Can you please guide me how to do that? If you could provide some working code it would be really helpful. Regards, Shubham

[xunxdd]

i do not think there is timeframe control built-in in either d3 or techanjs. You need to write the controls and wire it up yourself (it wont be too hard, however a bit of hassel nontheless). As a result i switched to highcharts financial charts (https://www.highcharts.com/products/highstock/). Highstock has all the timeframe needs taken care of. Also thanks to the library, the implementation of the many financial features is also much much simpler.

I love techan js, but i found high charts a clear winner.

Check out any of the highstock examples (https://www.highcharts.com/stock/demo/basic-line), I think you will find out all you need. Let me know if this helps

@Shubhamnandwana18

[fqdeng]

老铁 highcharts 是免费的么 还是破解的 @xunxdd 另外你的比特币价格数据 是你自己收集的还是 哪里的API拿来的

[xunxdd]

@jonwinters , highcharts is free https://www.highcharts.com/ the data is from https://coinmarketcap.com/. you can check out server side implementation at https://github.com/xunxdd/bitcoin-news-chart-data