trading-peter / chart-elements

Chart.js as Polymer Elements
https://robdodson.github.io/chart-elements
267 stars 70 forks source link

Not working properly #56

Closed esd100 closed 8 years ago

esd100 commented 8 years ago

Hi Rob,

Thanks for putting this together.

I'm having a couple issues. 1) When I put in a chart-element, say for example chart-line, I get the error chart is not defined. So, when I look in the chart-js-import.html file, the target is: <script src="../Chart.js/dist/Chart.min.js"></script>. When I look in the Chart.js folder, however, within Bower_components, there is no dist folder and there is no chart.min.js file. So, I tried changing the src attribute to <script src="../Chart.js/src/Chart.js"></script> and that got rid of the 1st error.

2) The 2nd error that comes up though is that now, I get this error in the console: Uncaught TypeError: Chart is not a constructor. This I have no idea how to try and fix.

Any help is appreciated.

Thanks,

Eric

trading-peter commented 8 years ago

Hi,

your first issue is related to #53. The guys at Chart.js decided to drop bower support and the pre-build dist folder with version 2.2.0. The latest version of chart-elements (v3.1.1) has a tmp fix for that by forcing the use of Chart.js v2.1.6 in bower.json. That's the last version that comes with the dist folder. Can you use the older Chart.js version and see if that resolves your issues?

esd100 commented 8 years ago

Do you mind telling me exactly what I should do? I'm kind of a noob.

  1. I imagine that I could change the dependency in the chart-element/bower.json file, but I'm not very familiar with the versioning syntax.
  2. I imagine I can run bower update then, but I would like to only update chart-element and chart.js folders. Should I just delete those folders from my bower_components folder? What command should I run to accomplish my specific goal?

Thanks

trading-peter commented 8 years ago

I wouldn't recommend changing chart-element/bower.json because it will be overwritten the next time you run bower update. I assume your web app has it's own bower.json?

esd100 commented 8 years ago

yes, you are correct. If I should change that, 1) Would you mind telling me what specific block of code I should put in?

trading-peter commented 8 years ago

Can you please post the contents of your bower.json file?

esd100 commented 8 years ago

sure. Would you mind telling me if there is a special way to display the contents or if I should just copy/paste it directly into the write field textbox?

trading-peter commented 8 years ago

Github supports markdown in the comments. Please refer to this article. https://guides.github.com/features/mastering-markdown/

esd100 commented 8 years ago

Thanks. I'm not sure if this will work, but here goes nothing...

{
  "name": "polymer-starter-kit",
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#^1.6.0",
    "app-elements": "PolymerElements/app-elements#^0.9.0",
    "iron-elements": "PolymerElements/iron-elements#^1.0.10",
    "paper-elements": "PolymerElements/paper-elements#^1.0.7",
    "gold-elements": "PolymerElements/gold-elements#^1.0.1",
    "neon-elements": "PolymerElements/neon-elements#^1.0.0",
    "platinum-elements": "PolymerElements/platinum-elements#^1.1.0",
    "google-web-components": "GoogleWebComponents/google-web-components#^1.1.0",
    "page": "visionmedia/page.js#~1.6.4",
    "vaadin-core-elements": "vaadin-core-elements#^1.0.0",
    "chart-elements": "robdodson/chart-elements#^3.1.0",
    "polymer-fire": "firebase/polymerfire#^0.9.4",
    "sign-here": "^0.0.1",
    "paper-date-picker": "polymer-paper-date-picker#^1.1.4",
    "paper-time-picker": "^1.1.2",
    "paper-datatable": "^0.9.8"
  },
  "devDependencies": {
    "web-component-tester": "^4.0.0"
  },
  "ignore": [],
  "resolutions": {
    "firebase": "^3.0"
  }
}
trading-peter commented 8 years ago

Ah ok, bower probably download version 3.1.0. Just run bower update. That version doesn't include the fix for Chart.js I mentioned earlier. After that check again if the dist folder is present under bower_components/Chart.js.

Side note: robdodson/chart-elements#^3.1.0 is a version range syntax of semver. That the technical name for the version strings. More knowledge here: http://ricostacruz.com/cheatsheets/semver.html

esd100 commented 8 years ago

The reason I asked about specifically only changing chart-elements is because I have made a few small changes to the bower-components in my project.

Will running bower update change those files? Is there a way that I can run it so that it only updates on chart-elements?

trading-peter commented 8 years ago

I would strongly advice against modifying stuff in the bower_components. The fact that you're now scared that your package manager could override changes shows that your dev workflow is flawed. I would recommend you make forks of the projects you need to modify and then install them with bower. If you would fork chart-elements you can then install it with bower like bower install --save esd100/chart-elements.

esd100 commented 8 years ago

Thanks for pointing that out. I will definitely modify my workflow in the future.

This is my first attempt at "web programming" and I'm definitely not making a career out of it (I'm actually a physician) just FYI. I'm doing a quality improvement project for my department and I thought it would be a fun, educational project for me.

That being said, I was having a lot of trouble with one of the projects, specifically "sign-here": "^0.0.1", that I included and the author of that project wasn't very interested in making changes or helping me figure out how to make it work. As you can see, it is the 1st version of the project. So, I essentially hacked the program and got it to work.

I'm frankly not familiar with the whole forking projects approach, although it sounds like what you're saying is that it is better. If I were to fork a project, how would I go about downloading the forked project into my projects, as a bower dependency.

trading-peter commented 8 years ago

To create a fork, browse to the github project you want to modify and click the fork button in the top right. This creates a copy (that's basically all a fork is) of the project under your github account. Then install your fork with bower like bower install --save esd100/the-project-you-forked. As you can see, your github user name is in the install command. This tells bower to install the project from your account instead of the author's.

esd100 commented 8 years ago

That sounds better than the approach I was taking.

Thanks!