search

publiclab / simple-data-grapher

Turns CSVs into graphs in a few simple steps; embeds onto other websites!
https://publiclab.github.io/simple-data-grapher/
GNU General Public License v3.0
38 stars 52 forks source link

Browsable Time Slider #22

Open IshaGupta18 opened 5 years ago

IshaGupta18 commented 5 years ago

I was trying to make the browsable time slider using https://github.com/schme16/Chart.js-RangeSlider .

But when I included the script file https://gitcdn.link/cdn/schme16/Chart.js-RangeSlider/677a7eb6c295772606d300697eaf552245e7f171/dist/RangeSlider-all.min.js, it seems to be interfering with the bootstrap's JS file and shows an error like

image

What could be the reason that the scripts are interfering with each other? Is there a way to fix it, because I tried but couldn't, we can keep trying or any other suggestions for time sliders? @jywarren @namangupta01 Thank You!

IshaGupta18 commented 5 years ago

Okay, so I updated the code and found out that I was accidentally plotting the sample data instead of the complete data. Apologies for that. The graphs will now look more cluttered like this: image

So we will need to think some stuff through. The requirement for a range slider becomes an absolute necessity now and we will have to refine the graph UI for best results. Kindly give your views on it. Thank you!

namangupta01 commented 5 years ago

I think if that is occurring with the bootstrap, we can't fix it. In that case, it would be better to use something else than bootstrap?

namangupta01 commented 5 years ago

But as I see the error is not due to Bootstrap. This would work super.

IshaGupta18 commented 5 years ago

But that would break the consistency of the sites we have at PL, all use bootstrap, can we think of an alternative for the range slider?

On Sun, May 19, 2019, 9:11 PM Naman Gupta notifications@github.com wrote:

I think if that is occurring with the bootstrap, we can't fix it. In that case, it would be better to use something else than bootstrap?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/simple-data-grapher/issues/22?email_source=notifications&email_token=AJXHQZ3V26ELRLW6MK2KIFDPWFYK5A5CNFSM4HNTDECKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVXEX4Y#issuecomment-493767667, or mute the thread https://github.com/notifications/unsubscribe-auth/AJXHQZ5YRDGKGLJUICKYCYLPWFYK5ANCNFSM4HNTDECA .

IshaGupta18 commented 5 years ago

So what is causing this error? Because it's causing a conflict.

On Sun, May 19, 2019, 9:12 PM Naman Gupta notifications@github.com wrote:

But as I see the error is not due to Bootstrap. This would work super.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/simple-data-grapher/issues/22?email_source=notifications&email_token=AJXHQZ7UU6TRGJDXQTNXP2DPWFYNTA5CNFSM4HNTDECKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVXEYMY#issuecomment-493767731, or mute the thread https://github.com/notifications/unsubscribe-auth/AJXHQZYWNAM7EOWQOHLSJETPWFYNTANCNFSM4HNTDECA .

namangupta01 commented 5 years ago

We are making this library standalone which means it would be used by the public lab as well as any other users also. So it would be better if we give them the freedom whether they want to use or not. We should give a default design and if the user of this library wants to improve the css he can do so.

namangupta01 commented 5 years ago

Don't think of only using this for PublicLab anyone should be able to use it on their website. Right? What do you think?

IshaGupta18 commented 5 years ago

Yes agreed! That would be great, although we still will be needing bootstrap here for some of the designing, it's a good asset to give up. Let's figure out why this error is being caused

On Sun, May 19, 2019, 9:18 PM Naman Gupta notifications@github.com wrote:

Don't think of only using this for PublicLab anyone should be able to use it on their website. Right? What do you think?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/simple-data-grapher/issues/22?email_source=notifications&email_token=AJXHQZ2USY4WEGKKANSN273PWFZDPA5CNFSM4HNTDECKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVXE3XQ#issuecomment-493768158, or mute the thread https://github.com/notifications/unsubscribe-auth/AJXHQZYMGKKHB6S5SC5FYUTPWFZDPANCNFSM4HNTDECA .

IshaGupta18 commented 5 years ago

@jywarren @namangupta01 what do you think might be causing the problem here?

IshaGupta18 commented 5 years ago

@gauravano @SidharthBansal @souravirus kindly help me out here a little!

grvsachdeva commented 5 years ago

@IshaGupta18 are you still facing this issue?

grvsachdeva commented 5 years ago

Also, can you please push the sample CSV file so that everyone can be on the same page format wise? Thanks!

grvsachdeva commented 5 years ago

I have to press upload every time to plot the graph so how about having an explicit button for that? Also, I wasn't able to test upload using the URL as I am getting CORS. I tried using - http://insight.dev.schoolwires.com/HelpAssets/C2Assets/C2Files/C2ImportCalEventSample.csv.

IshaGupta18 commented 5 years ago

Yes sure! Let me add the sample csv here. And yes this issue persists.

On Tue, May 21, 2019, 7:42 PM Gaurav Sachdeva notifications@github.com wrote:

I have to press upload every time to plot the graph so how about having an explicit button for that? Also, I wasn't able to test upload using the URL as I am getting CORS. I tried using - http://insight.dev.schoolwires.com/HelpAssets/C2Assets/C2Files/C2ImportCalEventSample.csv .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/simple-data-grapher/issues/22?email_source=notifications&email_token=AJXHQZ5P3WSKA6TCYE6J4TDPWP7N5A5CNFSM4HNTDECKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV4BKCA#issuecomment-494408968, or mute the thread https://github.com/notifications/unsubscribe-auth/AJXHQZ7TRKEQUR5NSZZQJQ3PWP7N5ANCNFSM4HNTDECA .

IshaGupta18 commented 5 years ago

hey, this file works for me! I think it didn't work for you because the latest changes and few bugs were fixed in the PRs I have raised. image

image

IshaGupta18 commented 5 years ago

@gauravano what do you think?

IshaGupta18 commented 5 years ago

Okay so I have fixed this carousel bug! yay! But here's the new one which is creating a problem

image

Here's the snippet of the code causing it:

image

So basically the range-slider is not getting initialized properly.

Although, I have written it very similar to the working fiddle here: http://jsfiddle.net/schme16/xfyvvup8/

What do you think is creating a problem? I'll push the code if you need it! I will really appreciate some help here! Thank you

cc: @Souravirus

Souravirus commented 5 years ago

Hi @IshaGupta18, can you send larger screenshots as these are not visible. I think that if you push the code somewhere or send it in a gist, that would be really great. Thank you!!

IshaGupta18 commented 5 years ago

Yes absolutely!

On Tue, May 28, 2019, 9:42 PM Sourav Sahoo notifications@github.com wrote:

Hi @IshaGupta18 https://github.com/IshaGupta18, can you send larger screenshots as these are not visible. I think that if you push the code somewhere or send it in a gist, that would be really great. Thank you!!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/simple-data-grapher/issues/22?email_source=notifications&email_token=AJXHQZ22GCVICCOSCUHQCATPXVKYRA5CNFSM4HNTDECKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWMUO3Y#issuecomment-496584559, or mute the thread https://github.com/notifications/unsubscribe-auth/AJXHQZY2CATWHSQODGB3LMTPXVKYRANCNFSM4HNTDECA .

IshaGupta18 commented 5 years ago

31 will help you with the code @Souravirus. Thanks a lot!