I need to add a feature to my website that will fetch a price when a customer enters a number into the green "Miles" input box and clicks the blue "Get Price" button. On clicking this button the code will use the number entered into the input box to calculate a price using a formula. The price then needs to be displayed to the right of the blue button.
Unfortunately, the formula to work out the price is quite complicated. I know how the formula looks in excel but I have absolutely no experience in JS at all! Basically, for anything up to and including 50 miles, the price is £50, then, for every mile thereafter, 50p is added. In excel the formula looks like this:
Any assistance would be greatly appreciated. I really do know bugger all about JS!... the only thing I've managed to figure out so far is that the code needs to go here:
Here's your solution (try it on fiddle). This can be simplified but, since you're a JavaScript beginner, I tried to keep the code long and simple, rather than short and unclear.
export function getprice_click (e) {
let miles = document.getElementById("miles").value;
let price = 0;
if (miles <= 50) {
price = 50;
} else {
let remainingMiles = miles - 50;
price = 50;
price += 0.5 * remainingMiles;
}
document.getElementById("price").value = price;
}
Just to be clear, next time provide more informations about you problem, post code proposals and embed your code inside the post (without using images links).
Related
I'm beginner and try to use QCustopPlot.
I want to draw a real time chart.
I use this example code.
but I have so many questions:
1) how can I fixed yAxis to a specific int number (0 to 50)
2) how can I fixed xAxis? I mean I want to have a chart that in passing time, the plot moves. (not the xAxis or yAxis)
sory for my bad language.
It looks like these three links should help.
void QCPAxis::setRange ( double lower, double upper )
http://www.qcustomplot.com/documentation/classQCPAxis.html#a57d6ee9e9009fe88cb19db476ec70bca
void QCPAxis::moveRange ( double diff)
http://www.qcustomplot.com/documentation/classQCPAxis.html#a18f3a68f2b691af1fd34b6593c886630
QCPAxis Class Reference.
Manages a single axis inside a
QCustomPlot.
http://www.qcustomplot.com/documentation/classQCPAxis.html#details
Very similar functions exist in QWT, also.
the cpuplot example in QWT shows a scrolling realtime example. There isn't an online link that I can find for the examples, so you should download it and open the examples after you build it.
Hope that helps.
I have a case where there is an OK button on two windows. I want to click the OK button on the former window but using Sikuli I am unable to do it. I tried using Python script getting the nearest button using Y co-ordinates. But I guess its not working.
Find something that's in the window you're interested in but not in the other (e.g. part of the title), extend the matched area to contain the button you want but not the other one, then search for the button within that area.
A couple of options come to mind:
Restrict your search to a particular area of the screen either by pre-defining a region, (region.click(okButton1), or
you can try using sorted() to sort the y coordinates (if they appear left-and-right of each other) or x coordinates (if they appear above-and-below each other) of the two OK buttons, and then click on the one of interest like so--
#to find top-most OK Button
def byY(match):
return match.y
okButtons = list([x for x in findAll(OkButtonPic)]) #make a list of the OK Buttons
TopOkButton = sorted(okButtons, key=byY)[0] #sort them according to Y values
click(topOkButton)
#to find left-most OK button
def byX(match):
return match.x
okButtons = list([x for x in findAll(OkButtonPic)])
leftOkButton = sorted(okButtons, key=byX)[0]
click(leftOkButton)
If there is anything distinct that reliably appears near the OK button that you want to click, you can click(uniqueThing).targetOffset(pixelsX,pixelsY).
If the OK button you want to click is in a window that is now covered, there are other issues to deal with, making the window visible first, but that's not what it sounds like your question is really asking...
I want to create a stacked bar graph as in url below
(source: jpowered.com)
I want to make hyperlink for each of the red ,violet and blue boxes.The graph is possible with jfree chart but i don't know how to make each of the individual bars as URL so that a click on it can refresh the page.
Is it possible to do it with jfree chart?
Does Jquery plot help in this case to make each box url enabled ?Please suggest.
Using jfreechart, you can apply a CategoryURLGenerator to the plot using whichever of the two implementations better suits your needs. The approach is outlined here for the related PieURLGenerator. ChartFactory.createStackedBarChart() uses a StackedBarRenderer and allows PlotOrientation.HORIZONTAL.
Addendum: To generate URLs for individual items, you can examine the ChartEntity returned in a ChartMouseListener, as shown here.
I know that you can achieve something like this in jqPlot without much trouble.
The only think you need to remember, after you create your plot, is to bind your function to jqplotDataClick event. In your function you would need to map your clicks to a structure of urls. I have presented this in a sample example, where only the first series' bars take you to some websites. The sample is on jsfiddle --- it could be found here.
Effectively all comes down to this piece of code:
var urls = ["www.yahoo.com", "www.google.com", "www.java.com", "www.w3schools.com/js/js_obj_date.asp"];
$('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
if(seriesIndex === 0){
var url = urls[pointIndex];
window.open("http://"+url);
}
});
EDIT
I do not know an easy way, i.e. that wouldn't involve changing the script of jqPlot, of identifying the clicked bar by highlighting its background. Though I figured out a way to get a similar effect by coloring background of point labels which are on bars, the code would also need to be in the jqplotDataClicked, something like:
var prevClicked;
var prevBackgroundColor;
$('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
var str = ".jqplot-point-label.jqplot-series-"+seriesIndex+".jqplot-point-"+pointIndex;
$(str).each(function(){
if(prevClicked)
$(prevClicked).css('background-color', prevBackgroundColor);
prevClicked = this;
prevBackgroundColor = $(prevClicked).css('background-color');
$(prevClicked).css('background-color', 'red');
});
});
You just find the clicked point label using jQuery and apply your style, e.g. changing background color, remembering the previous label so you can remove its color to previous state on click on another bar. First I tried using addClass/removeClass functions but it didn't change a label's style, thus I had to use the css function instead.
I am new to Flot.
I want to show weekly visitors statistics in my projects.
I have to sho the visitors of the month but weekly on Flot.
e.g.
1st week 1-5 there are 500 visitors.
6-12 there are 900 visitors.
and so on.
And I want to show X coordinates as 1-5,6-12,13-19,....
Can anyone suggest what to do.
Strictly use Flot.
Check out the tickFormatter:
Alternatively, for ultimate control over how ticks look like you can
provide a function to "tickFormatter". The function is passed two
parameters, the tick value and an "axis" object with information, and
should return a string.
So what you're looking for is something like this:
$.plot(placeholder, data, {
//your options here
xaxis: {
tickFormatter: function(val,axis){
return (val+1).toString()+'-'+(val+5).toString();
}
}
});
I think you just want a plain old bar graph but are getting misled by the fact that you have some date-related data.
In the data you give Flot to graph, use fake numbers as x values that are just increasing integers. So for 1-5 put 0, for 6-12 put 1, and so on.
Then as Ryley says, use the tick formatter to put the labels on the x axis that you want.
See this as an example.
When making a line chart, Lets say its for business sales for different depts and horizontally is days and vertically is dollars. When you hover over a line it tells a dataTip tells you the sales for that dept. on that day. I want it to show all the depts at the same time, so say you hover over day 3, I want the dataTips for all depts on day 3 to display so you can compare the values for all the sales on the same day. I set the mouseSensitivity for the dataTips to display all the lines at once but I end up getting day 2 for one dept and day 3 for another which is not wanted. This is actually posted as a bug and explained better here: http://bugs.adobe.com/jira/browse/FLEXDMV-1853
I am wondering if anyone can come up with a work-around for this?
Thanks!
I ran into a similar problem to this recently and came up with a solution that also applies to your problem. I had a step LineChart and wanted to display a data tip when the user hovered anywhere on the line instead of just at defined data points.
You can read about the solution I wrote for that problem here: Flex: Customizing data tip location and behavior in a LineChart
You'll have to modify my solution slightly to fit your problem:
On line 47 you can remove the Math.abs(last.y - mouseLoc.y) < 50 check. This constrains the data tips to lines that are within 50 pixels vertically of the mouse.
I'm assuming that you're using the default segment line chart which just draws lines directly between data points. You'll need to modify the code that calculates the line value at a given x-coordinate to work with that chart type. I already find the closest data point to the left of the mouse with lines 33-41 and store it in last. Just get the next data point (which will be the one closest to the right of the mouse) and use something like this to get the value at the mouse:
var slope:Number = (nextPoint.y - last.y) / (nextPoint.x - last.x);
var lineYAtMouse:Number = (slope * (last.x - mouseLoc.x)) + last.y;
var lineValue:Array = line.localToData(new Point(mouseLoc.x, lineYAtMouse));
Then replace lines 69 through 72 with:
hitPoint.x = mouseLoc.x;
hitPoint.y = lineYAtMouse;
hitPoint.xValue = lineValue[0];
hitPoint.yValue = lineValue[1];
I haven't tested these modifications so there could be a bug or 2 but the general idea is there. I hope maybe this is still useful to someone. This question is getting pretty old. :)
Not an answer, but a poor alternative:
You could create your own DataTip renderer that [ahem] mapped the location of every point and drew the tip for each one there.
Basically, you would be duplicating a lot of the code inside the charting classes.
I have the same problem but working on column charts. Was thinking that I could enable the vertical gridLines using backgroundElements and then add a chart event listener for mouse over (which fires when mouse passes over a vertical gridline). Using the localX value, i could compare it to the closest datapoint, maybe.
Brian