Unable to render chart (installed using aurelia-cli)

hozn commented 7 years ago

I'm sure I'm doing something wrong, or misunderstanding something basic, but am banging my head against a wall trying to get aurelia-chart working with current aurelia (framework v1.0.7), installed using aurelia-cli (0.23.0).

I installed like:

npm install --save aurelia-chart chart.js

I edited aurelia.json to add these to the vendor-bundle.js deps:

          {
            "name": "chart.js",
            "path": "../node_modules/chart.js/dist",
            "main": "Chart.min"
          },
          {
            "name": "aurelia-chart",
            "path": "../node_modules/aurelia-chart/dist/amd",
            "main": "index",
            "resources": [
              "elements/chart-element.js",
              "elements/chart-element.html",
              "attributes/chart-attribute.js"
            ]
          },

I load the plugin in main.js so my chart element is globally available.

My app.js look like:

import {bindable} from 'aurelia-framework';

export class App {

  @bindable
  chartdata = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  };

}

and my app.html looks like:

<template>
  <chart type="bar" data.bind="chartdata"></chart>
</template>

No errors in the console, but nothing is displayed. (I also copied the element into my source tree so I could add some logging to the various lifecycle methods, and everything seems to be instantiated fine, but no data is displayed).

In contrast, this example snippet (using same data) in an old-school html page loads up fine (displaying a bar chart):

<html>
<body>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });
</script>
</body>
</html>

Any help would be greatly appreciated!

hozn commented 7 years ago

I should add that this code also works fine (and renders a chart) when placed in my App.attached() method:

 let chart = new Chart(this.myChart, {
      type: 'bar',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true
            }
          }]
        }
      }
    });

(With app.html modified to include:)

  <canvas ref="myChart" width="400" height="400"></canvas>

grofit commented 7 years ago

it all looks fine, I am not sure if it is something related to the referenced module issue, I put a comment in there but I would expect if you don't get any errors then the plugin is not loading correctly, it is difficult to prove without manually debugging some stuff but your data looks perfectly fine and your use case seems right as shown in the examples:

https://github.com/grofit/aurelia-chart/blob/master/examples/jspm/src/app.html#L10

hozn commented 7 years ago

Ok, thanks for checking my code. I will continue to investigate the issue. Now that I have a working version with raw Chart.js, I will build up the custom component manually to figure out why that isn't working. I will follow up.

hozn commented 7 years ago

Just to follow up, the issue appears to be with the width and height being set to "0" -- whether or not I attempt to set these on the <canvas> tag. This might be me misunderstanding the correct way to set width/height on chart.js canvases.

When I change my template to something like this:

<template>
  <div style="width: ${width}px; height: ${height}px">
    <canvas ref="canvasElement"></canvas>
  </div>
</template>

Then it displays correctly sized, but I suspect this is wrong. (I bound made width and height @bindable in the component.) Is the right way to configure width/height to set chart properties, or ?

Thanks!

grofit commented 7 years ago

Hello, sorry been very busy over the festive period.

There was an issue with chartjs in version 1.x where if you updated the chart it would shrink itself into oblivion so to fix that the underlying lib used to keep track of the desired width/height and would force it to return to the same size.

This being said now that we use the 2.x version of chartjs it may not be needed anymore, but that is the reason why the component takes a width/height.

hozn commented 7 years ago

Ok, well, I'm glad that I'm not just doing something stupid. I have not experimented with updates shrinking the chart (when working directly with chartjs), but I probably will have a chance to do so in the next few days). I'll let you know if I learn anything additional that would help here.

AngelMunoz commented 7 years ago

any news on this? I have the same problem and can't render anything at all I tried @hozn suggestions but I'm not able to render anything

grofit commented 7 years ago

I am still unsure what the underlying problem is, as it works ok in the examples provided with the lib so given aurelia can be consumed in so many different ways and there could potentially be issues in different versions of chart js (this lib was last working with the early 2.x version).

mohammedJ commented 7 years ago

@AngelMunoz @hozn could one of you inspect and see if a iframe element (under the chart element) is being created. If so, then try adding width and height to the chart element e.g:

<chart style="width: 150px; height: 150px" type="bar" data.bind="chartdata"></chart>

hozn commented 7 years ago

I can try to test this out soon (I abandoned chartjs in favor of Highcharts, due to the clunkiness of having the iframe, among other things), but IIRC the iframe was definitely being created; it was just 0px size.

On Thu, Feb 16, 2017 at 2:26 AM Mohammed Javed Jeewa < notifications@github.com> wrote:

@AngelMunoz https://github.com/AngelMunoz @hozn https://github.com/hozn could one of you inspect and see if the iframe is being created. If so, then try adding width and height to the chart element e.g:

<chart style="width: 150px; height: 150px" type="bar" data.bind="chartdata">

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/grofit/aurelia-chart/issues/27#issuecomment-280253129, or mute the thread https://github.com/notifications/unsubscribe-auth/AAX7A9H7Y4LlIGpw8Sj7NDg1obziGcOFks5rc_o_gaJpZM4LIjvO .

droda59 commented 7 years ago

I'm having the same problem. The problem is when I use the chart element <chart type="line" data.bind="simpleLineData" should-update="true" throttle="100" style="width: 150px; height: 150px"></chart> then the iFrame is created and everything but the size of the canvas is still 0x0. But when I use the chart attribute, it works <canvas chart="type: line; should-update: true; throttle: 100; data.bind: simpleLineData"></canvas>

So there is a workaround, but I would prefer using the element instead of the attribute.

sondr commented 7 years ago

Edit the custom-element html from:

<template>
    <canvas ref="canvasElement"></canvas>
</template>

To:

<template>
  <div>
    <canvas ref="canvasElement"></canvas>
  </div>
</template>

will make it work.

JesseNewman19 commented 6 years ago

@grofit Are you able to get this package working if you spin up an Aurelia-CLI project?

Everything works fine for me in my jspm project, but the moment I converted everything to CLI I am unable to get the charts to behave properly.

The plugin loads, chartjs works, but the height/width issues are constant. If I don't use the attribute, I can't even get a chart to render, but if I do use the attribute, the charts try to expand themselves to the full width of the browser.

I tried @sondr 's fixes by manually editing the chart-element.js, but all that did was mirror the behavior of the element.

The charts just don't render at the proper height / width values, regardless of whether or not I supply a specific value or not.

As a side note, I noticed that I do not actually ever see an iframe element. It works without it, but that strikes me as odd.

grofit commented 6 years ago

Hey @JesseNewman19

I don't really use Aurelia anymore (mainly because of the issues like what you are facing where you have to keep using different build systems and everything breaks) so I havent tried this library since a couple of years ago.

On the problem relating to the width/height I know there is/was (not sure if it is fixed) a bug with chartjs where it would go crazy if you were to enable reactive charts, as behind the scenes from what I remember it basically refreshes the chart but it skews the view and keeps skewing it until it is unreadable. So I remember having to work around it by giving it a specific width/height to force it to stay a static size.

Not sure if any of that helps.

mrpullen commented 6 years ago

Adding the following to Aurelia.json dependencies worked for


 {
   "name": "chart.js",
   "path": "../node_modules/chart.js/dist",
   "main": "Chart.min.js"
},
{
   "name": "aurelia-chart",
    "path": "../node_modules/aurelia-chart/dist/amd",
    "main": "index",
    "deps": ["chart.js"],
    "resources": [
            "elements/chart-element.html",
            "elements/chart-element.js",
            "attributes/chart-attribute.js",
            "observers/model-observer.js"
     ]

}```

then make sure to enable the plugin

aurelia.use.plugin("aurelia-chart");

grofit commented 6 years ago

If this solves everyones woes please raise a PR for it and I will approve it.

grofit / aurelia-chart

Unable to render chart (installed using aurelia-cli) #27