How To Include Any Chart In Your Rails App

By: Prem Kaithwas Category: Ruby on Rails Technologies: Ruby on Rails

If you want to chart different types of charts in your application using a single library, the Apex charts library is a good one I know.

Follow these steps to use the apex-charts library in your rails application.

1. Open your terminal and run this command to create your brand new rails app.
rails new my-app

2. Install all the necessary gems required by our rails app by running this command.
bundle install

3. Create a database for our application by this command.
rails db:create

4. Let’s generate a scaffold for Model Student by running this command.
rails g scaffold Student name marks:integer

5. Migrate database by running this command
rails db:migrate

6. Start the server to check, we are going well till here by running rails s.
rails s

7. If everything is going well, create some records.

8. To add the apex-chart library in your rails app, you can add it using cdn or by using npm.
Goto this link for more details.

9. I have used cdn to include the apex-chart library in our rails app, the script for cdn is below:
<script src=”https://cdn.jsdelivr.net/npm/apexcharts"></script>

10. Now visit the apex-chart official website to quickly get the code for your required chart. Once you are on the apex-chart website choose any chart you want in your app by clicking on it. Follow this link to get there directly.

11. When you click on any chart here, you are directed to a more detailed page related to the chart you have to choose, here you can alter the chart as per your requirement and copy the design of the chart from here, and paste the code in your javascript file.

12. You got your chart.

Originally published at https://www.cryptextechnologies.com.

--

--

--

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

ICYMI: My Journey to DevOps Monitoring

How to root HDC S5 SM G900

Root LG Phone

My Experience with Multistage Docker-in-Docker on Concourse

Go Algo: Algo trading guide using IB

Mitigating The Risk Of Long-Running Processes

Atlantis Lite — Free Dashboard Design available in three tech flavors: Jinja, Flask, and Django

Atlantis Lite — Free Bootstrap Dashboard, animated presentation.

Using Docker and docker-compose to create a development environment for React + Django application

What I Learned at Work This Week: Gists

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cryptex Technologies

Cryptex Technologies

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

More from Medium

Saving Time With Active Record

Rack: Are you confused?

Multiple deployments and High Availability with Mina and Ruby on Rails

How to Build a Text-Based Adventure Game: Backend, Ruby