I followed the tutorial: http://www.amcharts.com/tutorials/detecting-at-what-value-mouse-pointer-is/
But I don't get the right Value.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sensor Diagramms</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/themes/black.js" type="text/javascript"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
var valueAxis;
var chart;
var chartData = [];
var chartCursor;
var date;
loadCSV("MagnetField.txt");
AmCharts.ready(function(){
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.type = "serial";
chart.pathToImages = "amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "DD-MM-YYYY HH:NN:SS.QQQ";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.minPeriod = "fff";
categoryAxis.parseDates = true;
// CURSOR
chartCursor = new AmCharts.ChartCursor();
chartCursor.categoryBalloonDateFormat= "HH:NN:SS.QQQ";
chartCursor.valueLineEnabled = true;
chartCursor.bulletsEnabled = true;
chartCursor.bulletSize = 2;
chartCursor.oneBalloonOnly = true;
chartCursor.addListener("moved", handleMove);
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.usePeriod = "fff";
chartScrollbar.autoGridCount = true;
chartScrollbar.color = "#000000";
chart.addChartScrollbar(chartScrollbar);
// GRAPHS
var graph = new AmCharts.AmGraph();
graph.bullet = "round";
graph.title = "x-Axis";
graph.xField = "date";
graph.valueField = "xaxis";
graph.hideBulletsCount = 50;
graph.balloonText = "[[value]] uT";
graph.lineColor = "#b5030d";
chart.addGraph(graph);
var graph2 = new AmCharts.AmGraph();
graph2.bullet = "square";
graph2.title = "y-Axis";
graph2.xField = "date";
graph2.valueField = "xaxis";
graph2.hideBulletsCount = 50;
graph2.balloonText = "[[value]] uT";
graph2.lineColor = "#0352b5";
chart.addGraph(graph2);
var graph3 = new AmCharts.AmGraph();
graph3.bullet = "diamond";
graph3.title = "z-Axis";
graph3.xField = "date";
graph3.valueField = "zaxis";
graph3.hideBulletsCount = 50;
graph3.balloonText = "[[value]] uT";
graph3.lineColor = "#12B500";
chart.addGraph(graph3);
// value Axes
valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Magnetic Field"
valueAxis.unit = "uT";
chart.addValueAxis(valueAxis);
// Legend
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
legend.align = "center";
legend.valueText = "[[open]]";
chart.addLegend(legend);
chart.titles = [{"id": "Title-1", "size": 15, "text": "Magnetic Sensor"}];
chart.write("chartdiv");
})
function handleMove(event){
var xValue = AmCharts.roundTo(valueAxis.coordinateToValue(event.x - valueAxis.axisX), 2);
//var yValue = AmCharts.formatDate(valueAxis.axisX, "DD/MM/YYYY");
var yValue = event.x - valueAxis.axisX;
console.log("handleMove");
document.getElementById('values').innerHTML = "x:" + xValue + " "+ yValue;
}
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data) {
//replace UNIX new lines
data = data.replace (/\r\n/g, "\n");
//replace MAC new lines
data = data.replace (/\r/g, "\n");
//split into rows
var rows = data.split("\n");
// loop through all rows
for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
// column is array now
// first item is date
date = timeConverter(column[0]);
// second item is value of the second column
var value = column[1].substring(2, column[1].length);
var value2 = column[2].substring(2, column[2].length);
var value3 = column[3].substring(2, column[3].length);
// create object which contains all these items:
var dataObject = {
date: date,
xaxis: value,
yaxis: value2,
zaxis: value3,
Balloon: "Time: "+ date.substring(11,23)
};
// add object to chartData array
chartData.push(dataObject);
}
}
return chartData
}
function setPanSelect() {
if (document.getElementById("rb1").checked) {
chartCursor.pan = false;
chartCursor.zoomable = true;
} else {
chartCursor.pan = true;
}
chart.validateNow();
}
function timeConverter(UNIX_timestamp){
var test = UNIX_timestamp;
var a = new Date(test.substring(0,10)*1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = (a.getMonth() + 1) < 10 ? '0' + (a.getMonth() + 1) : (a.getMonth() + 1) ;
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes();
var sec = a.getSeconds() < 10 ? '0' + a.getSeconds() : a.getSeconds();
var msec = test.substring(10,13);
var time = date + "-" + month + "-" + year + " " + hour + ":" + min + ":" + sec + "." + msec;
return time;
}
</script>
</head>
<body>
<div align="center" id="chartdiv" style="margin:auto; width: 80%; height: 500px; background-color: #FFFFFF;" ></div>
<br>
<br>
<div id="values"></div>
</body>
</html>
xValue should be the actual Date on mouseover. But it goes from 1500 to -7188. How do I get the Date or the timestamp? Here is an example of the input data:
1408706279704,x:7.13958740234375,y:-64.31884765625,z:-15.41900634765625
1408706279738,x:7.1990966796875,y:-64.5599365234375,z:-14.51873779296875
1408706279741,x:7.07855224609375,y:-65.27862548828125,z:-13.2598876953125
1408706279760,x:6.95953369140625,y:-65.09857177734375,z:-13.49945068359375
1408706279780,x:6.95953369140625,y:-65.45867919921875,z:-12.4786376953125
1408706279800,x:6.5399169921875,y:-65.45867919921875,z:-12.1795654296875
1408706279821,x:5.7586669921875,y:-65.51971435546875,z:-12.5396728515625
1408706279841,x:6.05926513671875,y:-65.399169921875,z:-13.2598876953125
1408706279861,x:5.7586669921875,y:-65.75927734375,z:-13.13934326171875
1408706279881,x:5.51910400390625,y:-65.9393310546875,z:-12.77923583984375
1408706279902,x:4.91943359375,y:-66.23992919921875,z:-12.41912841796875
1408706279921,x:4.7393798828125,y:-66.53900146484375,z:-11.8194580078125
1408706279941,x:3.95965576171875,y:-66.9586181640625,z:-11.15875244140625
1408706279963,x:3.47900390625,y:-67.19970703125,z:-10.25848388671875
1408706279984,x:3.47900390625,y:-67.3797607421875,z:-9.478759765625
1408706280006,x:3.179931640625,y:-67.7398681640625,z:-8.5784912109375
1408706280024,x:2.9998779296875,y:-67.7398681640625,z:-7.7392578125
$("#chartdiv").mousemove(function () {
var categoryIndex = chart.categoryAxis.xToIndex(event.x));
});
see details here: https://hgminerva.wordpress.com/2014/12/28/how-to-get-the-x-axis-value-of-your-amchart-using-jquery-mousemove-event/
Related
I need to generate year calendar with week numbers which should look like this image:
However it is not trivial to get week numbers in each month so they wouldn't overlap or be missing. I am using weekCount() function from this SO question. And for displaying calendar I have written this code:
var year = parseInt($(this).text());
var months = {1:'leden',2:'únor',3:'březen',4:'duben',5:'květen',6:'červen',7:'červenec',8:'srpen',9:'září',10:'říjen',11:'listopad',12:'prosinec'};
var calendar = $('<div id="summary_search_form_menu"></div>');
calendar.offset({top:$(this).offset().top + $(this).height() + 10}).css({right: '0px'});
var cur_week = 0;
for (var i=1;i<=12;i++) {
var row = $('<div class="row"></div>');
row.append('<div class="month button dark-blue">'+months[i]+'</div>');
var week_count = weekCount(year, i);
for (var week=1;week<week_count;week++) {
cur_week++;
row.append('<div class="week button blue">'+cur_week+'</div>');
}
calendar.append(row);
}
$('body').append(calendar);
Any way how to display week numbers correctly ?
OK, I have finally solved this on my own. In case somebody would find it helpful, I post my final code which works as I needed.
function weekCount(year, month_number) {
var firstOfMonth = new Date(year, month_number-1, 1);
var lastOfMonth = new Date(year, month_number, 0);
var used = firstOfMonth.getDay() + lastOfMonth.getDate();
return Math.ceil( used / 7);
}
Date.prototype.getWeekNumber = function(){
var d = new Date(+this);
d.setHours(0,0,0);
d.setDate(d.getDate()+4-(d.getDay()||7));
return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
};
var year = parseInt($(this).text());
var months = {1:'leden',2:'únor',3:'březen',4:'duben',5:'květen',6:'červen',7:'červenec',8:'srpen',9:'září',10:'říjen',11:'listopad',12:'prosinec'};
var calendar = $('<div id="summary_search_form_menu"></div>');
calendar.offset({top:$(this).offset().top + $(this).height() + 10}).css({right: '15px'});
var cur_week = 0;
var col1 = $('<div id="summary_search_form_menu_col1"></div>');
var col2 = $('<div id="summary_search_form_menu_col2"></div>');
calendar.append(col1);
calendar.append(col2);
var col2_table = $('<div id="summary_search_form_menu_col2_table"></div>');
col2.append(col2_table);
for (var i=1;i<=12;i++) {
var row = $('<div class="row"></div>');
col1.append('<div class="month button dark-blue">'+months[i]+'</div>');
var week_count = weekCount(year, i);
var d = new Date(year, i-1, 1, 0,0,0);
var first_week_in_month = d.getWeekNumber();
for (var week=(cur_week == first_week_in_month ? 2 : 1);week<=week_count;week++) {
cur_week++;
row.append('<div class="week button blue">'+cur_week+'</div>');
}
col2_table.append(row);
}
$('body').append(calendar);
I've a AmSerialChart with three AmGraph on whcih I've formatted the balloonText like this:
grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";
The problem with the category (x value) is that is also displayed in the balloonText with the following format: "MMM DD, YYYY". How can I display this date in another way?
I've checked dateFormats in the categoryaxis and dataDateFormat but that only changes the bottom value.
Here's the full code so far:
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var chartData = <% properties.get("jsonData") %>;
var chartTitles = <% properties.get("jsonTitles") %>;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
// chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "ss";
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
// categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];
var vAxis = new AmCharts.ValueAxis();
chart.addValueAxis(vAxis);
for (var i = 0; i < chartTitles.length; i++) {
var grp = new AmCharts.AmGraph();
grp.valueField = "d"+i;
grp.title = chartTitles[i];
grp.type = "line";
grp.valueAxis = vAxis; // indicate which axis should be used
grp.lineThickness = 1;
grp.bullet = "round";
grp.labelPosition = "right";
grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";
grp.balloonText = "[[value]], [[description]], [[percents]], [[open]], [[total]], [[category]]";
grp.showBalloon = true;
grp.bulletSize = 1;
grp.bulletBorderThickness = 6;
grp.dashLengthField = "dashLength";
chart.addGraph(grp);
}
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 180;
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width: 100%; height: 360px;"></div>
Good questions, which helped me to find out that I have a missing property in the docs. In case you don't use ChartCursor, you should use chart.balloonDateFormat property to format the date.
I'm a university masters degree student in Computer Graphics, I'm having difficulty using three.js to access the image data(pixels) of a texture created with a EffectComposer.
The first composer (composer) is using a line detection shader to find road lines in a lane, and put the result in a renderTarget (rt_Binary). My second composer (fcomposer2) uses a shader that paints an area green if is within a certain space.
The plan was to render the composer first and after analysing the rt_Binary image i could determine the limits.
I found some functions that allow me to get the imagedata (getImageData(image) and getPixel(imagedata, x, y)) but they only work on these occasions:
// before image
var imagedata = getImageData(videoTexture.image);
// processed image
var imagedata2 = getImageData(renderer.domElement);
If a put the first composer to render to screen, i get the correct values for the limits, but when i put the second composer, i get the wrong values for the limits.
Is there any way to get the imageData from a renderTarget? is so, how?
Edit1:
Here's the code for script that i use for the html:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Tests WebGL</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="three.js/build/three.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/EffectComposer.js"></script>
<script src="js/MaskPass.js" ></script>
<script src="js/RenderPass.js" ></script>
<script src="js/ShaderPass.js"></script>
<script src="js/stats.min.js" ></script>
<!-- Shaders -->
<script src="js/shaders/KernelShader.js" ></script>
<script src="js/shaders/SimpleShader.js"></script>
<script src="js/shaders/MyShader.js"></script>
<script src="js/shaders/BinaryShader.js"></script>
<script type="text/javascript">
var scene, fscene, sceneF;
var camera;
var renderer, rt_Binary;
var composer;
var stats;
var fmaterial;
var videoTexture;
var videoWidth = 480;
var videoHeight = 270;
var rendererWidth = videoWidth;
var rendererHeight = videoHeight;
var x_max = 345;//videoWidth*0.72; //
var x_min = 120;//videoWidth*0.25; //
var y_max = 189;//videoHeight*0.7 ;
var y_min = 148;//videoHeight*0.55;
// var ml=0.0, mr=0.0, mm=0.0;
// var bl=0.0, br=0.0, bm=0.0;
var yMaxL = 0, yMinL = 0, yMaxR = 0, yMinR = 0;
var xMaxL = 0, xMinL = 0, xMaxR = 0, xMinR = 0;
var frame = 0;
// init the scene
window.onload = function() {
renderer = new THREE.WebGLRenderer(
{
antialias: true, // to get smoother output
preserveDrawingBuffer: true // to allow screenshot
});
renderer.setClearColor(0xffffff, 1);
renderer.autoClear = false;
renderer.setSize(rendererWidth, rendererHeight);
document.getElementById('container').appendChild(renderer.domElement);
//add stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild(stats.domElement);
// create Main scene
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(35, rendererWidth / rendererHeight, 1, 10000);
camera.position.set(0, 1, 6);
scene.add(camera);
// define video element
video = document.createElement('video');
// video.src = 'GOPR0007.webm';
video.src = 'output.webm';
video.width = videoWidth;
video.height = videoHeight;
video.autoplay = true;
video.loop = true;
//create 3d object and apply video texture to it
var videoMesh = new THREE.Object3D();
scene.add(videoMesh);
videoTexture = new THREE.Texture(video);
var geom = new THREE.PlaneGeometry(1, 1);
material = new THREE.MeshBasicMaterial({map: videoTexture});
var mesh = new THREE.Mesh(geom, material);
videoMesh.add(mesh);
var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
rt_Binary = new THREE.WebGLRenderTarget( videoWidth, videoHeight, renderTargetParameters );
// Composers
// composer = new THREE.EffectComposer(renderer, renderTarget2);
composer = new THREE.EffectComposer(renderer, rt_Binary );
composer.addPass(new THREE.RenderPass(scene, camera));
var simple = new SimpleShader.Class(videoWidth, videoHeight);
var simEffect = new THREE.ShaderPass(simple.shader);
composer.addPass(simEffect);
var ef = new BinaryShader.Class(videoWidth, videoHeight, 1.1, [-2,-2,-2,0,0,0,2,2,2]);
var effect = new THREE.ShaderPass(ef.shader);
composer.addPass(effect);
var copyPass = new THREE.ShaderPass(THREE.CopyShader);
// copyPass.renderToScreen = true;
composer.addPass(copyPass);
//New scene
sceneF = new THREE.Scene();
sceneF.add(camera);
var videoMesh2 = new THREE.Object3D();
sceneF.add(videoMesh2);
var geomF = new THREE.PlaneGeometry(1, 1);
var materialF = new THREE.MeshBasicMaterial({map: videoTexture});
var meshF = new THREE.Mesh(geomF, materialF);
sceneF.add(meshF);
fcomposer2 = new THREE.EffectComposer(renderer );
fcomposer2.addPass(new THREE.RenderPass(sceneF, camera));
fcomposer2.addPass(simEffect);
var ef1 = new MyShader.Class(videoWidth, videoHeight, [yMaxL,yMinL,xMaxL,xMinL,yMaxR,yMinR,xMaxR,xMinR], videoTexture);
var effect1 = new THREE.ShaderPass(ef1.shader);
fcomposer2.addPass(effect1);
var copyPass2 = new THREE.ShaderPass(THREE.CopyShader);
copyPass2.renderToScreen = true;
fcomposer2.addPass(copyPass2);
animate();
}
// animation loop
function animate() {
// loop on request animation loop
// - it has to be at the begining of the function
requestAnimationFrame(animate);
// do the render
render();
stats.update();
if ((frame % 50) == 0) {
console.log("frame ", frame, " ");
console.log("yMaxL: ", yMaxL, " ");
console.log("yMinL: ", yMinL, " ");
console.log("xMaxL: ", xMaxL, " ");
console.log("xMinL: ", xMinL, " ");
console.log("yMaxR: ", yMaxR, " ");
console.log("yMinR: ", yMinR, " ");
console.log("xMaxR: ", xMaxR, " ");
console.log("xMinR: ", xMinR, " ");
manipulatePixels();
}
frame = frame + 1;
yMaxL = 0, yMinL = 0, yMaxR = 0, yMinR = 0;
xMaxL = 0, xMinL = 0, xMaxR = 0, xMinR = 0;
}
// render the scene
function render() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
videoTexture.needsUpdate = true;
}
// actually render the scene
renderer.clear();
composer.render();
var left_x = new Array();
var left_y = new Array();
var l = 0;
var right_x = new Array();
var right_y = new Array();
var r = 0;
if (frame == 200) {
var imagedata2 = getImageData(renderer.domElement);
var middle = imagedata2.width / 2;
for (var x=x_min; x < x_max; x=x+1) {
for (var y=y_min; y < y_max; y=y+1) {
var pixel = getPixel(imagedata2, x, y);
if (pixel.g > 0)
{
//console.log(pixel);
if (x < middle) {
left_x[l] = x;
left_y[l] = y;
l++;
}
else {
right_x[r] = x;
right_y[r] = y;
r++;
}
}
}
}
lineEquation(left_x, left_y, right_x, right_y);
}
fcomposer2.render();
}
function lineEquation(left_x,left_y,right_x,right_y) {
var newYMAX = left_y[0];
var newYMIN = left_y[0];
var maximosL = new Array();
var minimosL = new Array();
//left
for (var i=1; i < left_y.length; i++) {
if (left_y[i]>newYMAX) newYMAX = left_y[i];
else {
if (left_y[i]<newYMIN) newYMIN = left_y[i];
}
}
yMaxL = newYMAX;
yMinL = newYMIN;
// yMaxL = ymaxL/videoHeight;
// yMinL = yminL/videoHeight;
var pmin=0, pmax=0;
for (var i=0; i < left_y.length; i++) {
if (left_y[i] === newYMAX) {
// console.log(left_y[i]);
// console.log(left_x[i]);
maximosL[pmax] = left_x[i];
pmax++;
}
}
for (var j=0; j < left_y.length; j++) {
if (left_y[j] === newYMIN) {
// console.log(left_y[j]);
// console.log(left_x[j]);
minimosL[pmin] = left_x[j];
pmin++;
}
}
// console.log(maximosL);
// console.log(minimosL);
var sumMAX = 0, sumMIN = 0;
for (var i=0; i< maximosL.length; i++) {
sumMAX = sumMAX + maximosL[i];
}
for (var j=0; j< minimosL.length; j++) {
sumMIN = sumMIN + minimosL[j];
}
xMaxL = sumMAX/maximosL.length;
xMinL = sumMIN/minimosL.length;
// xMaxL /= videoWidth;
// xMinL /= videoWidth;
//right
var maximosR = new Array();
var minimosR = new Array();
newYMAX = right_y[0];
newYMIN = right_y[0];
pmin=0; pmax=0;
for (var i=0; i < right_y.length; i++) {
if (right_y[i]> newYMAX) newYMAX = right_y[i];
else {
if (right_y[i]< newYMIN) newYMIN = right_y[i];
}
}
yMaxR = newYMAX;
yMinR = newYMIN;
// yMaxR = ymaxR/videoHeight;
// yMinR = yminR/videoHeight;
for (var i=0; i < right_y.length; i++) {
if (right_y[i] === newYMAX)
{maximosR[pmax] = right_x[i]; pmax++;}
if (right_y[i] === newYMIN)
{minimosR[pmin] = right_x[i]; pmin++;}
}
// console.log(maximosR);
// console.log(minimosR);
xMaxR=0;
for (var i=0; i< maximosR.length; i++) {
xMaxR += maximosR[i];
}
xMinR=0;
for (var i=0; i< minimosR.length; i++) {
xMinR += minimosR[i];
}
// console.log(xMaxR);
// console.log(xMinR);
xMaxR /= maximosR.length;
xMinR /= minimosR.length;
// console.log(xMaxR);
// console.log(xMinR);
// xMinR /= videoWidth;
// xMaxR /= videoWidth;
}
function manipulatePixels() {
// imagem antes
var imagedata = getImageData(videoTexture.image);
// imagem processada
var imagedata2 = getImageData(renderer.domElement);
// console.log(getPixel(imagedata, 480 - 1, 270 - 1));
// console.log(getPixel(imagedata2, 480 - 1, 270 - 1));
}
function getImageData(image) {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
return context.getImageData(0, 0, image.width, image.height);
}
function getPixel(imagedata, x, y) {
var position = (x + imagedata.width * y) * 4, data = imagedata.data;
return {r: data[ position ], g: data[ position + 1 ], b: data[ position + 2 ], a: data[ position + 3 ]};
}
function findLineByLeastSquares(values_x, values_y) {
var sum_x = 0;
var sum_y = 0;
var sum_xy = 0;
var sum_xx = 0;
/*
* We'll use those variables for faster read/write access.
*/
var x = 0;
var y = 0;
var values_length = values_x.length;
if (values_length != values_y.length) {
throw new Error('The parameters values_x and values_y need to have same size!');
}
/*
* Nothing to do.
*/
if (values_length === 0) {
return [ [], [] ];
}
/*
* Calculate the sum for each of the parts necessary.
*/
for (var v = 0; v < values_length; v++) {
x = values_x[v];
y = values_y[v];
sum_x += x;
sum_y += y;
sum_xx += (x*x);
sum_xy += (x*y);
}
console.log (sum_x);
console.log(sum_y);
console.log(sum_xx);
console.log(sum_xy);
console.log(values_length);
/*
* Calculate m and b for the formular:
* y = x * m + b
*/
var m = (sum_x*sum_y - values_length*sum_xy) / (sum_x*sum_x - values_length*sum_xx);
var b = (sum_y - (m*sum_x))/values_length;
//console.log([m,b]);
return [m, b];
}
//resize method
/**window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
} */
</script>
Edit2 : Some images of what i'm trying to do: Image 1 shows the results from composer on the console, the limits i get from the lineEquation function are the correct ones for what i intend to do, but in Image 2 shows the results from fcomposer2 (fixed area) and on the console, the limits are the wrong ones.
![Image1]: http://prntscr.com/1ays73
![Image2]: http://prntscr.com/1ays0j
Edit3 :
By "access" i mean to be able to read the values of the pixels from the texture created by the binaryShader.
For example, in image1 the lines are painted in blue/green tone, I wanted to search the position of the pixels (x,y) in the image that the renderTarget would save. If i could find those pixels, i could adapt the green area in image2 to fit between the road lines.
This processing is need to make the green area overlap the current driving lane the user is currently on, if i can't get those points, i can't identify a lane.
I got it to work. Apparently i forgot to declare the fcomposer2 in the beginning of the script.
Thanks for the responses/comments, and sorry for the inconvenience.
I would use this code to display a given number of a graph, the number of such graph is variable each time will modifié.j 'I try to make a loop for the number of graph but I can not come me help
http://jsfiddle.net/amcharts/j9gUu/
my test
for (int i=1; i<4;i++)
{
var valueAxis[i] = new AmCharts.ValueAxis();
valueAxis[i].axisColor = "#FF6600";
valueAxis[i].axisThickness = 2;
valueAxis[i].gridAlpha = 0;
chart.addValueAxis(valueAxis[i]);
You can manipulate data from the server and assign them to the variables that I have hardcoded. Using this you can draw multiple line graphs.
chart = new AmCharts.AmSerialChart();
chart.categoryField = "date";// whatever your horizontal axis's value
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 45;
categoryAxis.autoGridCount = true;
categoryAxis.startOnAxis = true;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0.07;
valueAxis.autoGridCount = true;
valueAxis.title = "Some Title on Vertical Axis";
chart.addValueAxis(valueAxis);
//following values hardcoded. you can assign any values you want.
var j=0;
var chartData = [[{"date":"2013 Mar","company1":0,"company2":0},{"date":"2013 Apr","company1":0,"company2":271},{"date":"2013 May","company1":0,"company2":271},{"date":"2013 Jun","company1":0,"company2":284},{"date":"2013 Jul","company1":509.9,"company2":1568}];
var no_of_companies = 2;//put your value
var color_array = your color array;//should be an array
chart.dataProvider = chartData;
for(j=0;j<no_of_companies;j++){
var graph = new AmCharts.AmGraph();
graph.valueField = "company"+(j+1);
graph.balloonText = "[[category]]: [[value]]";
graph.type = "line";
graph.lineColor = color_array[j];
graph.lineThickness = 2;
chart.addGraph(graph);
}
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
chart.write("chartdiv");
hope this would help you.
Here am using amcharts API to draw the pie chart,it is working fine but according to my data there are more than 2000 criteria(more than 2000 partitions in the pie chart).. Displaying that many partitions is irrelevant.. So here i want to display only the top 10 partitions
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts: Javascript only strategy</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/amstock.js" type="text/javascript"></script>
<script type="text/javascript">
AmCharts.ready(function() {
loadJavascriptChartA("chartdivA", "language.txt");
});
// this method creates a javascript chart ploting data from external file
function loadJavascriptChartA(elementId, file) {
var chart = new AmCharts.AmPieChart();
// first we load the external data file
var data = loadFile(file);
// then we set a data provider to the chart
chart.dataProvider = createDataProvider(data);
legend = new AmCharts.AmLegend();
legend.align = "center";
legend.markerType = "circle";
chart.addTitle("Language Code/Tweets", 16);
chart.addLegend(legend);
chart.titleField = "language";
chart.valueField = "tweets";
chart.innerRadius = 10;
chart.labelRadius = 1;
chart.sequencedAnimation = true;
chart.labelText = "[[title]]: [[value]]";
chart.write(elementId);
// method which parses csv data
function createDataProvider(data){
var rows = data.split("\n");
// create array which will hold our data:
dataProvider = [];
var start = "Tue 19 Jun 2012 01:00:00 GMT+0530 (India Standard Time)";
var end = "Fri 19 Jun 2012 01:00:00 GMT+0530 (India Standard Time)";
start = start.split(" ");
end = end.split(" ");
var starttime = start[1].concat(" ",start[2]," ",start[3]);
var endtime = end[1].concat(" ",end[2]," ",end[3]);
var bool = false;
var startline = 0;
var endline = 0;
var counter = 0;
// loop through all rows
for (var i = 1; i < rows.length; i++){
if (rows[i]) {
// our columns are separated by a semicolon
var column = rows[i].split(",");
// column is array now
var date = column[0];
date = date.split(" ");
var day = date[0].concat(" ",date[1]," ",date[2]);
}
if(starttime.match(day) && bool!=true)
{
bool = true;
startline = i+1;
}
if(endtime.match(day)){
endline = i+1;
}
}
for (var j = startline-1; j < endline; j++){
// this line helps to skip empty rows
// our columns are separated by a semicolon
var column = rows[j].split(",");
// column is array now
var date = column[0];
date = date.split(" ");
var day = date[0].concat(" ",date[1]," ",date[2]);
var language = column[1];
var tweets = parseInt(column[2]);
// check if category already exists
var catExists = false;
for (var x = 0; x < dataProvider.length; x++) {
if (dataProvider[x].language == language) {
catExists = true;
dataProvider[x].tweets += tweets;
}
}
function sortDescending(data_A, data_B)
{
return (data_B.tweets - data_A.tweets);
}
var temp = dataProvider.sort(sortDescending);
if (!catExists) {
// create object which contains all these items:
var dataObject = {"language":language, "tweets":tweets};
if(counter < 5){
// add object to dataProvider array
temp.push(dataObject);
counter++;
}
}
}
return dataProvider;
}
}
// method which loads external data
function loadFile(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
// now lets load data into a new flash chart
var data = request.responseText;
//replace UNIX new line
data = data.replace (/\r\n/g, "\n");
//replace MAC new lines
data = data.replace (/\r/g, "\n");
return data;
}
</script>
</head>
</body>
<!--script type="text/javascript">
alert(document.getElementsByName('startDateField3.value'))
</script-->
Use array.sort().
function compareNumbers(a, b) {
return b - a;
}
numberArray.sort(compareNumbers);