It is currently Sat Aug 02, 2014 2:23 am Advanced search

Slow

Technical support for the Highcharts Stock package

Slow

Postby livni » Sun Feb 19, 2012 5:19 pm

I'm trying to create a highstock chart, but I'm encountering extreme slow rendering. The following simple example includes only 50 points but takes ~12 seconds to render.
I've tried it both on newest Chrome and newest Firefox - both take ~12sec.
I've tried both with inline data (as shown below) and with a json response - both take ~12sec.
Using Firebug's Net view, it seems as if it should have taken ~250ms.
What is wrong with this code?
Does it work slowly for you too?

Code: Select all
<html>
<head>
<script src="/static/js/jquery-1.7.1.min.js.rb.js" type="text/javascript"></script>
<script src="/static/js/highstock/highstock.js" type="text/javascript"></script>
<script type="text/javascript">
var chart; // globally available
$(document).ready(function() {
    // set the allowed units for data grouping
    var groupingUnits = [[
            'week', // unit name
            [1] // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]];
    var ohlc = [[1315162800,1.4152,1.4152,1.4140,1.4140],[1315162860,1.4152,1.4152,1.4152,1.4152],[1315162920,1.4150,1.4150,1.4145,1.4146],[1315163040,1.4143,1.4143,1.4143,1.4143],[1315163520,1.4144,1.4144,1.4144,1.4144],[1315163580,1.4140,1.4140,1.4140,1.4140],[1315163700,1.4132,1.4132,1.4132,1.4132],[1315163700,1.4132,1.4136,1.4132,1.4136],[1315163760,1.4134,1.4134,1.4134,1.4134],[1315164120,1.4136,1.4136,1.4136,1.4136],[1315164300,1.4136,1.4136,1.4136,1.4136],[1315164600,1.4128,1.4128,1.4127,1.4128],[1315164600,1.4128,1.4135,1.4127,1.4135],[1315164660,1.4130,1.4131,1.4129,1.4130],[1315164720,1.4130,1.4130,1.4130,1.4130],[1315164780,1.4131,1.4131,1.4131,1.4131],[1315165140,1.4130,1.4130,1.4130,1.4130],[1315165380,1.4135,1.4135,1.4135,1.4135],[1315165500,1.4135,1.4135,1.4135,1.4135],[1315165500,1.4135,1.4147,1.4135,1.4147],[1315165860,1.4138,1.4138,1.4138,1.4138],[1315166160,1.4140,1.4140,1.4140,1.4140],[1315166340,1.4145,1.4147,1.4145,1.4147],[1315166400,1.4144,1.4144,1.4144,1.4144],[1315167300,1.4136,1.4136,1.4130,1.4130],[1315167540,1.4144,1.4144,1.4144,1.4144],[1315167840,1.4136,1.4136,1.4136,1.4136],[1315167900,1.4136,1.4136,1.4136,1.4136],[1315168140,1.4130,1.4130,1.4130,1.4130],[1315168200,1.4131,1.4131,1.4131,1.4131],[1315169100,1.4133,1.4133,1.4133,1.4133],[1315169220,1.4131,1.4131,1.4131,1.4131],[1315169280,1.4133,1.4133,1.4133,1.4133],[1315170000,1.4137,1.4147,1.4137,1.4141],[1315170060,1.4137,1.4137,1.4137,1.4137],[1315170120,1.4146,1.4147,1.4144,1.4144],[1315170240,1.4144,1.4145,1.4144,1.4145],[1315170480,1.4146,1.4146,1.4146,1.4146],[1315170660,1.4140,1.4140,1.4140,1.4140],[1315170780,1.4139,1.4141,1.4139,1.4141],[1315170900,1.4136,1.4145,1.4136,1.4144],[1315171080,1.4136,1.4139,1.4136,1.4139],[1315171500,1.4142,1.4142,1.4142,1.4142],[1315171560,1.4145,1.4145,1.4144,1.4144],[1315171620,1.4145,1.4145,1.4144,1.4144],[1315171800,1.4136,1.4136,1.4136,1.4136],[1315172700,1.4136,1.4136,1.4136,1.4136],[1315172700,1.4136,1.4136,1.4136,1.4136],[1315173120,1.4136,1.4136,1.4136,1.4136],[1315173480,1.4136,1.4136,1.4136,1.4136],]
    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            alignTicks: false
        },
        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'Some Ticker Bars'
        },
        yAxis: [{
                title: {
                    text: 'OHLC'
                },
                height: 200,
                lineWidth: 2
            }],
        series: [{
                type: 'candlestick',
                name: 'Some Ticker',
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                }
            }]
    })});
   

</script>
</head>

<body>
<div id="container" style="width: 100%; height: 400px"></div>
</body>

</html>


Here's Firefox's Net view with the json variant - what is that big wait before the json is loaded? It shows ~5sec but it was actually ~12sec...
Image
livni
 
Posts: 6
Joined: Sun Feb 19, 2012 5:12 pm

Re: Slow

Postby eolsson » Mon Feb 20, 2012 5:50 pm

Hi,
I removed the duplicates in your dataset and now it loads much faster.
See: http://jsfiddle.net/kB7jR/
Erik Olsson
Highsoft Solutions AS
eolsson
 
Posts: 396
Joined: Tue May 03, 2011 1:07 pm

Re: Slow

Postby livni » Mon Feb 20, 2012 8:18 pm

Thank you Erik :)
livni
 
Posts: 6
Joined: Sun Feb 19, 2012 5:12 pm

Re: Slow

Postby cailie » Tue Feb 21, 2012 9:59 am

Interesting. Why did removing a few duplicates from the dataset make a significant difference?
User avatar
cailie
 
Posts: 81
Joined: Sun Aug 28, 2011 9:43 am
Location: Vancouver, BC, Canada

Re: Slow

Postby eolsson » Tue Feb 21, 2012 12:38 pm

The reason would be that we don't have as much data-validation and automatic correction in place. Such functionality should catch errors in the data; or maybe in this case that say that the data should be split up into two series.

So when a time series contain duplicate values we still assume that the data is clean. My guess is that the code that tries to find the ticks/gridlines is to blame, it will try to find nice 'ticks' based on the range of data and the minimum interval between points => if two points share the same x, they are _very_ close and this could result in a _very_ large amount of possible ticks.
Erik Olsson
Highsoft Solutions AS
eolsson
 
Posts: 396
Joined: Tue May 03, 2011 1:07 pm

Re: Slow

Postby cailie » Wed Feb 22, 2012 12:34 am

Hi Erik,

Understood. That is something to watch out for. Thank you for the detailed explanation!

Cheers,
-C
User avatar
cailie
 
Posts: 81
Joined: Sun Aug 28, 2011 9:43 am
Location: Vancouver, BC, Canada


Return to Highstock Usage

Who is online

Users browsing this forum: Bing [Bot] and 2 guests