What JS framework to use to make pausable, scrollable, dynamic stock charts simulator & visualizer ?

I want to make my own desktop stock simulator replay of historical stock price moves.

I have a sample dataset of time-series price data available in CSV format.

Essentially, I just need to render this data on canvas. The main point is to accumulate more trading experience in less time. A user can speed trade thru sessions for entire year in a week!

I made a gif of another program made in Delphi(not open-source) to demonstrate the program I want to build.


here

Should I use D3.js, chartist.js, highcharts, python, C++, electron.js or some other JS framework? Could u give me the direction or tool where I should be researching?

The task seems quite easy, after allit's just parsing dataset like above and showing it on screenwith every new row drawing the price moves.


The high quality tick data shows change every milisecond, so it has more fields than just "open high low..", so i guess will need some milisecond clock counter to reflect every change in price.

The canvas should have :

  1. automatic scaling to fit in entire price range when price moves out of bounds of the canvas - all bars should adjust their size accordingly,
  2. zoom in\out
  3. scrollable chart - chart leaves past bars behind as the price prints new bars
  4. speed adjusting slider to slow down/increase the drawing speed

  • I have made a somewhat working version in PURE js , no any libs, but it's not what I want
here in thisjs fiddle

I also attached some gifs to demonstrate what I want to build.

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team February 26, 2018 12:45 PM UTC

Hi Erjan 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We have achieved your requirement using EJ2 Syncfusion chart component. Based on your requirement, we have prepared a sample and it can be find from below. 


We have achieved the crosshair tooltip and zooming features with the following code snippet. 

 
var chart = new ej.charts.Chart({ 
            //To enabel zoom 
            zoomSettings: { enableSelectionZooming: true }, 
           crosshair: { enable: true, lineType: 'Horizontal', line: { width: 0 } }, 
            //... 
        }); 
        chart.appendTo('#candle-container'); 

var location = ej.charts.getPoint( 
         chartData[i].x.getTime(), 
         chartData[i - 1].close, 
         chart.series[0].xAxis, chart.series[0].yAxis 
       ); 
 
        chart.mouseX = location.x; 
        chart.mouseY = location.y; 
        chart.crosshairModule.crosshair(); 


Currently, there is no scrollbar support for chart component. So, we have logged feature request for this requirement, which will be available in any of upcoming Essential Studio release. 

For more information on EJ2 chart component, kindly find the help document form below, 

Kindly find the API for chart component from below, 

You can find the online demos from below, 

Kindly revert us, if you have any concerns. 

Dharani. 



Loader.
Up arrow icon