I'm trying to use flot to graph data and have the time for data along the x axis. The graph works fine until I add time mode in the options. Everything I've seen says the problem is the time stamp but I've converted it to the Javascript time stamp. Here is the code I have.
var data = [[1272701100000,2.475],[1272701400000,2.475],[1272701700000,2.475],[1272702000000,2.7],[1272702300000,2.745],[1272702600000,2.7],[1272702900000,2.565],[1272703200000,2.475],[1272703500000,2.385],[1272703800000,2.52]];
var options = {xaxis: {
mode: "time"
}};
$.plot("#placeholder",[data]);
Works fine when you include the Flot time plugin: updated fiddle
Error was in the console:
Error: Time mode requires the flot.time plugin.
Related
I need to add a signature field on a form, that will be used on an iPad to sign documents.
I need a plugin that will allow multiple signature inputs on the same form.
I found this jQuery plugin "signfield" that works great...
https://github.com/cchantep/jquery.signfield
But it has one huge issue!
On desktop firefox, safari, etc, it works great.
On an iPad, it only allows you to draw one line at a time - if you raise your finger and then try to draw another line, the canvas clears!
That is fine if your signature can be drawn as one continuous line, but that is very unlikely!
On desktop safari it works with no problem - you can draw many lines. But on mobile safari it has this issue.
The issue happens with the demo, so it is an issue with the plugin, not with my implementation of it.
Help!!
For jSignature:
keep in mind I have modified the library a little so that I can print text on the canvas as well so it says what they are agreeing to (I have removed my custome code from the code below to show more of a raw example for the base library)
HTML:
<div id="signature"></div>
JS:
Initialize the signature:
$("#signature").jSignature({ color: "#000000", "decor-color": "#000000", lineWidth: 2);
Check that at least one stroke was performed
if ($("#signature").jSignature('getData', 'native', '', '').length === 0) {
// user has not signed
} else {
// user has signed
}
Get signature image base64 string:
model.getSignatureData = function () {
return $("#signature").jSignature("getData", "image");
}
Set observable for signature base64 value:
model.SignatureValue(model.getSignatureData()[1]);
Then I simply pass the signature value property in the JSON I post to my API
I'm currently trying to make a frequency analyzer using web technologies, especially Meteor.
For now, I tried to use the Google Charts library that create SVG pictures. The chart needs to be refreshed about 10 times by second and the performance aren't satisfying. It takes all the CPU resource.
I'm a bit new to web development (especially in graphical and performances issues) so if you could point into the right direction to make my research, I'd appreciate it.
I ended up using the library CanvasJs which appears to be one of the fastest. There is an option interactivityEnabled: false to disable interactions with the chart which increase performance.
Even if there is yet no direct Meteor integration, just put the js file in the ./client/compatibility and it works fine.
You could very easily accomplish this with ZingChart. We don't have a Meteor integration (yet), but the demo below should be a good start for you. Run the snippet below to see it live.
I'm on the ZingChart team! Let me know if you have questions.
var MAXVALUES = 100;
var myConfig = {
type: "line",
series : [
{
values : []
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
var myValues = [];
setInterval(function(){
myValues.push( Math.floor(Math.random() * 10 ) );
if(myValues.length == MAXVALUES+1){
myValues.shift();
}
console.log(myValues)
zingchart.exec('myChart', 'setseriesvalues', {
values : [myValues]
})
},60)
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>
Use the canvas element. You should be able to get 60 per second and if it's a audio source the Audio API provides a DSP for spectral analysis.
Here is an example audio spectrum visualizer
I'm creating a SAPUI5 prototype version of a system that currently exists in Silverlight.
Within the current Silverlight application we have a page which contains a Data Table, a bar chart and a Treemap which all display different representations of the same data.
In SAPUI5, I've replicated the Data Table and Bar Chart successfully, but I cannot get the Treemap to display, all I get is the Uncaught Type Error: Undefined is not a function error on the line where I try to create the Treemap.
var oModel = new sap.ui.model.odata.ODataModel(
"../../../services/PCPVCarlineModelYear.xsodata/",
false);
var treemapDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1, // must be 1 for x-axis. 2 for y-axis
name : 'Carline',
value : "{Carline}"
}],
measures : [ {
group : 1,
name : 'NumberOfVINs',
value : '{NumberOfVINs}'
}],
data : {
path : "/PCPVCarlineModelYear"
}
});
var oTreemap = new sap.viz.ui5.types.Treemap({
dataset : treemapDataset
});
oTreemap.setModel(oModel);
return oTreemap;
The Undefined is not a function error occurs on the var oTreemap = new sap.viz.ui5.Treemap({ line.
If I change the code from Treemap to Bar, then it displays a Bar chart correctly, just not the Treemap.
Also, with the index.html page, I have the following script block declared in order to load the correct libraries:
<script src="/sap/ui5/1/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui- libs="sap.ui.commons,sap.ui.table,sap.viz,sap.viz.ui5"
data-sap-ui-theme="sap_hcb"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport">
</script>
Can anyone suggest what I may be doing wrong?
Thanks very much,
Martyn.
Which version of SAPUI5 are you using?
Version 1.14 has the Treemap, 1.12 doesn't.
You could run the same test as here: Link
(click on "run with JS")
The example returns the code of the Treemap constructor - what does it return when you load your own copy/sap-ui-core.js of UI5?
Or alternatively, instead of loading UI5 from your own server, you could try loading it from Link (just like in my jsbin snippet)
Does the Treemap work then?
Regards
Andreas
Give a cross check with the case , in JavaScript the uppercase and lower case are treated differently.
I was facing the same problem the mistake was instead of sap.m.Page() i was writing
sap.m.page();
I've implemented this UX for ExtJs 4 (it generates an Excel file from an ExtJs 4 grid or store)
http://druckit.wordpress.com/2013/10/26/generate-an-excel-file-from-an-ext-js-4-grid/#comment-982
and it works perfectly in Chrome, however I keep getting this error " the data area passed to a system call is too small" in any version of IE
Here is the fragment of code that seems to be the problem, the full code is in the link above.
var el = Ext.DomHelper.append(gridEl, {
tag: "a",
download: title + "-" + Ext.Date.format(new Date(), 'Y-m-d Hi') + '.xls',
//download: 'descarga.xls',
href: location
});
el.click(); //this line seems to be causing the error
Ext.fly(el).destroy();
}
I know there is downlodify and other options (like server side generating) but they are not an option at this point for me.
Is there any chance I can make this UX work in IE?
Can anyone point me in the right direction ?
Thank you.
Using the listed method will not work well with IE because IE has a limit of 2083 characters. If you debug the code in this fiddle https://fiddle.sencha.com/#fiddle/17j you'll notice that the location variable is well over 5000 characters and also fails in IE. I'm assuming the issue is the same if you debug your code as well.
I am trying to draw road map with multiple waypoints.As per google API,you can use only 8 waypoint and for business development you can use only 23 waypoints but that is not enough to draw the accurate travel map.
I got one notable solution link here but did't works properly.
This solution has one issue for some point it wont't be able to draw the roadmap.
If you open my JSFiddle the you can see that there are a brach of way points:
like:-
var points = [[28.595161666666666, 77.31429666666666], [28.602561666666663, 77.31256166666667], [28.594639999999995, 77.30559166666667], [28.585825, 77.30017], [28.58475333333333, 77.30100333333333], [28.583985, 77.30347166666667], [28.584005, 77.30288], [28.584428333333335, 77.30269166666668], [28.584080000000004, 77.30304], [28.583235, 77.30358500000001], [28.584435, 77.30268333333333], [28.583306666666665, 77.30265666666666], [28.584278333333334, 77.30283833333333], [28.586365, 77.29805166666667], [28.583978333333334, 77.30177], [28.584324999999996, 77.30284166666667], [28.584238333333328, 77.30340666666666], [28.584101666666665, 77.30290666666666], [28.590111666666665, 77.30175666666668], [28.584323333333334, 77.30297333333333], [28.584215000000004, 77.30304666666666], [28.583788333333338, 77.30260666666666], [28.584193333333328, 77.303015], [28.583798333333334, 77.30157833333332], [28.584288333333333, 77.30296166666668], [28.583810000000003, 77.30295333333333], [28.583908333333337, 77.30201166666667], [28.58464333333333, 77.30217833333333], [28.584111666666665, 77.30134833333334], [28.587213333333338, 77.29757166666667], [28.58387, 77.29434666666666], [28.575966666666666, 77.28125833333334]]
These data set('points') return an error as status = ZERO_RESULTS
Now If you remove the last point ([28.575966666666666, 77.28125833333334]) from the points array then this will work properly and status will be OK.
Why am I getting ZERO_RESULTS instead of OK ? How can I skip those problematic points ?
Here is my JSFiddle :- http://jsfiddle.net/67tbw/28/
Finaly fixed it.Now it will work with any number of point and now status = ZERO_RESULTS will not be a problem.
The problem was for some points I was getting status=ZERO_RESULT.After that it stopped executing and due to that I was not getting the map.So to fix that problem I came with the solution of skipping the particular point whenever status is not equal to OK.Then proceed with the rest of the point. To do that i took two parameter one is for storing the last index and other is path. Because when I will not get OK status then I will not be able to get the lastIndx and path from the status so when ever i am getting the problem then it will go to the else part and there I did like this.
1. lastIndx = lastIndx+1 ,
2. gDirRequest(service, waypoints, userFunction,lastIndx , path)
*call the function again until the last point.In between if I got status is OK then I will store the path as current path and lastIndx as current index (lastIndx = s[1]).
check this JSFiddle: - http://jsfiddle.net/kousik/2pNKH/