I am pretty new to this. I am using https://github.com/Wildhoney/ngDonut to create donut on my website. I am able to get it up and running now my next step is to make it clickable. Lets take this example http://ng-donut.herokuapp.com/
Suppose if I want to make it in a way when a user click on the donut partition the it becomes highlighted with corresponding row on the left hand side pane. I am not sure how to achieve it.
Can anyone throw some light on it?
Thanks in advance.
If you don't want to fork and modify the project they have https://github.com/Wildhoney/ngDonut#mouse-events
Using the click handler and the model object I imagine you can find the corresponding row and set a property on it that causes it to be highlighted (ng-class). For the pie itself to highlight you may be able to make use of the colours property mentioned in the README.md there.
If that doesn't work out would need to fork the project and take a look at where it's using those colours to draw the pie with D3 and have it modify them based on the last one that was clicked on.
Related
I am trying to create a line connection on click an image icon, I have tried the same using the wires.html example. But it is not working. I am using react with mxGraph. How to implement this. Is there any way to achieve this.
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
mxConnectionHandler.prototype.isStartEvent = function(me) {
console.log("Here we have to start the line connection");
};
})
);
I have to start the line connection inside the bind event. Is there anyway to fix this. I have tried but none of them is working.
I really need help.
In the image Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) is working properly. But need to implement Line Connection (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).
Please check the below URL for example
Demo URL: http://jithin.com/javascript/examples/contexticons.html
Source Code URL: https://jsfiddle.net/fs1ox2kt/
In the Demo URL, when click on a cell 4 icons will be displaying (Delete, Resize, Move, Connect). I have replaced Delete with Line Connection and Resize with Arrow Connection. Please have a look.
I am not sure I understand your question correctly, so I am answering to some possible ones:
I found the hello world example very helpful for understanding how to write code which allows to create and modify nodes and connections using mxGraph.
Your tags suggest that you are using React. Interestingly, you are not mentioning Redux-Saga as library. If you are not using it yet, you might want to have a look at the concept of reducers.
Your question might also be about the specific behavior of a mxGraph line connection:
when I click on the line connection hover icon it does not start from the cell.
When looking at the workflow example, I do not see any hover icon when I want to draw a line or connection from a task box to another. I remember vividly that it took me a while to figure out that you have to click on the source box, hold, and drag onto the target box.
If your question is more about hover icons, you have already another (unanswered) question on that: adding connection handler on click hover icon not working mxGraph
EDIT: I finally understood that the icons in your figure are the hover icons, so there is a 5th interpretation of your question:
Problem description: The user clicks on the orange box with the microchip-icon then some pop-up menu (your hover-icons) appear, and then the user should choose a line type by clicking on on of the items. The endpoint of the respective line should still be the task box the user selected initially.
Solution sketch: Already in the initial onClick-event, you should populate a variable final_vertex with the coordinates of the box with the micro-chip icon containing the coordinates of the click, or the respective vertex - your box. When drawing the chosen connection, you have to make sure to choose this final_vertex as end-point, and the box with the lambda-icon as initial vertex. In other words, you need at least two events - the initial onClick and an onHoverItemClick. I am not too familiar with mxGraph, but I assume you cannot solve the issue with a single event-handler.
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
I am trying to export the content of a div with jQuery but it has a jqplot graph inside of it.
When I try to re-render it, all the elements of the graph like the name and values appear, but not the bar charts. I am currently using:
$('#exportable').html();
Here is the thing, if I include the javascript that is used to execute the chart, it duplicates all the data and overlaps itself.
If I don't, the graph won't appear, just the values.
I would post the code but there really isn't much to look at. I've been trying to experiment and googling for the past few hours. Maybe I'm looking for the wrong thing. Anything would help.
Thanks a lot!
Instead of attempting to clone the chart, why not create another chart with the same data? See this for an example:
http://home.edgemontgeek.com/dev/stackoverflow/14727843/
Note that the "clone" button simply calls newPlot with the same data that was passed into the initial call, it doesn't attempt anything fancy, or look at the original contents of the plot.
I want to implement highcharts into my application.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick/
I want to remove the zoom controls (like 1m, 3m, 6m, YTD, 1y, All) from the chart and place them out of the container div. But i don't want those controls inside the chart. I want to place those controls at the top of the page.
Please can any one help me to solve this issue.
Thanks in advance
The short answer is that it is possible to do what you are looking. You will simply need to make use of the built-in functions of the API as one of the developers mentioned here:
http://highslide.com/forum/viewtopic.php?f=9&t=10915&p=49390&hilit=external+controls#p49463
Basically you make a chart w/out the actual controls and then create the necessary code to manipulate the content of the chart accordingly.
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.