How to remove Failed to create chart: can't acquire context from the given item error while using it with Ruby on Rails?

Question

I installed frappe charts for ruby on rails through gem.

Then I tried to run one of the frappe-chart code which is given in their website:

 let data = {
    labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

    datasets: [
      {
        title: "Some Data",
        values: [25, 40, 30, 35, 8, 52, 17, -4]
      },
      {
        title: "Another Set",
        values: [25, 50, -10, 15, 18, 32, 27, 14]
      },
      {
        title: "Yet Another",
        values: [15, 20, -3, -15, 58, 12, -17, 37]
      }
    ]
  };

  let chart = new Chart({
    parent: "#note-graph", // or a DOM element
    title: "My Awesome Chart",
    data: data,
    type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
    height: 250,

    colors: ['#7cd6fd', 'violet', 'blue'],
    // hex-codes or these preset colors;
    // defaults (in order):
    // ['light-blue', 'blue', 'violet', 'red',
    // 'orange', 'yellow', 'green', 'light-green',
    // 'purple', 'magenta', 'grey', 'dark-grey']

    format_tooltip_x: d => (d + '').toUpperCase(),
    format_tooltip_y: d => d + ' pts'
  });

<canvas id="note-graph"></canvas>

I also tried with div instead of canvas but it's always showing the same error.

Its connecting through manifest in application.js where I have included the javascript file name and I have also included it in the stylesheets as is described in this page https://github.com/pacuna/frappe_charts — Souravirus, Feb 16 '18 at 21:37
I'm getting the error: `No parent element to render on was provided` in my browser's web inspector. I filed an [issue](https://github.com/pacuna/frappe_charts/issues/1) at frappe_charts. — 7stud, Feb 16 '18 at 23:19
I have also submitted my error at that issue. Hope they reply soon. — Souravirus, Feb 17 '18 at 10:48
See if you can solve your error by doing this: `let chart_div = document.getElementById('chart');`. Put that line immediately preceding the line `let chart = new Chart({`. And then use `parent: chart_div,` — 7stud, Feb 17 '18 at 12:18
No, I get the same error as before (which is different than your error). What browser are you using? — 7stud, Feb 17 '18 at 23:56
I can get the chart to display if I put a script tag in views/layouts/application.rb that links to the frappe-charts cdn, then put the js for creating the chart in a script tag immediately underneath that. Yeah a blasted chart! (continued) — 7stud, Feb 18 '18 at 02:43
Okay, so then I tried removing that stuff from the layout and copying all the js at the cdn link and pasting it in a file and putting the file in app/assets/javascripts. Then I pasted the js which creates the chart into a separate file. And even though I require the two files in the proper order in assets/javascripts/application.js, I get that blasted "No parent to render on error". — 7stud, Feb 18 '18 at 02:45
Okk I guess when we write the js in the same file its working — Souravirus, Feb 18 '18 at 04:30
I don't understand the niggling details of the asset pipeline because I think dividing the code in two files and putting them in app/assets/javascript is equivalent to putting the link to the frappe-charts cdn in the layout, and putting the js that creates a chart in a script tag immediately underneath that. — 7stud, Feb 18 '18 at 04:41
Have you included your javascript file in application.js of asset/javascript otherwise the javascript is not being used by the html file — Souravirus, Feb 18 '18 at 05:02
In my comment that starts with *Okay, so...*, I said, *And even though I require the two files in the proper order in assets/javascripts/application.js*. And you don't necessarily have to require specific files because `require tree .` requires all the files in the javascripts directory for you--you only need to require js files when you need them to be in a specific order, like in this case. — 7stud, Feb 18 '18 at 05:19
So can I put the js action underneath the html code if it is working out with you? — Souravirus, Feb 18 '18 at 05:25
I'm not sure what you are asking. I put the script tag that links to the cdn right before the closing body tag in the layout file, then I put the js that creates the chart in another script tag directly underneath the first script tag. — 7stud, Feb 18 '18 at 05:41
I guess putting the two script tags at the bottom of the view is exactly the same thing, so that would be better. — 7stud, Feb 18 '18 at 05:54

score 0 · Answer 1 · answered May 26 '19 at 23:18

Im using laravel + vuejs.

this solved my problem with "Error: No parent element to render on was provided." with frapped

with the sample data that the npm provided,

in de data just declare the data varible like this:

<template>
    <div>
        <h1>CHARTS</h1>
            <div id="chart"></div>
    </div>
</template>


<script>
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'

export default{
data(){
    return{
         data : {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", type: "line",
            values: [25, 50, -10, 15, 18, 32, 27, 14]
        }
    ]
},

chart : null // THIS IS WHAT YOU NEED TO SET NULL
    }
},
methods:{
    setChart(){ // IN METHOD YOU SET A NEW CHART
     this.chart=new Chart("#chart", { 
    title: "My Awesome Chart",
    data: this.data,
    type: 'axis-mixed',
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})
    }
},
mounted(){
    this.setChart(); // CALL THE METHOD IN A lifecycle hook
}    
}


</script>

How to remove Failed to create chart: can't acquire context from the given item error while using it with Ruby on Rails?

1 Answers1