Utilizing highcharts-ng to display dynamic content in Angular, supporting over 80

I am facing a performance issue with my project. I have around 80 area charts on a single page built using Angular and highcharts-ng. Whenever the data is loaded and bound to the charts by Angular, my browser freezes for approximately 2 seconds. While it may not seem like a long time, it is still bothersome...

  1. What could be causing this delay? Is it an issue with the binding between Angular and the charts, or is it due to the rendering process by Highcharts?

  2. Is there a way to optimize this process to make it faster, or at least prevent the browser from freezing?

EDIT:

The server responds quickly, and the data size is relatively small. Interestingly, when I disable the charts (using ng-if="false"), the rest of the data loads swiftly without any performance hiccups.

Each area chart contains a maximum of 12 data points.

javascriptangularjshighchartshighcharts-ng

Answer №1

If you come across a situation like this, be cautious of what you include in data objects in highcharts-ng. Everything is constantly monitored with $watch. In my experience, I included arrays of objects in the chart data to display details when a graph segment was clicked. Unfortunately, this decision led to severe performance issues due to the large digest cycle. To resolve this issue, I modified it by inserting a function that returned the array into the chart data instead of the array itself.

Answer №2

Improving API/Server Performance

In my experience with an Angular app, I encountered similar performance issues, especially when dealing with large amounts of data without using the directive-highchartsNG. The delay in downloading and loading data on the page was noticeable, even though the API response was fast. This slowdown occurred due to the time it took to process the request and render the data for use in highcharts or other DOM elements.

Tips for Faster Chart Rendering:

I recently discovered the boost.js module released by Highcharts, designed to optimize the performance of various types of charts. This module significantly speeds up the rendering process, allowing for quick loading of hundreds of thousands of data points in Highcharts.

For more information, visit the official page for Highcharts Boost.js module.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with ng-show not toggling visibility on ng-click event in AngularJS

When I click on an Edit Mode link, I want to display some Edit icons. I've tried using ng-click with ng-class and ng-show but it's not working as expected. Here is the HTML code: <div click-to-edit="questions.n1.name" class="row question"> ...

javascriptangularjsangularjs-ng-clickusing-directives

How to troubleshoot incorrect div width detection by jQuery in Bootstrap

My asp.net mvc4 project utilizes bootstrap for markup and jquery for client side functionality. <div class="row"> <div class="col-md-4 container" id="cont"> <div class="row overlay_container" id="overlayCont"> <div class=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Organizing JSON Data into Paragraphs

I'm working on a basic web application using Angular JS. Within my JSON object, I have several paragraphs that I need to split onto separate lines. I tried looking for a way to force a line break within the JSON object, but couldn't find a solut ...

javascripthtmlangularjsjson

What is the most effective method in React JS to achieve real-time results with every keystroke by making REST calls to the server?

We are dealing with a huge database and the task at hand is to display results as the user types them in the search box. Preloading queries to attempt matching is out of question due to the enormity of our data. Currently, we make a server request with th ...

javascriptreactjsrestsearch

I'm encountering an issue in JavaScript while attempting to convert the following string into a JSON object. Can anyone assist in identifying the problem with this string?

How can I correct this string to make it a valid JavaScript JSON object? txt = '{"Categories" : [{"label":"petifores","id":"1"}, {"label":"wedding cake","id":"2"}, {"label":"shapes of cakes","id":"3"}, ...

javascriptphpjqueryjson

A new value was replaced when assigning a JSON value inside a loop

Is there a way to generate a structure similar to this? { "drink": { "2": { "name": "coke", "type": "drink" }, "3": { "name": "coke", "type": "drink" } }, "food": ...

javascriptjqueryjson

Using ReactJS and Redux to dispatch notifications

I have a query regarding displaying notifications for successful or failed user registration actions. Utilizing Redux, I've implemented the following action page: export function registerUserFail(error){ return { type:REGISTER_USER_FAIL, ...

javascriptreactjsreduxflux

"Is it possible to use a Twitter widget with Mootools

I have been attempting to create a marquee for my twitter Account on my website. After some trial and error, I was able to achieve this using jQuery. Here is the code I used: <div id="twitter"> <p> Loading.....</p> <n ...

javascriptjqueryasp.nethtmlmootools

I am looking to update a WordPress site every 10 seconds to keep it current

Currently, I am working on a plugin and my goal is to automatically refresh the widget every 10 seconds. Can someone guide me on how to achieve this? I need to figure out a way to call the widget function at regular intervals in order to refresh the conte ...

javascriptphpjqueryhtmlwordpress

Identifying the selected element within a THREE.js object

I've created a sphere with a background image, and placed the camera inside to create a panoramic effect when the sphere rotates. Now I'm looking to detect when a user clicks on the sphere using a three.js example: var intersects = ray.intersec ...

javascriptthree.js

The react router dom seems to be malfunctioning when attempting to switch between paths

Can anyone help me troubleshoot my React router issue? I'm not seeing any changes when I try to change the path. The code can be found here. .................................... import React from "react"; import Layout from "./Layout"; import Home ...

javascriptreactjsreact-hooksreact-reduxreact-router

Having trouble receiving a complete response when making an ajax request to fetch an entire webpage

Currently, I am experimenting with J-Query Ajax functionality. My goal is to send a request in order to retrieve the entire HTML data of a page that I have hosted on bitbaysolutions.com. The issue arises when I load this URL and execute document.getElement ...

javascriptjqueryhtmlajaxgoogle-chrome-extension

In the link function of a custom directive in Angular, the curly braces {{}} are processed as

Can you provide guidance on interpreting the content of a div where my directive is used as an attribute? For example: <div my-directive>{{1+1}}</div> My link function is as follows: link = (scope, element, attrs) => interpretedString ...

angularjsangularjs-directivedirective

When trying to load TinyMCE via AJAX, it fails to appear on the page

My dilemma involves two pages - page1 and page2. On page2, there is a Tinymce initialization setup as follows: $(document).ready(function(){ tinymce.init({ selector: "textarea", theme: "modern" }); }) ...

javascriptjqueryhtmlajax

How to deal with simultaneous calls to .save() in TypeOrm within an Express API environment

One issue I encountered is that my frontend needs to fetch both /users/:userId/profile and /users/:userId/profile-small simultaneously in order to display two profiles. When the user is not cached in the database, the .save(user) function will be called tw ...

javascriptnode.jstypescriptexpresstypeorm

Is it possible to refresh the bootstrap datatable automatically every minute?

I have implemented a bootstrap server-side datatable in my AngularJS application and now I need to refresh the data of that table every minute. Can anyone provide guidance on how to achieve this? Here is the code snippet I am currently using: HTML: <t ...

angularjsdatatableangular-datatables

Implementing adaptive window.scrollY listener in React to account for different screen sizes

I am currently using a useEffect hook to create a fade-in effect for text based on scroll position. While this works perfectly on my 27-inch MAC screen, I am facing challenges when viewing it on a smaller screen. I am unsure how to adjust the useEffect to ...

javascriptreactjsmaterial-ui

Switching up the gameplay in Tic Tac Toe [The Odin Project]

Hello everyone, I have a question to ask and it's my first time here, so please forgive me if I make any mistakes! I've been learning to code with a resource called The Odin Project. Up until now, I've been able to tackle each project with ...

javascripthtmldom-eventsaddeventlistenertic-tac-toe

How can you update a MeteorJS Collection without unsubscribing and subscribing again?

I'm currently working on my meteor project and struggling to understand the best approach in Meteor for my issue. My situation involves a subscription that is initially triggered on page load. I am subscribing to a publication without any parameters ...

javascriptnode.jsmongodbmeteor

What are the steps to incorporate metrics middleware for Socket IO notifications, specifically monitoring both emitted events and listener activity?

I am currently working on a project that involves tracking all socket.io notification transactions initiated by the server, resembling an API request/response counter to validate subscription validation. Our team is utilizing an express middleware to moni ...

javascriptnode.jssocketsexpressloopback