Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hi I am making a query tool that will view large sets of data and viewing it through Highcharts. My query tool allows you to choose a variety of tags to look at. Then when you choose all of the tags you want to look at, it gathers those points within a date range. It queries large data sets and Highcharts becomes really choppy. Of course I have the zoomable option, but I want to know how to make it fast like the example I linked above. I believe the performance issue relies on the client side.

The following is my code. I gather all my results into an array of arrays. Then I pass it into a function to fill my high charts.
JavaScript
success: function (data) {
                    var information = new Array();
                    $.each(data, function (listnum) {
                        var list = new Array();
                        $.each(this, function (index) {
                            var dtinfo = this.DateCollected;
                            var part = dtinfo.split(" ");
                            var date = part[0].split("/");
                            var year = date[2];
                            var day = date[1];
                            var month = date[0];
                            var time = part[1].split(":");
                            var hour = time[0];
                            var min = time[1];
                            var sec = time[2];
                            var point = [Date.UTC(year, month, day, hour, min, sec), this.FValue];
                            list[index] = point;
                        });
                        information[listnum] = list;
                    });
                    $("#GraphLoadBut").removeClass("load").addClass("notload");
                    $("#accordion").multiAccordion({ active: 2 });
                    fillChart(information, tagNames, pointRange, colors);

                }
            });
        });

        function fillChart(information, tagNames, pointRange, colors) {
            var length = information.length;
            for (var i = 0; i < length; i++) {
                var series = { data: information[i] };
                series.name = tagNames[i];
                series.pointInterval = pointRange[i];
                if (colors[i] != "") {
                    series.color = "#" + colors[i];
                }
                options.series.push(series);
            }
            var chart = new Highcharts.Chart(options);
        }

Any ideas how I can optimize this? I believe it is a client side problem.

The data I am getting is JSON
Posted
Updated 2-Jul-12 7:26am
v2

1 solution

In one of my recent research, HighChart was the initial choice. When it hits the performance issue, started looking the alternative and got Google Chart tools with better performance and same UI functionality.

You can refer/download it at https://developers.google.com/chart/[^]
 
Share this answer
 
Comments
Philippe Mori 2-Jul-12 15:21pm    
Effectively, trying multiple charts is a good idea. And if your data is too big, then you should somehow filter if to reduce it size.
Member 8336910 2-Jul-12 15:45pm    
I might try that next. I am trying out Highchart stockcharts. So far the chart is much faster. Currently I am trying to learn how to use it. I will try Google Chart tools after and compare which is better
Member 8336910 2-Jul-12 18:05pm    
I might be looking at Google Chart or D3 now. I am having performance issues for graphing about 2500 points with Highchart stockcharts. I believe that test would be like a minimum. So can I get a summary of what have you found so far in google charts with large datasets?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900