HandsOnDataViz / chartjs-bar

Bar chart with Chart.js (template)
https://handsondataviz.github.io/chartjs-bar/
2 stars 10 forks source link

README #1

Closed ilyankou closed 4 years ago

ilyankou commented 4 years ago

@JackDougherty Please review current readme and let me know if any changes are necessary. Once finalized, I will create other repositories.

JackDougherty commented 4 years ago

@ilyankou - Everything in the README looks perfect, except I'm still stuck on this section:

https://github.com/HandsOnDataViz/chartjs-bar#why-am-i-not-seeing-my-chart-when-i-open-indexhtml-in-the-browser

I'm glad you added it, and saw your recent GitHub exchange with a user about it, but here are two issues:

1) We probably should include our CORS workaround somewhere in the book, and point readers to that section, rather than rewriting it in every README (for chart.js, highcharts, leaflet...). If you agree, how about in Ch 9, right after the GitHub Desktop & Atom section?

2) More importantly, I cannot make our first CORS workaround recommendation work for me! So either I'm doing something wrong or the instructions are not clear or up-to-date. Here's what I've tried (and if you don't have an easy answer, we can discuss on video next week):

a) the Stackoverflow page seemed to recommend closing Chrome, and typing this into Mac OSX terminal: open -a Google\ Chrome --args --disable-web-security --user-data-dir

But no success. (I'll try this again in a moment...)

b) a variation above came from this site, https://alfilatov.com/posts/run-chrome-without-cors/, which recommended typing this into Mac OSX terminal to create a new Chrome window: open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

That definitely opened a new Chrome, with the disabled warning, but chart.js still would not load locally. See screenshot.

chrome-disabled-cors

c) I also tried an Allow CORS browser add-on for Firefox, but chart.js still would not local locally there. See screenshot.

firefox-disable-cors

ilyankou commented 4 years ago

@JackDougherty Thank you for investigating this!

  1. I think we should include this piece in README alongside the book as we want these repos to be as self-sufficient as possible (I understand the update issues, but once the text is finalized, it shouldn't matter).

  2. I also have troubles running the first command (although it did open Chrome, I cannot see a chart). The second command opened Chrome and I was able to see the chart by substituting d3 library to read csv with our new favorite PapaParse. I pushed the changes, so give it a try and let me know if it works for you.

I will add a link to the alfilatov' blog, but I think it is worth keeping the StackOverflow issue as there are a lot of comments and I am sure people will be able to find the solution. Also blogs tend to disappear after a while, and I have more trust in StackOverflow.

JackDougherty commented 4 years ago

Thanks for solving the problem by replacing D3 with PapaParse. Another reason to love that new library!

And I REALLY like alfilatov's blog solution, as I believe it's clearer than the Stackoverflow thread, and the clear warning at the top of the 2nd Chrome browser is perfect. See successful screenshot below. It also works with our Highcharts and Leaflet templates, though I have not tested every single one. (Unsure what's different about the D3 library...)

I agree with your thinking about making the repos self-sufficient. Please consider placing this blog post near the top, though I understand that browser development is always changing, and Stackoverflow will continue to offer new solutions to new issues that arise.

Also, I made a note to add a new section to the book, perhaps called Viewing Code in Your Local Browser, right after GitHub Desktop & Atom, and refer to https://alfilatov.com/posts/run-chrome-without-cors/ and also https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

chrome-disabled-success