I want to create this kind of graph on the basis of user entered data.
the main issue is regarding the display of boxes on the point.
Let me explain you a bit,background does contain a gradient image which resembles to the color of urine the patient want to mention.
Please suggest me something to create this graph.Whole data is need to be fetched dynamically.
If none of the many graphing tools out there can help you, you can think about this with plain old HTML :-)
Either a table or absolutely positioned DIVs. If you use a table, you can identify the cell and add a class to give that cell's border a red colour. You can do the same with DIVs. When you print the table cells or DIV to the page, you can identify them with 8-2-27 (unit-month-date) and your JSON data can match the corresponding cell/div and add a class.
Of course this is a bit more work than using an out of the box plugin. But it is possible. I have done a similar thing in the past. I found it easier to do everything on the server side and print the HTML (this was before jQuery had a plugin for everything).
gRaphael, JSChart, PlotKit, HighCharts are some common libraries used today to create chart in the client side. You need to provide JSON data and HTML Element only. Remaining task are not needed to be done by you. You can use JFreeChart to create a chart (image) on the server side and send it to the client side.
Related
I was hoping to somehow implement a 10x10 table onto my webpage where you select a cell and then store the X and Y value of the cell clicked but I'm really not sure on how to store the values, or to make the cell interactive.
My end goal is pretty much something like this: http://materdeimath.pbworks.com/f/GraphPaper20x20AxesUnits.bmp
Where I can store the X/Y values of the clicked cell, is this possible?
If any of you guys have any idea how I would accomplish this I would really appreciate the help, Thanks!
For me I would start with this way but there are other ways to get you started. Here are my steps:
Bootstrap responsive grid system here. Make each grid an individual id and class e.g. id="x1y1","x2y1","x3y1",class="col-interactive" something like chess grid if you familiar with that. The reason for a separate class is to identify from the common class used by plugins.
Using jQuery to get the class/name/id of the grid clicked. You may find reference here.
Finally using ajax to call your server side (e.g. PHP) and database (e.g. MySQL) validation. Reference here.
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
i am currently developing a website(related to fitness) client wants to make a feature, that will allow user to select a workout plan based on the choices you pick from a slider similar to the one on this example.
What i'm trying to figure out if this can be done with CSS or would I need to implement JavaScript / jQuery ?
Any help with this problem is appreciated. I just need a nudge in the right direction of where to start.
Edit: i have found jQuery-Smart-Wizard that partially does what i want would i be able to manipulate this to have choices and load a certain page depending on the choice made?
CSS is design-related, as in colors, sizes, and layout. If you want conditional navigation, and to parse form data, you'll need to use jQuery/JavaScript to manipulate client side (optional), and some sort of server-side language such as PHP to manipulate the data and information.
I need to load a very large text into a dialog box using YUI or jQuery and I'd like to know the best way to do it. I have an Oracle CLOB column which I need to show if the user needs to know what was stored there. Since CLOB data are huge, it is impossible to load everything. Any ideas?
Use multiple divs and load each one with what's left of your clob content when your user drops cursor in it : you can do this either using connection manager for YUI 2 or nodeList if you are using YUI3 (here's an example of how to use it)
Put it in a fixed-size DIV and add: overflow-y:auto.
I would like to display to user a table which contains ~500,000 rows.
The table should be calculated based on a file (i.e. the table is known at the beginning, and does not change).
I guess that building the HTML text of this table is not a good idea in terms of memory performance.
So how can I build such table ?
I would like user to be able to scroll the table using a vertical scroll bar. Is it possible to build on the fly only the visible part of the table ? I'm afraid to see delays because of this.
Is it a better idea to use server side programming rather than Javascript ?
I'm not restricted to any server side programming language, so any advise would be appreciated !
Send the first 250-ish rows to the user, as he scrolls down, perhaps past row 200, fetch the next 250 rows, append to the table and so on.
This is a (ui) design pattern known as "Infinite scroll".
Displaying 500,000 rows all at once to a user is a bad idea. Consider other options:
allow user to download file as CSV
show paginated (still not very useful)
provide filtering mechanisms (by date etc.) to allow the user to only see the data they need
If the users really needs to see all that data at once, then viewing it in the browser is one of the worst ways to do that - they should be using a tool made specifically for viewing data, like Tableau.
Classic example of where to use ajax.
Use javascript in combination with a server side script.
This really is a case for server-side pagination, I would say, maybe in combination with Ajax. A HTML table with 500.000 rows is going to crash a lot of browsers.
You're not specifying which server side technology you work with. If you update your question, I'm sure people will be able to give you some pointers.
Try this:
Clusterize.js
Tiny plugin to display large data sets easily
https://clusterize.js.org/
Is it possible to build on the fly only the visible part of the table ?
If you build a "fake" scroll (e.g. jquery slider) you can retrieve parts of the table instead of the whole.