Having difficulty implementing lazy loading in highcharts due to various errors popping up

I am currently working on incorporating lazy high charts into my project using the GitHub repository found at this link. I have followed these steps:

  • Installed the Rails plugin with the command: rails plugin install git://github.com/michelson/lazy_high_charts.git

  • Created a new HighChart object in my controller:

    @h = LazyHighCharts::HighChart.new('graph') do |f|
        f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
        f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
      end
    
  • <%= Include the necessary JavaScript file 'highcharts' %>
  • <%= Render the high chart using '<%= high_chart("my_id", @h) %>' %>

However, I encountered confusion when it came to placing the code within the controller. I attempted different approaches and faced various errors as listed below:

Attempt 1)

class DashboardController < ApplicationController
   access_control do
    actions :index do
      allow :Admin
    end
  end

 def index
   @title = "Welcome to Dashboard"
    before_filter :authenticate, :only => [:index]
  @h = LazyHighCharts::HighChart.new('graph') do |f|
    f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
    f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
        end
     end
    end

Result =

Routing Error
uninitialized constant DashboardController::LazyHighCharts

Attempt 2)

 class DashboardController::LazyHighCharts < ApplicationController
  before_filter :authenticate, :only => [:index]
  @h = LazyHighCharts::HighChart.new('graph') do |f|
    f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
    f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
  end
   access_control do
    actions :index do
      allow :Admin
    end
  end
  def index
   @title = "Welcome to Dashboard"
  end
end

View


<%= Include necessary JS files like 'jquery.dataTables.min', 'datatable', 'jquery.dataTables.columnFilter' %>
.....
<%= Render high chart using '<%= high_chart("my_id", @h) %>' %>

Result =

 LoadError in DashboardController#index
Expected dashboard_controller.rb to define DashboardController

As a beginner in RoR and Javascript, I find this process challenging. Any suggestions or advice on where I might be going wrong would be greatly appreciated.

Answer №1

Recently, I encountered a similar issue where the chart was not appearing on the page.

After checking the controller and page code, everything seemed fine.

Upon further investigation, I realized that the Highcharts installation did not include the necessary JS files in the app/assets/application.js.

If you are facing this problem, make sure to add the following code to your app/assets/application.js file:

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock

Answer №2

The main issue lies within the following code block:

@h = LazyHighCharts::HighChart.new('graph') do |f|
    f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
    f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
end

This code should be incorporated inside a controller action.

def index
  @h = LazyHighCharts::HighChart.new('graph') do |f|
    f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
    f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
  end

Furthermore, I suggest installing it by including the gem in your Gemfile rather than using the plugin installation method.

gem 'lazy_high_charts'

Execute the following commands to install the gems:

bundle install

Integrate Highcharts by running the command:

rails g lazy_high_charts:install

Remember that this gem requires jquery as well, so make sure to add the following line to your Gemfile:

gem 'jquery-rails'

After adding jquery, run:

bundle

Generate the necessary JavaScript files using:

rails g jquery:install

An example application has been created for reference, which can be viewed here: https://github.com/Gazler/Highcharts-rails-example

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

Unexpected behavior observed with excessively large string arrays

I am facing an issue with my array containing 58112 words. Whenever I try to check if a word is in the list, it always returns false, except for the first word. While I cannot share my entire code due to its length, here are the key details: isWord("a ...

Guide on utilizing direction.set within threejs for Vector3 types

In the code below, I have defined a plane, wall, and a character. Now, I am trying to set the direction using vector3(). However, I seem to be encountering an issue. Whenever I press the left or right arrow key on the keyboard, I keep receiving the follow ...

If the value of an object is found in an array, then include it in the current

I am working on a function component that creates a linear chart in react using data from an array of objects. The API data I am retrieving appears like this: { "_id": "604face09b305032586fe235", "username" ...

Issue: Unable to create the restangular module because: the variable '_' is not defined

Upon integrating Restangular into an existing website, I encountered a JavaScript error that stated: Failed to instantiate module restangular due to: '_' is undefined I'm unsure of what this means. Can anyone clarify why '_' is ...

Creating a custom hook in React to manage dynamic refs

Creating an app that heavily utilizes animations has posed a challenge for me, especially when dealing with dynamic refs and custom hooks. One of my custom hooks adds a click event listener, manages an animation, and returns a ref: const usePageChange = ( ...

I've been diving into webpack and experimenting with making an api call, but I'm hitting a roadblock. Let me share with you my code

This section pertains to the server const dotenv = require('dotenv'); dotenv.config(); // Setting up environment variables const express = require('express'); const bodyParser = require('body-parser'); const cors = require(&a ...

Issue arising from the rendering of items in a Navigation Bar

I'm encountering an issue where only the last item of the navbar is being rendered even though the data appears to be correct. I've tried hard coding the data into the components but the same error persists.https://i.sstatic.net/ccEuB.png , https ...

Update two distinct object properties using a singular reference in Vue's set method

I'm facing an issue while trying to insert an object into an array using the Vue.set function. The problem is that it adds the item to a different object with the same array property. Here's a snippet of my code: data() { return { ... ...

Setting Metadata Dynamically in Vue Router

Currently, I have a Single Page Application (SPA) built with Vue and Vue Router. The setup mimics an iOS app where the title in the navigation bar changes as you navigate deeper into the views. Right now, the titles are hardcoded in the routes.js file, but ...

Guide on utilizing the carousel component in Bootstrap and populating it with data generated from Node.js

My goal is to design a carousel that displays 5 different pieces of information pulled from a separate app.js file. I attempted to implement a forEach loop, but encountered issues when trying to create a second Bootstrap carousel container. Here's th ...

Converting a JSONArray object into jQuery format

Within my Java code, there exists a JSONArray object labeled colorList that stores a collection of different colors. For example, the array may be constructed like so: ["Red", "Yellow", "Blue"] I am seeking guidance on how to transfer this information ...

I am experiencing a problem where my AJAX responses are being downloaded instead of being loaded into the success data

I'm fairly new to using JQuery. I've been trying to send an AJAX request (File Upload) to a WEB API (ASP.NET MVC), but for some reason, my responses are downloading as JSON files instead of loading into the success data. Below is the code snippe ...

Working with DateTime formatting in Node.js

After receiving the date from an API request in the format: 2021-03-18T15:08:52.000Z Is there a way to convert it to this desired format: 2021-03-18 15:08:52? ...

convert an array of hexadecimal colors into an array of RGB colors

I am trying to convert an array of hex colors to RGB values using a custom function. The array looks like this: var hexColors = [ "#ffffff", "#ffffff", "#ffffff", "#f3f3f3", "#f3f3f3", "#f3f3f3"]; The desired output is: var rgbCo ...

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

When trying to retrieve data from an ajax request, my function needs to receive the returned data as an array of strings. During debugging, I am able to see the response, but at the same time, the error function is triggered. This is how my code looks: ...

Learn the technique for creating smooth background fade effects in three.js

As I dive into learning three.js, I am faced with a challenge. I have implemented three buttons for different backgrounds in my project, but I want them to fade in and out when clicked. The code snippet I am currently using for the buttons is given below: ...

Trouble with database updates in Mongodb using Node.js: issues with ".findOneAndUpdate()" operation

When attempting to update my database using .findOneAndUpdate(), I encountered an issue where the embedded document competitorAnalysisTextData remained empty despite no error messages. // on routes that end in /users/competitorAnalysisTextData // -------- ...

Subtracting time in ReactJS with Moment.js for efficient date and time operations

I'm currently utilizing React Js and looking to subtract time in JavaScript using the moment library. Below is my attempted code: timecheck(){ var time1 = moment().format("09:00:00"); var time2 = moment().format("00:03:15" ...

Trouble with $scope.currentPage not updating correctly in Angular UI Pagination

Recently, I've been working on this codepen project. In it, I'm utilizing the function '$scope.pageChanged' to monitor page changes. $scope.pageChanged = function() { $log.log('Page changed to: ' + $scope.currentPage); }; H ...

Using a jQuery gallery can cause links to become unresponsive and unclickable

While creating a responsive webpage with the Zurb Foundation framework, I encountered an issue when trying to incorporate nanoGallery which also uses jQuery. After adding the gallery scripts, the top menu generated by the Foundation script became unclickab ...