0

I'm looking for a front-end charting library (i.e. something in Javascript) that supports stock-like features. My x-axis is however not time, but an incrementing integer -- which stops me using most stock charting libraries.

I have used AmChart to do what I need: https://www.moneypot.com/user/whitetuxpeng

but due to the amount of data, I have been forced to use pagination. What I would prefer to do is use a library that would first allow me to showing a sampling of the data, and when you zoomed in enough it would make the individual data points available.

Thanks!

Heptic
  • 3,076
  • 4
  • 30
  • 51

3 Answers3

3

You could try another library or build your own functionality using D3. ZingChart is a JavaScript charting library that should satisfy all of your requirements. First, regarding your x-axis issue, ZingChart has the ability to configure x-axes in many different ways. I'm including the snippet for a demo that shows setting up the x-axis with a minimum value and a step value.

       var myChart =        {
        "type":"line",
        "scaleX":{
            "min-value":16951,
            "step":4,
            "max-labels":9
        },
        "series":[
            {
                "values":[69,68,54,48,70,74,98,70,69,68,54,69,68,54,48,70,74,98,70,72,68,49,69,48,70,74,98,70,72,68,49,69,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69],
                "text":"Apple"
            }
        ]
    };

   
  zingchart.render({
    id: "steps",
    output: "svg",
    width: 600,
    height: 400,
    data: myChart
    
   });
<html>
 <head>
  <script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js""></script>
     
  <meta charset="utf-8">
  <title>Steps</title>
 </head>
   <body>
        <div id="steps"></div>

 </body> 
</html>

Regarding your issue with data size and pagination, ZingChart provides a variety of ways to handle this, too. ZingChart can render client-side charts with up to about 500k points without having to sample datasets. You can try the speed test at http://www.zingchart.com#speedtest

If your dataset is larger or you prefer to sample your data, ZingChart has a few options for that:

  • Sampling geared towards chart performance
  • Smart sampling which will prevent outlying data points to be removed in the sampling.
  • API, which provides the ability to show exact data on a zoom interaction (if you decide to sample your data).

Sampling demo.

I'm on the ZingChart team so feel free to reach out if you have any questions about what is presented here.

Merrily
  • 1,686
  • 10
  • 14
1

Two libraries that are suitable for this type of charting are NVD3 and chartsjs.

ChartsJS is the easier of the two to understand and uses html5 canvas which has good performance and allows charts to be easily saved as images by the client.

NVD3 is a collection of reusable charts for D3 and therefore supports anything svg in the browser can do.

Because of your zooming requirement I would generally recommend NVD3 (or D3 itself).

If neither of these libraries are to your liking he is another post that lists several more javascript charting libraries.

Community
  • 1
  • 1
cubiclewar
  • 1,569
  • 3
  • 20
  • 37
0

You can try Highcharts or Google Charts. Also you always can do it yourself using D3:)

Sergey Lihoman
  • 98
  • 8