JavaScript code(JQuery) not display in rails app

Question

I want to display chart in view in rails app. use this link http://jsfiddle.net/zz7pB/ contain chart

in application.html.erb and try it in view

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

in application.js

//= require_tree 
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require chart   ---> name of controller

chart.js in app -> assets -> javascripts

$(function () {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;
        $('#container').highcharts({
            chart: {
                type: 'line',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime(), // current time
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                })()
            }]
        });
    });

});

in index.html.erb

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

i want display this chart in my app this all information. This live chart

when inspect element display div put not contain chart.

i read this Where should I place my jQuery code in my Ruby on Rails applications? but not solve it

This error appear in the console in the browser

no contain `//= require rails-ujs //= require turbolinks //= require_tree . //= require Chart.bundle //= require chartkick //= require highcharts //= require jquery //= require jquery_ujs //= require bootstrap //=require plugins/highcharts //=require plugins/exporting //= require rails-ujs //= require turbolinks //= require_tree . //= require gmaps/google //= require fusioncharts/fusioncharts //= require fusioncharts/fusioncharts.charts //= require fusioncharts/themes/fusioncharts.theme.fint` — Sdadad, Jun 28 '18 at 16:54
do u have extra JS files in `assets/js` folder that not mentioned in `application .js` file ? — 7urkm3n, Jun 28 '18 at 16:58

Charith H · Answer 1 · 2018-06-29T01:00:27.360

0

EDITED:
Step 1
I created a new rails application and, Jquery-rails Gem added to the Gemfile.

Gemfile

gem 'jquery-rails', '~> 4.3', '>= 4.3.1'

application.js

//= require jquery
//= require jquery_ujs

And then run bundle install
Step 2
Downloaded HighchartJs and ExportingJs files and placed in assets/javascripts/plugins folder. And, These libraries are imported to application.js as below.

application.js

//= require plugins/highcharts
//= require plugins/exporting

Step 3 Created chart.js file and imported to application.js

//= require chart

Then paste your Js code in this file. All should work now.
Tips Please follow more tutorials to learn how to debug javascript with browser console.

edited Jun 29 '18 at 01:00

answered Jun 28 '18 at 14:00

Charith H

345
1
13

how to pass hash data to highcharts-rails Gem – Sdadad Jun 28 '18 at 14:24
No. This gem will only provide you the library files. But Still you have to use your custom js file as it is. But you don't need to download and place library files inside your App. First try my first answer rather using this gem. – Charith H Jun 28 '18 at 14:27
i try your answer `chart.js` inside `app-assets-javascript-plugins` show this error and try `vender/assets/javasript ` show this error `couldn't find file 'plugins' with type 'application/javascript'` – Sdadad Jun 28 '18 at 14:36
I think you have misunderstood my answer. Create a folder called plugins in `vender/assets/javasript` or `app/assets/javascript` and paste both downloaded highcharts.js and exporting.js files in here. – Charith H Jun 28 '18 at 14:40
i download highcharts.js but how download exporting.js . i search but not can – Sdadad Jun 28 '18 at 14:51
Thanks you but not appear. store highcharts.js and exporting.js in vender/assets/javasript or app/assets/javascript – Sdadad Jun 28 '18 at 15:03
Thank you but i walk all step but not appear and upload photo of console in question ? – Sdadad Jun 29 '18 at 08:23

JavaScript code(JQuery) not display in rails app

1 Answers1