- You can download the last version:
- You can also see a live demo here
Create a blank main.js.
Finally, Create a index.html file with the following content
<!DOCTYPE html><html><head><title>SimpleTimeChart</title></head><body><divid="myChart"></div><scriptsrc="simple-time-chart.js"></script><scriptsrc="main.js"></script></body></html>The ChartContainer will contain all your charts.
letchartContainer=newSimpleTimeChart.ChartContainer("myChart",// Div ID of the containing the chart800,// Width of the chart70,// Axis Tickness{color: "#D0D0D0",// Color of axis textbackgroundColor: "#292F33"// Background of the container});The Chart will be inside the ChartContainer. A ChartContainer can have several Charts that will share the same time axis
letchart=chartContainer.newChart(500// height of the Chart);letsecondChart=chartContainer.newChart(300);letvolumeChart=chartContainer.newChart(100);For now there are 3 types of layers: CandleStickLayer, LineLayer, BandLayer
NB: Style in layers is optional
// Get data we will use for the demoletdata=[{"date":1546300800,"high":0.01232199,"low":0.012105,"open":0.01227412,"close":0.01224702,"volume":11.47474031,"quoteVolume":938.52999477,"weightedAverage":0.01222629}, ...]// Transform the data so that it fits the required formatletdeltaSecond=data[1]["date"]-data[0]["date"];letcandlesticks=data.map(x=>{x.date=newDate(x.date*1000);x.deltaSecond=deltaSecond;returnx;})letpointList=candlesticks.map(x=>{return{x: x.date.getTime(),y: x.weightedAverage}});letbandStepList=candlesticks.map(x=>{return{x: x.date.getTime(),top: x.high,bottom:x.low}});letbarList=candlesticks.map(x=>{return{x: x.date.getTime(),y: x.volume,delta:deltaSecond*1000}});// Define all layersletcandlestickLayer=newSimpleTimeChart.CandlestickLayer(candlesticks,{neutralColor: "#D0D0D0",greenColor: "#038C3E",redColor: "#BF452A",opacity: 1,shadowThickness: 1,});letlineLayer=newSimpleTimeChart.LineLayer(pointList,{color: "#ff0",thickness: 2,opacity: 1,})letbandLayer=newSimpleTimeChart.BandLayer(bandStepList,{color: "#FFFFFF",opacity: 0.2,});lethistLayer=newSimpleTimeChart.HistogramLayer(barList,{color: "#FFFFFF",opacity: 0.5,});// Add Layers to the Chart you wantchart.addLayer(candlestickLayer);secondChart.addLayer(lineLayer);secondChart.addLayer(bandLayer);volumeChart.addLayer(histLayer);There are 2 scales: TimeScale and DataScale. These are use to describe what you see in the chart. (i.e. Where the showing charts start, what is the scale of data).
To initialize scales we will use 2 functions created to make your like easier: SimpleTimeChart.Util.getDataScaleFromLayer and SimpleTimeChart.Util.getDataScaleFromLayerNB: You need to set the TimeScale only once because it is shared with all charts, but you need to define one DataScale per Chart.
chartContainer.setTimeScale(SimpleTimeChart.Util.getTimeScaleFromLayer(chart,candlestickLayer));chart.setDataScale(SimpleTimeChart.Util.getDataScaleFromLayer(chart,candlestickLayer));secondChart.setDataScale(SimpleTimeChart.Util.getDataScaleFromLayer(secondChart,lineLayer));volumeChart.setDataScale(SimpleTimeChart.Util.getDataScaleFromLayer(volumeChart,histLayer,5)// 5 is the number of measure on the Y Axis);chartContainer.draw();- You can see the full code from above here
npm install -g yarn
yarn install
./node_modules/.bin/webpack-cli --watch