Toggling between 2 graphs in HTML/Javascript - javascript

Hello I was wondering if there is a way I could toggle between 2 graphs(pyGal graphs) which I'm creating in python and passing through flask to the jinja template. I have a graph for weekly information and monthly information and I want (Not a button) but some sort of thing I could click to show only 1 at a time. I'd appreciate any input.

It depends a lot on how your webpage is designed. You have to think if the user will understand if you don't put a button or something that relates in an obvious way to that change.
Sometimes we design something that we think that is obvious but if the end user doesn't understand it, it's of no use.
If in your page you have more data showing information about week or month, maybe it's better to put a button that filters it by Month/Week. Just one tiny one :)
If you send a picture with the template I can try to give you some ideas.

Related

Creating breadcrumbs for table navigation VUEJS

I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!

Fully custom lightbox in dhtmlxGantt

Hi there,
I'm looking at using dhtmlxgantt as a way of building up an itinerary i.e. you add items at specific days throughout a period (most likely 2 weeks)... However, there are quite a few extra variables that I need to store along with the standard info of dates etc. There are a series of 4 dropdowns which populate the next one via AJAX.
I know I can add custom controls into the lightbox but these will not work via AJAX when the previous dropdown is changed. I was hoping that I'd be able to make a fully custom lightbox which then passes everything back to dhtmlxGantt but I can't seem to find away...
It looks like it's possible in the scheduler product (http://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) can we do the same with Gantt?
Thanks in advance,
Adam.
You can just redefine gantt.showLightbox method and show your form from there. And then use public API to save changes - gantt.addTask, gantt.updateTask, gantt.deleteTask
Here is a crude example:
http://docs.dhtmlx.com/gantt/snippet/5e134aa1

In PHP, how can you set a textbox value by clicking text on a page?

I have a page where users can vote for businesses by choosing a category and typing a business name. When they begin typing, the page predicts the business name in a span below the text box.
I want a user to be able to click one of these predicted names and have the name become the value of the text box for submitting. This will ensure consistently correct business names. Ideally, this will happen without having to submit a form or reload the page.
I've seen lots of mentions of jQuery and AJAX but I'd really rather just use PHP in possible. If I have to use a second programming language, let me know.
I apologize if this question isn't very detailed, but I'm new to PHP and still trying to poke around, and I'm picking up on work done by someone else. Also, I'm not looking for blocks of code as answers. If I know the functions I have to use, I should be able to get the rest myself. Thanks SO!
You need some form of JavaScript manipulation for this. It cant be done in PHP alone.

I know what I want, but I don't know how to do it! (chrome extension)

I've got something I want to make - it's a little script/code/app/extension or something similar which will perform a very specific task for me. I have no coding experience whatsoever and I've been going through the chrome basic developing guide for a week and don't feel I'm getting anywhere. I've got a very specific thing I want to do, and I don't want to waste time learning things that aren't necessary to achieving it. I'm not asking anyone here to do the work for me, I just need some pointers in the right direction as to what to learn. Without further ado! Here is what I want my program to do! (ta da!):
The primary function of the product is to refresh the booking page for a specific website, and when the date that I want to book becomes available, to select it in order to reserve it, and then notify me that the date has appeared. So! :
Refresh booking page periodically.
When a range of dates becomes available (e.g. any date between March 15th and April 15th), to select the earliest one (by highlighting it and then clicking on it, as you would with a mouse). Ideally I could select this range of dates from the icon next to the OmniBox.
A box will then appear asking if I'd like to 'continue' or 'cancel'. I want the script to hit continue for me, so my date is reserved.
I want to be notified when this happens, as the date is only reserved for 15 minutes and the page will time out if I don't proceed with the booking in that time. Receiving a text would be great, but this I imagine is too ambitious. So a notification (which I've sort of learnt how to do) would work.
What do you guys think? As I said I have no experience whatsoever with coding. Do you think it would be easier to do what I want to do some other way? i.e. not with a chrome extension but with an independent script or an app or something. I have no idea what I'm doing. As I said, I just would like some pointers in the right direction, not for anyone to do the dirty work for me.
Thanks for taking the time to read.
Best,
Andrew
There is already an extension that does something similiar.
Try out iMacros from Chrome
This extension will allow you to build a list of repeating tasks and rules. You should be able to come close to what you're wanting using this extension.

jQuery Mobile + knockout.js performance problems and problems with a function

First of all, my english skills fell apart during the last years so I hope I can explain my problems exactly.
Im trying to write a garbage calendar app with an alarm, notification and so on if it might be ready some time.
At first you have to choose the right address of your city and due to that I know in which district the user is living and with that information I know when his garbage is being collected.
Right now I have two problems and I really can't fix them.
The first one is when I chose my address I'm coming to the address site where the address is shown and I have two buttons. The first one is: "Wrong address?" and the second one is "show me the dates for this district".
When I'm clicking the second option with the dates I'm calling my function doSomething3(sorry for those names) but if I'm coming to the page where the dates should be shown there is nothing shown on this page.
I figured out when im setting the variable viewModel.bezirksnr in the javascript file and for example navigate from the homescreen to the dates of districts with opening the same function its actualy workin so i guess my function isn't completly wrong.
The second observation I made is when I'm setting the variable, then pushing the button in the homescreen for showing me the dates (is working ofc) and then I'm setting an address and then push the button from my address site to show me the dates then something like this appears:
Every single date of the first attempt(with the variable set before starting the app) is followed by all of the dates of the new chosen district.
The second problem is the performance problems. When I selected an address and maybe I miss clicked and want to select another its not working. The app is so laggy and doesn't react anymore.
Due to this and cause of the pic I uploaded I guess maybe I'm not clearing the arrays in a right way but I tried for example the removeAll() for observable arrays but there was no effect.
Here is my index.html including all those pages:
http://pastebin.com/Zci009cn
And here is my javascript file:
http://pastebin.com/PwBdkBa0
I put them into pastebin for not creating a massive wall of text ;)
I hopefully could explain everything in an understanding way and it would be awesome if anyone can help me! if you have any questions, feel free to ask

Categories

Resources