Cannot plot 2 separate graphs using FlotJs - javascript

Im trying to plot 2 separate graphs (actually it will be 9 but for now there are only 2) using flotJS, somehow the data mixes and plots the same mixed data on both graphs
Here is my JS code:
var graphData1, graphData2, graphData3 = [];
var graphBuffer = 1000;
var xmin = 0;
var xmax = 5;
var options = {
xaxes: [
{position: 'bottom', autoScale: 'none', min: 0, max: 5}
],
yaxes: [
{position: 'left', autoScale: 'none', min: -1.5, max: 1.5}
],
zoom: {interactive: true},
pan: {interactive: true}
};
function deleteGraph() {
graphData1 = graphData2 = graphData3 = [];
$.plot("#graph1", [{graphData1}], options);
$.plot("#graph2", [{graphData2}], options);
//$.plot("#graph3", [{graphData3}], options);
}
function updateGraph(data) {
var datatmp = data.data;
// Formatea y Almacena datos a graficar
datatmp.forEach(function (sample) {
graphData1.push([parseFloat(sample.timestamp.toFixed(4)), parseFloat(sample.sensor1.toFixed(4))]);
//graphData2.push([parseFloat(sample.timestamp.toFixed(4)), parseFloat(sample.sensor2.toFixed(4))]);
});
$.plot("#graph1", [graphData1], options);
$.plot("#graph2", [graphData2], options);
}
and with this code the output is:
As you can see its plotting the same information on both graphs even when //graphData2.push([parseFloat(sample.timestamp.toFixed(4)), parseFloat(sample.sensor2.toFixed(4))]); is commented
However if i remove the comment the result is this:
As you can see its mixing the data and plotting the same mixed data on both graphs
How can i plot different data on different graphs?
Thanks for your help...

You are setting graphData1 = graphData2 so they are the same array. Then you push all your data points into that one array which is shown in both charts.
Replace
var graphData1, graphData2, graphData3 = [];
// and
function deleteGraph() {
graphData1 = graphData2 = graphData3 = [];
with
var graphData1 = [], graphData2 = [], graphData3 = [];
// and
function deleteGraph() {
graphData1 = [];
graphData2 = [];
graphData3 = [];

Related

User memory limit exceeded in GEE

I started using GEE recently. I wanted to apply the non-parametric Mann-Kendall method to a collection of Sentinel-1 images. However there is a memory error in the code and this is my problem. Link code:https://code.earthengine.google.com/4bf1dbbcd116c8e3f5c584fbb45e8c19
var quadricula = ee.Geometry.Polygon([[-51.20732599322313,-15.60026586116677],[-51.20732599322313,-15.455379154650098],[-51.262600956602036,-15.455379154650098],[-51.262600956602036,-15.60026586116677]]);
//Map.addLayer(quadricula);
// Filter collection to dates of interest.
var Sentinel1 = ee.ImageCollection('COPERNICUS/S1_GRD')
.filterDate('2015-01-01', '2022-01-01')
.filterBounds(quadricula);
print('Quantidade de imagens no intervalo definido:',Sentinel1.size());
//===========================================================================//
var wrapper = require('users/adugnagirma/gee_s1_ard:wrapper');
var helper = require('users/adugnagirma/gee_s1_ard:utilities');
//---------------------------------------------------------------------------//
// DEFINE PARAMETERS
//---------------------------------------------------------------------------//
//var geometry = ee.Geometry.Polygon([[-51.20732599322313,-15.60026586116677],[-51.20732599322313,-15.455379154650098],[-51.262600956602036,-15.455379154650098],[-51.262600956602036,-15.60026586116677]]);
//Map.addLayer(geometry);
var parameter = {//1. Data Selection
START_DATE: "2015-01-01",
STOP_DATE: "2022-01-01",
POLARIZATION:'VVVH',
ORBIT : 'BOTH',
GEOMETRY: quadricula, //uncomment if interactively selecting a region of interest
//GEOMETRY: ee.Geometry.Polygon([[[104.80, 11.61],[104.80, 11.36],[105.16, 11.36],[105.16, 11.61]]], null, false), //Uncomment if providing coordinates
//GEOMETRY: ee.Geometry.Polygon([[[112.05, -0.25],[112.05, -0.45],[112.25, -0.45],[112.25, -0.25]]], null, false),
//2. Additional Border noise correction
APPLY_ADDITIONAL_BORDER_NOISE_CORRECTION: true,
//3.Speckle filter
APPLY_SPECKLE_FILTERING: true,
SPECKLE_FILTER_FRAMEWORK: 'MULTI',
SPECKLE_FILTER: 'REFINED LEE',
SPECKLE_FILTER_KERNEL_SIZE: 5,
SPECKLE_FILTER_NR_OF_IMAGES: 10,
//4. Radiometric terrain normalization
APPLY_TERRAIN_FLATTENING: true,
DEM: ee.Image('NASA/NASADEM_HGT/001'),
TERRAIN_FLATTENING_MODEL: 'VOLUME',
TERRAIN_FLATTENING_ADDITIONAL_LAYOVER_SHADOW_BUFFER: 0,
//5. Output
FORMAT : 'DB',
CLIP_TO_ROI: true,
SAVE_ASSETS: false
};
//---------------------------------------------------------------------------//
// DO THE JOB
//---------------------------------------------------------------------------//
//Preprocess the S1 collection
var s1_preprocces = wrapper.s1_preproc(parameter);
var s1 = s1_preprocces[0];
s1_preprocces = s1_preprocces[1];
//---------------------------------------------------------------------------//
// VISUALIZE
//---------------------------------------------------------------------------//
//Visulaization of the first image in the collection in RGB for VV, VH, images
var visparam = {};
if (parameter.POLARIZATION=='VVVH'){
if (parameter.FORMAT=='DB'){
var s1_preprocces_view = s1_preprocces.map(helper.add_ratio_lin).map(helper.lin_to_db2);
var s1_view = s1.map(helper.add_ratio_lin).map(helper.lin_to_db2);
visparam = {bands:['VV','VH','VVVH_ratio'],min: [-20, -25, 1],max: [0, -5, 15]};
}
else {
var s1_preprocces_view = s1_preprocces.map(helper.add_ratio_lin);
var s1_view = s1.map(helper.add_ratio_lin);
visparam = {bands:['VV','VH','VVVH_ratio'], min: [0.01, 0.0032, 1.25],max: [1, 0.31, 31.62]};
}
}
else {
if (parameter.FORMAT=='DB') {
s1_preprocces_view = s1_preprocces.map(helper.lin_to_db);
s1_view = s1.map(helper.lin_to_db);
visparam = {bands:[parameter.POLARIZATION],min: -25,max: 0} ;
}
else {
s1_preprocces_view = s1_preprocces;
s1_view = s1;
visparam = {bands:[parameter.POLARIZATION],min: 0,max: 0.2};
}
}
// Calcula o MRFDI
var MRFDI = s1_preprocces.map(function(image) {
return image.normalizedDifference(['VV', 'VH']).rename('MRFDI');
});
var addMRFDI = function (image) {
var MRFDI = image.expression('(VV - VH)/(VV + VH)', {
'VV' : image.select('VV'),
'VH' : image.select('VH'),
}).float();
return image.addBands(MRFDI.rename('MRFDI'));
};
var MRFDI = s1_preprocces.map(addMRFDI)
.select('MRFDI');
// Calcula o RVI
var RVI = s1_preprocces.map(function(image) {
return image.normalizedDifference(['VV', 'VH']).rename('RVI');
});
var addRVI = function (image) {
var RVI = image.expression('(4*VH)/(VV + VH)', {
'VV' : image.select('VV'),
'VH' : image.select('VH'),
}).float();
return image.addBands(RVI.rename('RVI'));
};
var RVI = s1_preprocces.map(addRVI)
.select('RVI');
Map.centerObject(parameter.GEOMETRY, 12);
Map.addLayer(s1_view.first(), visparam, 'First image in the input S1 collection', true);
Map.addLayer(s1_preprocces_view.first(), visparam, 'First image in the processed S1 collection', true);
//---------------------------------------------------------------------------//
// EXPORT
//---------------------------------------------------------------------------//
//Convert format for export
if (parameter.FORMAT=='DB'){
s1_preprocces = s1_preprocces.map(helper.lin_to_db);
}
//Save processed collection to asset
if(parameter.SAVE_ASSETS) {
helper.Download.ImageCollection.toAsset(s1_preprocces, '',
{scale: 10,
region: s1_preprocces.geometry(),
type: 'float'});
}
print('Quantidade de imagens s1_preprocces:',s1_preprocces.size());
// Define an image collection time series to chart, MODIS vegetation indices
// in this case.
var imgCol = s1_preprocces
.select(['VV', 'VH']);
//=================================================================================//
//mann-kendall
var coll = s1_preprocces.map(function(image) {
return image.select().addBands(image.normalizedDifference(['VH', 'VV']));
})
.filter(ee.Filter.calendarRange(8, 9, 'month'));
Map.addLayer(coll, {}, 'coll');
var afterFilter = ee.Filter.lessThan({
leftField: 'system:time_start',
rightField: 'system:time_start'
});
var joined = ee.ImageCollection(ee.Join.saveAll('after').apply({
primary: coll,
secondary: coll,
condition: afterFilter
}));
var sign = function(i, j) { // i and j are images
return ee.Image(j).neq(i) // Zero case
.multiply(ee.Image(j).subtract(i).clamp(-1, 1)).int();
};
var kendall = ee.ImageCollection(joined.map(function(current) {
var afterCollection = ee.ImageCollection.fromImages(current.get('after'));
return afterCollection.map(function(image) {
// The unmask is to prevent accumulation of masked pixels that
// result from the undefined case of when either current or image
// is masked. It won't affect the sum, since it's unmasked to zero.
return ee.Image(sign(current, image)).unmask(0);
});
// Set parallelScale to avoid User memory limit exceeded.
}).flatten()).reduce('sum', 2);
var palette_sens = {min: -0.001, max: 0.001, palette: [
'red', 'white', 'green']};
var palette = ['red', 'white', 'green'];
// Stretch this as necessary.g
Map.addLayer(kendall, {palette: palette}, 'kendall');
var slope = function(i, j) { // i and j are images
return ee.Image(j).subtract(i)
.divide(ee.Image(j).date().difference(ee.Image(i).date(), 'days'))
.rename('slope')
.float();
};
var slopes = ee.ImageCollection(joined.map(function(current) {
var afterCollection = ee.ImageCollection.fromImages(current.get('after'));
return afterCollection.map(function(image) {
return ee.Image(slope(current, image));
});
}).flatten());
var sensSlope = slopes.reduce(ee.Reducer.median(), 2); // Set parallelScale.
Map.addLayer(sensSlope, palette_sens, 'sensSlope');
var epochDate = ee.Date('1970-01-01');
var sensIntercept = coll.map(function(image) {
var epochDays = image.date().difference(epochDate, 'days').float();
return image.subtract(sensSlope.multiply(epochDays)).float();
}).reduce(ee.Reducer.median(), 2);
Map.addLayer(sensIntercept, {}, 'sensIntercept');
Map.addLayer(table, {color: 'blue'});
I hope to resolve this impasse without changing the adopted time interval and reducing the size of the study area.

Display dynamic data in Rickshaw chart retreived from API

I try to display data retrieved from web API via a ajex request using rickshaw. Data is retrieved correctly and added to an array. However the chart does not render any data. When I console the series data array it shows all data. Here is my code
var seriesData = [
[]
];
$.ajax({
url: "http://things.ubidots.com/api/v1.6/devices/Smart-
FAD/Temperature/values?page_size=50&format=json&&token=A1E-
BR1Y0dMLAULMNmMLbk0Y8qADGOdS5h",
type: "GET"
}).done(function(data) {
var result = data.results;
for (var i = 0; i < result.length; i++) {
var value = result[i].value;
var time = result[i].timestamp;
seriesData[0][i].push({
"x": time,
"y": value
});
};
}).fail(function() {
console.log("REQUEST FAILED");
});
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: 540,
height: 240,
series: [{
data: seriesData[0],
color: 'steelblue',
name: 'Server1'
}]
});
var x_axis = new Rickshaw.Graph.Axis.Time({
graph: graph
});
var y_axis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
});
graph.render();
Can some help me to solve this?
Rickshaw doesn't watch for changes in the dataset automatically so you need to call graph.update() at the end of you ajax.done function.
.done(function(data) {
var result = data.results;
for (var i = 0; i < result.length; i++) {
var value = result[i].value;
var time = result[i].timestamp;
seriesData[0].push({
"x": time,
"y": value
});
};
graph.update()

Highcharts 2 groups of series

I want to display a chart (that takes the data from a PHP file with JSON) with two dimensions of series : the first one is the technology used (5 in total), and the other one is the export or import.
So when the user is on the page, he can choose to diplay the technology, as export, import or both.
In first, to join one technology import with the same in export, I have used a "linkedto=previous", the result is a single item in the legend per technology.
But I would like to add two items in the legend : "Import" and "Export", with 0 data, that would permit to display or not the import or the export.
I have used this code, but I can't find how to display the choice of import, export, the both, or nothing.
Thank you very much if you take a bit of time to read my post. BR
$(function () {
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'euro',
type: 'column'
},
title: {
text: 'Vision en euro'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'k€'
},
stackLabels: {
enabled: true,
rotation: 30,
}
},
tooltip: {
headerFormat: '{point.x}<b></b><br/>',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
},
}
},
series: []
};
Highcharts.setOptions(Highcharts.theme);
$.getJSON('SOURCE.php', function(json) {
options.xAxis.categories = json[0]['month'];
options.series[0] = {};
options.series[0].name = 'TECHNO 1';
options.series[0].data = json[1]['data'];
options.series[0].stack ='EXPORT';
options.series[0].color= '#808080';
options.series[1] = {};
options.series[1].name = 'TECHNO 1';
options.series[1].data = json[0]['data'];
options.series[1].stack = 'IMPORT';
options.series[1].linkedTo = ':previous';
options.series[1].color= 'url(#highcharts-default-pattern-0)';
options.series[2] = {};
options.series[2].name = 'TECHNO 2';
options.series[2].data = json[3]['data'];
options.series[2].stack = 'EXPORT';
options.series[2].color= '#FFC125';
options.series[3] = {};
options.series[3].name = 'TECHNO 2';
options.series[3].data = json[2]['data'];
options.series[3].stack = 'IMPORT';
options.series[3].linkedTo = ':previous';
options.series[3].color= 'url(#highcharts-default-pattern-1)';
options.series[4] = {};
options.series[4].name = 'TECHNO 3';
options.series[4].data = json[5]['data'];
options.series[4].stack = 'EXPORT';
options.series[4].color= '#2B99FF';
options.series[5] = {};
options.series[5].name = 'TECHNO 3';
options.series[5].data = json[4]['data'];
options.series[5].stack = 'IMPORT';
options.series[5].linkedTo = ':previous';
options.series[5].color= 'url(#highcharts-default-pattern-2)';
options.series[6] = {};
options.series[6].name = 'TECHNO 4';
options.series[6].data = json[7]['data'];
options.series[6].stack = 'EXPORT';
options.series[6].color= '#C72828';
options.series[7] = {};
options.series[7].name = 'TECHNO 4';
options.series[7].data = json[6]['data'];
options.series[7].stack = 'IMPORT';
options.series[7].linkedTo = ':previous';
options.series[7].color= 'url(#highcharts-default-pattern-3)';
options.series[8] = {};
options.series[8].name = 'TECHNO 5';
options.series[8].data = json[9]['data'];
options.series[8].stack = 'Sortie';
options.series[8].color= '#1CA154';
options.series[9] = {};
options.series[9].name = 'TECHNO 5';
options.series[9].data = json[8]['data'];
options.series[9].stack = 'EXPORT';
options.series[9].linkedTo = ':previous';
options.series[9].color= 'url(#highcharts-default-pattern-4)';
options.series[10] = {};
options.series[10].name = 'IMPORT';
options.series[10].data = json[10]['data'];
options.series[10].stack = 'IMPORT';
options.series[10].color= 'url(#highcharts-default-pattern-5)';
options.series[11] = {};
options.series[11].name = 'EXPORT';
options.series[11].data = json[11]['data'];
options.series[11].stack = 'IMPORT';
options.series[11].color= 'url(#highcharts-default-pattern-5)';
//options.series[1].color= '#C89B9B';
chart = new Highcharts.Chart(options);
});
});
});
First of all, you can hide or show a series in a chart by modifying the "visible" property of a series object to false or true respectively. For example:
options.series[10].visible = true; // or false
Secondly, you can achieve that in an event listener (the push of a button for example), using chart.update() method, and passing the changes as an argument. Have a look in here: Dynamic charts -> update options after render.
But the simplest solution is to just repeat the
chart = new Highcharts.Chart(options);
statement, after you have put in the series object the "visible" property with the value you like, for each series (import/export) you want to show or hide.
Finally, having 2 kinds of clickable labels in the legend can only be done with some custom jquery programming of your own. I think a couple of small buttons next to the chart would be much easier and faster to implement.

I want to multiply chart data according as array length

I used this ,to multiply doughnut chart according as array(arr) has,but it can't change to object,(data has string type).So chart doesn't appear here..,how fix it
var arr=['HTML','CSS','JS'],i,data;
data ='[';
for(i=0;i<arr.length;i++){
if(i==arr.length-1){
data+='{value:"300",color:"#fff",highlight:"#aaa",label:arr[i]}';
}
else{
data+='{value:"300",color:"#fff",highlight:"#aaa",label:arr[i]},';
}
}
data += ']';
var dat = data;
window.onload = function () {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myBar = new Chart(ctx).Doughnut(dat,{
responsive: true,
});
};
//want like this
dat =[{value:"300",color:"#fff",highlight:"#aaa",label:"HTML"},
{value:"200",color:"#fff",highlight:"#aaa",label:"CSS"}];
You are creating your array as a String.
You need to create an array of objects [{},{},{}].
The method used to INSERT a new object in an array is PUSH().
Check the fiddle. Now it´s working OK (move the mouse on the screen to see the chart is there (you will only see it when mouse is over it):
window.onload = function() {
var arr = ['HTML', 'CSS', 'JS'],
i, data;
data = [];
for (i = 0; i < arr.length; i++) {
if (i == arr.length - 1) {
data.push({
value: "300",
color: "#fff",
highlight: "#aaa",
label: arr[i]
});
} else {
data.push({
value: "300",
color: "#fff",
highlight: "#aaa",
label: arr[i]
});
}
}
var dat = data;
var ctx = document.getElementById("chart-area").getContext("2d");
window.myBar = new Chart(ctx).Doughnut(dat, {
responsive: true,
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.js"></script>
<canvas id="chart-area"></canvas>

setting google chart multiple axes from dynamically generated data

I'm trying to replicate the following code from a working example:
series: {0: {targetAxisIndex:0},
1: {targetAxisIndex:0},
2: {targetAxisIndex:1},
This is for setting which y-axis is used to plot different columns from a dataTable on a Google chart.
However I have a variable number of columns (based on user input), therefore am collecting an array of the required axis (the axisAssignment Array in the below example).
My code is below:
var series = {};
for (i=0;i<axisAssignment.length;i++)
{
series[i] = {targetAxisIndex: axisAssignment[i]};
}
return series;
However, all of my data is only being written to the left axis, despite the debugger suggesting that the object is correct. My option code is below:
var options =
{
hAxis: {title: xTitle},
vAxes: {0: {title: y1Type},
1: {title: y2Type}
},
series: calculateSeries(),
pointSize: 1,
legend: {position: 'top', textStyle: {fontSize: 10}}
};
Any assistance would be greatly apreciated.
Thanks
Tom
edit: whole file for reference (it's a work in progress so a bit of a mess I'm afraid)
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart());
function drawChart()
{
var title = "Node: "+currentNode;
var xTitle = "Date";
var yTitle = titles[currentVariable];
if (totalData !== null)
{
var tempData = newData();
var tempData2 = totalData;
dataArray[dataCount] = tempData;
var joinMark = countArray(dataCount);
totalData = google.visualization.data.join(tempData2,tempData,'full',[[0,0]],joinMark,[1]);
dataCount = dataCount+1;
}
else
{
totalData = newData();
dataArray[dataCount] = totalData;
dataCount = 1;
}
var options =
{
hAxis: {title: xTitle},
vAxes: {0: {title: y1Type},
1: {title: y2Type}
},
series: calculateSeries(),
pointSize: 0.5,
legend: {position: 'top', textStyle: {fontSize: 10}}
};
var chart = new google.visualization.ScatterChart(document.getElementById('graph'));
console.log(calculateSeries());
chart.draw(totalData, options);
function countArray(count)
{
var arrayCount= new Array();
if (count===1)
{
arrayCount[0] = count;
}
else
{
for (var i=0;i<count;i++)
{
var temp = i+1;
arrayCount[i] = temp;
}
}
return arrayCount;
}
function calculateSeries()
{
var series = {};
for (i=0;i<axisAssignment.length;i++)
{
series[i] = {targetAxisIndex: axisAssignment[i]};
}
return series;
}
function newData()
{
var dataType = dataIn[0];
dataIn.shift();
var axis = dataSelect(dataType);
axisAssignment.push(axis);
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Node: "+currentNode+": "+titles[currentVariable]);
var num = (dataIn.length);
data.addRows(num/2);
var i = 0;
var j = 0;
while (i<num)
{
var d = (dataIn[i]);
if (i%2===0)
{
d = new Date(d);
data.setCell(j,0,d);
i++;
}
else
{
data.setCell(j,1,parseFloat(d));
i++;
j++;
}
}
return data;
}
function dataSelect(type)
{
var axisNumber;
if (y1Type === null || y1Type === type)
{
y1Type = type;
axisNumber = 0;
}
else if (y2Type === null || y2Type === type)
{
y2Type = type;
axisNumber = 1;
}
else
{
alert("You already have 2 axes assigned.\n\nPlease clear the graph \nor select more objects of \ntype"+y1Type+" or \ntype "+y2Type+" to continue.");
axisNumber = null;
}
return axisNumber;
}
}
Ok, it seems that it's an issue with my choice of ScatterChart,
var options =
{
hAxis: {title: xTitle},
series: calculateSeries(),
vAxes: {0: {title: y1Type },
1: {title: y2Type}
},
pointSize: 0.5,
legend: {position: 'top', textStyle: {fontSize: 10}}
};
var chart = new google.visualization.LineChart(document.getElementById('graph'));
chart.draw(totalData, options);
I've changed it to LineChart and it's working fine, by keeping the pointSize option, the appearance is almost completely unchanged. Thanks for your help juvian.

Categories