Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plotting Graphs using Chart.js #18

Merged
merged 9 commits into from
May 14, 2019

Conversation

IshaGupta18
Copy link
Collaborator

@IshaGupta18 IshaGupta18 commented May 10, 2019

Here is the basic implementation of graph plotting!
fixes #19
@namangupta01 @jywarren what do you think?
graph

@IshaGupta18 IshaGupta18 mentioned this pull request May 10, 2019
@namangupta01
Copy link
Member

This looks awesome!! Very well done. I just have one minor doubt, while selecting y-axis there should be some checking if that column can be selected because y-axis can only be number? or am I missing something?

@namangupta01
Copy link
Member

I think this is dependent on #15 ?

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented May 10, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented May 10, 2019 via email

@namangupta01
Copy link
Member

How is the graph when we select a column with not all number values? For example column 1 in the above gif. Can you share the gif how it will look?

@namangupta01
Copy link
Member

And also how it will look in multiple columns(column without numbers) on the y-axis. I think if it looks fine we can go with it. Can you share the gif?

@IshaGupta18
Copy link
Collaborator Author

With a non-numeric column, it would be empty, as expected:
image

@IshaGupta18
Copy link
Collaborator Author

With a mix of numeric and non-numeric, this is what it looks like:
image

@IshaGupta18
Copy link
Collaborator Author

Obviously, we will have to do some handling, but this is the basic functioning.

@namangupta01
Copy link
Member

Also, I think we can have a separate button for update graph, rather than updating using csv upload button after the graph like Update Graph.

@namangupta01
Copy link
Member

I think what you can do is that while processing and adding header you can check if that column is having not all numbers or not and then depending on that you put the checkbox? What do you say? It will solve our problem. Right?

@IshaGupta18
Copy link
Collaborator Author

Yes yes, that was just for a demo! Actually this is not how the page will look like. In the deisgn I have made, there are 3 tabs, 1 for upload, 2nd for column selection, 3rd for chart(s) display and export and other options

@namangupta01
Copy link
Member

Oh Okay, so are you doing that checking in this pr. I think it won't take much time doing this. But it is up to you.

@IshaGupta18
Copy link
Collaborator Author

I think what you can do is that while processing and adding header you can check if that column is having not all numbers or not and then depending on that you put the checkbox? What do you say? It will solve our problem. Right?

Yes we can do that I think. Let's discuss all the problems and handle them with the best solutions! Also, I ave posted some solutions for export options in #17 , where we have to do some operations on the collected data. So we can probably club these error handlings and those together to maximize the speed of processing. What do you think?

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented May 10, 2019

Also, we can actually think of a proper update button. For that, we'll have to properly think of the UI part. Like an update button on the 3rd tab that could take the user back to the 2nd tab to change the columns. Something like that?

@namangupta01
Copy link
Member

I think we can leave the exporting option for now and do later in the project.

@IshaGupta18
Copy link
Collaborator Author

Yeah sure! Would like to handle these cases by merging this and pulling the code?

@namangupta01
Copy link
Member

For now, we are not focuing on ui. Just simple button for updating graph?

@IshaGupta18
Copy link
Collaborator Author

Sure, we can do that too

@IshaGupta18
Copy link
Collaborator Author

Although, that might not be very important for now, but it can be implemented!

@namangupta01
Copy link
Member

And one suggestion, when you merge any pr, merge it using squash and merge. It will make one commit in the main branch.

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented May 10, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented May 11, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

Okay so I have handled the issue of showing the checkboxes against the valid columns only:
image

Is this good to go @namangupta01 ? Also, I have displayed the whole table but the checkboxes are against only the valid columns. Do you think I should show only the valid columns and the checkboxes, which would reduce the size of the 2nd table since, in the first table, all columns are bring shown anyways? What do you think/

@IshaGupta18
Copy link
Collaborator Author

I would also request @SidharthBansal @gauravano @Souravirus to have a look at the progress for the project in this repo! Thanks a lot!

@IshaGupta18
Copy link
Collaborator Author

Okay! So here is one more feature: Graphing menu with different graph types:
@jywarren @namangupta01 kindly give your views on it! Thanks a lot!

menu2

@SidharthBansal
Copy link
Member

Graphing menus are superb. Can we have colours introduced in it instead of grey colour always?
Superb Isha

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented May 13, 2019 via email

@jywarren
Copy link
Member

jywarren commented May 13, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

Thanks a lot! We will be designing the UI as per the designed proposed in my proposal. I hope the working is okay so that I can proceed with the design!

@IshaGupta18
Copy link
Collaborator Author

Okay so the color scheme has been designed!
image

@IshaGupta18
Copy link
Collaborator Author

@jywarren @namangupta01 what do you think of this?

@IshaGupta18
Copy link
Collaborator Author

And also I am working on the UI for this file now, so I think it would be better if we can merge this pretty big PR now. What do you say?

@jywarren
Copy link
Member

jywarren commented May 14, 2019 via email

@namangupta01
Copy link
Member

Nice work @IshaGupta18! Looks good to me. Let get this merge!

@namangupta01 namangupta01 merged commit 9d4588f into publiclab:main May 14, 2019
@SidharthBansal
Copy link
Member

SidharthBansal commented May 16, 2019 via email

IshaGupta18 added a commit that referenced this pull request Aug 10, 2019
* Project Setup  (#5)

* PublicLab Grapher Project Setup

* Added Jquery, Papaparse and chart.js dependencies in package.json (#7)

* Adding the parsing feature according to new project structure

* Added npm run script to watch changes and added browserify package for build (#10)

* Added Mocha testing framework and chai for assertion and added some sample test (#13)

* Plotting Graphs using Chart.js (#18)

* Sample data generation and table display

* emptying tables

* Plotting graph usingchart.js

* checking file type through drag and drop and displaying alert on invalid type

* removing inline function calling

* little refactoring

* showing checkboxes against valid columns only

* Adding graphing menu for different graph types

* adding colors to graph

* plotting the whole data

* Add files via upload

* Adding CSV string import function (#28)

* Adding CSV string import function

* small fix

* keeping up to date

* Added Multiple graphs Feature (#29)

* Basic Implementation of Class

* Add implementation of different table generation

* Added Multiple Menu For multiple graphs

* Multiple Chart Generation Completed

* Minor Changes

* Divided into Diiferent files

* Added Babel for transpiling es6 code and modularize code by movig classes to seperate files

* Minor Bug Removed

* Fixed Minor linting issues

* Added Patch for Multiple Graphs (#36)

Patch For Multiple Graph Bug

* Update issue templates

* Update issue templates

* Update issue templates

* Update issue templates

* Update issue templates

* Update README.md

* Update README.md

* Create CONTRIBUTING.md

* Create CODE_OF_CONDUCT.md (#46)

* Create PULL_REQUEST_TEMPLATE.md

* Update issue templates

* Adding ESlint (#37)

* Create Downloadable Spreadsheet using SheetJS (#43)

* Changes to src

* More changes

* remote url access

* trying to pass remote values

* SheetJS Complete

* Resolved Bugs

* All fixes!

* Removing and adding some CDNs (font awesome addition and Range slider deletion) (#52)

* Remove console.log's from View.js

* changed the style of the button in View.js (#54)

* [IMP] Added Tests, Refactored Code, Added Plotly.js and resolved some logical bugs (#59)

* Shifting parsing code from View.js ro CsvParser.js

* refactoring: adding return statements

* Testing with refactored code

* 1st test basic

* resolving constrcutor error

* Changing e=import and export syntax

* try

* Added Tests and corrected some code

* ChartJs class

* Plotly Class Added

* Documentation for View and Csvparser functions (#61)

* Added Installation Instruction (#62)

* Update README.md

* Gsheet (#63)

* sign-in Google

* attempt for google sheets

* dummy credentials

* ready to host on heroku

* dummy

* Update package.json

* Update package.json

* Update package.json

* Bump lodash from 4.17.11 to 4.17.15 (#67)

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.15.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.11...4.17.15)

Signed-off-by: dependabot[bot] <[email protected]>

* Update package.json

* Update package-lock.json

* Implementing CODAP export (#66)

* updating package.json

* heroku path

* .

* g sheet cred

* sheet Functions

* v1.0.4

* v1.0.5

* prev file use

* view ma

* latest V

* Add file Description option to save against file

* ids for popover fields

* v1.2.1

* assigned title and desc

* CODAP export

* CODAP DONE

* del creds

* UI testing

* v 1.3.2

* removing unused files

* Delete test.csv

* Delete uitest.js

* UI Tests  (#75)

* updating package.json

* heroku path

* .

* final tests1

* view changes
IshaGupta18 added a commit that referenced this pull request Aug 20, 2019
* Project Setup  (#5)

* PublicLab Grapher Project Setup

* Added Jquery, Papaparse and chart.js dependencies in package.json (#7)

* Adding the parsing feature according to new project structure

* Added npm run script to watch changes and added browserify package for build (#10)

* Added Mocha testing framework and chai for assertion and added some sample test (#13)

* Plotting Graphs using Chart.js (#18)

* Sample data generation and table display

* emptying tables

* Plotting graph usingchart.js

* checking file type through drag and drop and displaying alert on invalid type

* removing inline function calling

* little refactoring

* showing checkboxes against valid columns only

* Adding graphing menu for different graph types

* adding colors to graph

* plotting the whole data

* Add files via upload

* Adding CSV string import function (#28)

* Adding CSV string import function

* small fix

* keeping up to date

* Added Multiple graphs Feature (#29)

* Basic Implementation of Class

* Add implementation of different table generation

* Added Multiple Menu For multiple graphs

* Multiple Chart Generation Completed

* Minor Changes

* Divided into Diiferent files

* Added Babel for transpiling es6 code and modularize code by movig classes to seperate files

* Minor Bug Removed

* Fixed Minor linting issues

* Added Patch for Multiple Graphs (#36)

Patch For Multiple Graph Bug

* Update issue templates

* Update issue templates

* Update issue templates

* Update issue templates

* Update issue templates

* Update README.md

* Update README.md

* Create CONTRIBUTING.md

* Create CODE_OF_CONDUCT.md (#46)

* Create PULL_REQUEST_TEMPLATE.md

* Update issue templates

* Adding ESlint (#37)

* Create Downloadable Spreadsheet using SheetJS (#43)

* Changes to src

* More changes

* remote url access

* trying to pass remote values

* SheetJS Complete

* Resolved Bugs

* All fixes!

* Removing and adding some CDNs (font awesome addition and Range slider deletion) (#52)

* Remove console.log's from View.js

* changed the style of the button in View.js (#54)

* [IMP] Added Tests, Refactored Code, Added Plotly.js and resolved some logical bugs (#59)

* Shifting parsing code from View.js ro CsvParser.js

* refactoring: adding return statements

* Testing with refactored code

* 1st test basic

* resolving constrcutor error

* Changing e=import and export syntax

* try

* Added Tests and corrected some code

* ChartJs class

* Plotly Class Added

* Documentation for View and Csvparser functions (#61)

* Added Installation Instruction (#62)

* Update README.md

* Gsheet (#63)

* sign-in Google

* attempt for google sheets

* dummy credentials

* ready to host on heroku

* dummy

* Update package.json

* Update package.json

* Update package.json

* Bump lodash from 4.17.11 to 4.17.15 (#67)

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.15.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.11...4.17.15)

Signed-off-by: dependabot[bot] <[email protected]>

* Update package.json

* Update package-lock.json

* Implementing CODAP export (#66)

* updating package.json

* heroku path

* .

* g sheet cred

* sheet Functions

* v1.0.4

* v1.0.5

* prev file use

* view ma

* latest V

* Add file Description option to save against file

* ids for popover fields

* v1.2.1

* assigned title and desc

* CODAP export

* CODAP DONE

* del creds

* UI testing

* v 1.3.2

* removing unused files

* Delete test.csv

* Delete uitest.js

* UI Tests  (#75)

* updating package.json

* heroku path

* .

* final tests1

* view changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Graph Plotting
4 participants