I am attempting to create a fiddle which can allow me to change the graph through and input text showing below the graph. I am using jsxgraph library for that.
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Change_Equation_of_a_Graph#JavaScript_Part
Above is the example which is working when you change the function in the text shown graph also changes.
Same example I am trying with the fiddle. But it is not working.
https://jsfiddle.net/me55dw4h/30/
initial code:
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);
How do I make it work?
This is a jsfiddle-specific problem. If the declaration of the function doIt is changed to
doIt = function (){
//redefine function f according to the current text field value
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
//change the Y attribute of the graph to the new function
graph.Y = function(x){ return f(x); };
//update the graph
graph.updateCurve();
//update the whole board
board.update();
};
instead of
function doIt() {
...
}
then the example runs.
But let me emphasize that meanwhile JSXGraph comes with it's own parser JessieCode (see https://github.com/jsxgraph/JessieCode), which allows the input of common math syntax instead of JavaScript syntax. That means, instead of Math.sin(x) the user may just input sin(x). Additionally, there is the power operator ^, i.e. instead of Math.pow(x,2) it is possible to type x^2.
A minimal example using JessieCode for function plotting looks like this, see https://jsfiddle.net/eLs83cs6/
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
doPlot = function() {
var txtraw = document.getElementById('input').value, // Read user input
f = board.jc.snippet(txtraw, true, 'x', true), // Parse input with JessieCode
curve;
board.removeObject('f'); // Remove element with name f
curve = board.create('functiongraph', [f, -10, 10], {name:'f'});
};
doPlot();
Ann additional side effect is that the parsing of the math syntax with JessieCode prevents XSS attacks which would be easily possible if the users are allowed to supply arbitrary JavaScript code as input.
Related
I have a Qualtrics survey containing a few questions with custom JavaScript (to enable a slider with two slider knobs). I can a) copy the survey as well as b) export the survey as a .qsf file and re-import it. In both cases, I get a new, working survey.
However, importing the survey questions to an existing survey using the "Import Questions From..." function does not work; the JavaScript fails to work in this case. Is there a way to import these questions to an existing survey while preserving the JavaScript?
The code used in the first (most relevant) question:
Qualtrics.SurveyEngine.addOnload(function()
{
document.getElementById("QR~QID7").setAttribute("readonly", "readonly");
document.getElementById("QR~QID8").setAttribute("readonly", "readonly");
var surface;
var cnst = 4;
// Sets the sliders parameters and starting values
$("#research-slider").slider({ id: "research-slider", min: 0, max: 10, range: true, value: [0, 10]});
// variable to store in surface area when user has stopped sliding
var surface, currentResponse;
$("#research-slider").on("slideStop", function(slideEvt) {
surface = slideEvt.value;
document.getElementById("minimum").innerHTML = surface[0];
document.getElementById("maximum").innerHTML = surface[1];
document.getElementById("newValue").innerHTML = (surface[1]- surface[0])/cnst ;
document.getElementById("QR~QID7").value = surface[0];
document.getElementById("QR~QID8").value = surface[1];
});
$('NextButton').onclick = function (event) {
// and now run the event that the normal next button is supposed to do
Qualtrics.SurveyEngine.navClick(event, 'NextButton')
}
})
Your JavaScript won't work when imported because you are using fixed QID codes (QID7 and QID8). The solution is to write your code to find the correct elements by walking the DOM. The easiest way is to use prototypejs instead of native JavaScript.
Assuming the min (QID7) and max (QID8) follow immediately after the question your code is attached to, then it would be something like:
var qid = this.questionId;
var min = $(qid).next('.QuestionOuter').down('.InputText');
var max = $(qid).next('.QuestionOuter',1).down('.InputText');
min.setAttribute("readonly", "readonly");
max.setAttribute("readonly", "readonly");
var surface;
var cnst = 4;
// Sets the sliders parameters and starting values
$("#research-slider").slider({ id: "research-slider", min: 0, max: 10, range: true, value: [0, 10]});
// variable to store in surface area when user has stopped sliding
var surface, currentResponse;
$("#research-slider").on("slideStop", function(slideEvt) {
surface = slideEvt.value;
$("minimum").innerHTML = surface[0];
$("maximum").innerHTML = surface[1];
$("newValue").innerHTML = (surface[1]- surface[0])/cnst ;
min.value = surface[0];
max.value = surface[1];
});
I am trying to incorporate chroma.js into my leaflet map so that i can toggle between quantiles, equal interval, and k-means, but the second and third argument for the domain function does not change anything
var colorScale = chroma.scale('YlGnBu').domain(voterList, 3, 'quantiles');
Here is the full code for the function
this.getRegionItemColor = function(item) {
var regionData = Mapbook.getRegionData();
var voterList = Mapbook.getColorScheme();
var colorScale = chroma.scale('YlGnBu').domain(voterList, 3, 'quantiles');
if (!_.isUndefined(item)) {
var voters = item.voters,
minVoters = regionData.min_voters,
maxVoters = regionData.max_voters;
var alpha = colorScale(voters);
return alpha;
}
else {
return 0;
}
}
Does anyone know why changing the number of buckets or classification method does not change anything?
Strange... I looked into it and I do think there is a problem with the library. Let's consider a very simple and documented example.
If you look at the documentation on github, here is what is written (https://github.com/gka/chroma.js/wiki/Color-Scales):
// Calling .domain() with no arguments will return the current domain.
chroma.scale(['white', 'red']).domain([0, 100], 4).domain() // [0, 25, 50, 75, 100]
When I do the same, however, this returns [0,100] (and not [0, 25, 50, 75, 100]); as you said, the second argument has not changed anything. You may want to flag that behavior as a bug on the plugin github page. Unless someone has a good explanation?
I was having the same problem, then I realized that at the time I defined 'ColorScale', my domain was not yet populated. are you certain that 'voterList' had your dataset in it at the time you defined ColorScale?
Suppose, I have the following piece of code:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]]);
How can I change second point of axis?
Something like ax2.setSecondPoint([2,0])?
In general, how can I set property of any element?
Thank you.
Axis has two properties which names are self-explanatory: point1 and point2.
You can use setPosition method on any of them, e.g.
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0])
Now there is one catch: you will not see this change on the chart unless you set needsRegularUpdate property of the axis object to true. Finally, to refresh the chart you should execute fullUpdate() method on the board variable. The whole looks like this:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]],{needsRegularUpdate:true});
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0]);
brd2.fullUpdate();
References:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Point.html#setPosition
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Options (search for "special axis options")
Now to change properties like fixed, visible, etc. you should use setAttribute method (setProperty is deprecated). Example:
// Set property directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});
// Now make this point visible and fixed:
p.setAttribute({
fixed: true,
visible: true
});
Source:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html#setAttribute
Last but not least a simple formula:
a + b = c
where:
a = using JavaScript debugging tools in browsers to investigate object properties
b = checking documentation for products you use
c= success :)
i am trying to update a line graph and it is not throwing any error but it is also not updating the graph.
i am deleting a point and adding a new one with an incremented rate and incremented created_at date by a second(trying to follow http://bl.ocks.org/benjchristensen/1148374)
function redrawWithoutAnimation() {
for (var i in chart_data) {
linedata = chart_data[i];
//delete first element of array
linedata.points.reverse().shift();
//create a new point
rate = linedata.points[0].rate + 1;
created_at = linedata.points[0].created_at + 6000;
new_point = {};
new_point.rate = rate;
new_point.created_at = created_at;
linedata.points.push(new_point);
console.log(linedata);
}
// static update without animation
svg.selectAll("path")
.data([linedata.points]); // set the new data
line(linedata.points); // apply the new data values
}
redrawWithoutAnimation();
setInterval(function () {
redrawWithoutAnimation();
}, 8000);
here is my code
http://jsfiddle.net/yr2Nw/8/
Working fiddle: http://jsfiddle.net/reblace/GsaGb/1
There's a few issues here...
First, you were updating all the chart_data in the for loop, but outside the loop, you were only trying to update the line still stored in the linedata variable after loop execution. You should try to avoid having variables with greater scope than they need. It can lead to bugs like this one:
svg.selectAll("path").data([linedata.points]);
line(linedata.points);
You should instead use D3's data joining to rejoin the new data to all the paths at once declaratively like so:
linesGroup.selectAll("path")
.data(chart_data)
.attr("d", function(d){ return line(d.points); });
What that code's doing is it's selecting the paths and then joining each of them to the chart_data elements and then binding the appropriate line generator to the "d" attribute for the appropriate path.
Then, you need to update your x axis and y axis otherwise the plot will just shoot off the drawn area. This code is updating the domains and then rebinding the axes to the dom elements so they redraw:
xAxis.scale().domain([
d3.min(chart_data, function (c) { return d3.min(c.points, function (v) { return v.created_at; }); }),
d3.max(chart_data, function (c) { return d3.max(c.points, function (v) { return v.created_at; }); })
]);
yAxis.scale().domain([
0,
d3.max(chart_data, function (c) { return d3.max(c.points, function (v) { return v.rate; }); })
]);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
There were a few other bugs I fixed them in the Fiddle. For example, you need to calculate the time for the new point based on the last element in the array, not the first, otherwise the line can't interpolate properly since its no longer a continuous function... and this is a bit more concise way to do your line updates:
for (var i=0; i<chart_data.length; i++) {
linedata = chart_data[i];
//delete first element of array
var removedPoint = linedata.points.shift();
//create a new point
var lastpoint = linedata.points[linedata.points.length-1];
var new_point = {
rate: removedPoint.rate,
created_at: lastpoint.created_at + 6000
};
linedata.points.push(new_point);
}
Also note that you shouldn't use the for(var in) loop for Arrays, that's for iterating over the properties in an object.
There's still some issues, but I think this should help get you over the hurdle you were stuck on. Anyways, it looks cool in action!
Fine fenac.. You facing so many problems since your data is not in good format for your requirements..
as per http://bl.ocks.org/benjchristensen/1148374 The x-axis data must be (data[] (data array))
Your data is something like this
[objects,object,object] where each object holds one element of xaxis value.. so the pushing and shifting is not possible..
try to change the format of the data (linedata.points) to an array (data[]) and try it out sure it works..
You just need to put all the values in linedata.points into an array data[] and use this data[] to animate your line..
Since yours the multiline.. you need to create 2D array and must pass them accordingly...
Cheers..
I updated your jsfiddle
setInterval(function () {
console.log(linedata.points);
var v = linedata.points.shift(); // remove the first element of the array
linedata.points.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)
redrawWithoutAnimation();
}, 3000);
http://jsfiddle.net/yr2Nw/9/
But still it wont works till you do that work...
Personal Suggestion: First Try with single line graph then go with looping for multiline...
I am using JqPlot for charts , my problem is i want to load different data on different click events.
But once the chart is created and loaded with the data for the first time; i don't know then how to load data when another event fires that means i want to reuse the chart object and want to load/replot the data when events get fired something like...
chartObj.data = [graphData]
That seems to work to replot data.
chartObj.series[0].data = [[0, 4], [1, 7], [2, 3]];
chartObj.replot();
Also, you can check this: https://groups.google.com/group/jqplot-users/browse_thread/thread/59df82899617242b/77fe0972f88aef6d%3Fq%3D%2522Groups.%2BCom%2522%2377fe0972f88aef6d&ei=iGwTS6eaOpW8Qpmqic0O&sa=t&ct=res&cd=71&source=groups&usg=AFQjCNHotAa6Z5CIi_-BGTHr_k766ZXXLQ?hl=en, hope it helps.
Though this is an old question.
As the accepted Answer didn't work for me and i couldn't find a solution in the jqPlot docs either. I came to this solution
var series = [[1,2],[2,3]];
chartObj.replot({data:series});
Src: Taking a look at the replot function.
function (am) {
var an = am || {};
var ap = an.data || null;
var al = (an.clear === false) ? false : true;
var ao = an.resetAxes || false;
delete an.data;
delete an.clear;
delete an.resetAxes;
this.target.trigger("jqplotPreReplot");
if (al) {
this.destroy()
}
if (ap || !L.isEmptyObject(an)) {
this.reInitialize(ap, an)
} else {
this.quickInit()
} if (ao) {
this.resetAxesScale(ao, an.axes)
}
this.draw();
this.target.trigger("jqplotPostReplot")
}
The line
if (ap || !L.isEmptyObject(an)) {
this.reInitialize(ap, an)
}
shows us it needs a truthy value for ap to pass it as first parameter to the internal reinitialize function. which is defined as var ap = an.data || null;
Its as simple as this but unfortunately not documented anywhere i could find it
Note that if you want to redraw some things defined in your jqPlot options, like legend labels, you can just pass any option to the replot function. Just remember the actual series to replot has to be named "data"
var options = {
series : [{
label: 'Replotted Series',
linePattern: 'dashed'
}],
//^^^ The options for the plot
data : [[1,2],[2,3]]
//^^^ The actual series which should get reploted
}
chartObj.replot (options)
jqplot allows for a fast dynamic data update.
According to the documentation (data section), "Data should NOT be specified in the options object ..." (fiddle)
plot1.replot({data: [storedData]}); // data should not be passed this way
"... but be passed in as the second argument to the $.jqplot() function."
if (plot1) plot1.destroy();
plot1 = $.jqplot('chart1', [storedData]); // similar speed to replot
The fiddle shows this can be done with similar performance.
Empty graph div, before rendering the graph
$('#graphDiv').empty();
plot = $.jqplot('graphDiv', [graphValues], graphOptions);
The API has a replot/redraw method
Redraw This enables plot data and properties to be changed and then to
comletely clear the plot and redraw.