flot graph not displaying - javascript

I have a flot jquery graph but the lines are not displaying. It just displays the graph with x and yaxis but not data lines.
{!formatteddata1} gets a string with the series values from salesforce
The alert gives these values
[1294041600000,14.00],[1294041600000,14.50],[1294041600000,15.00],[1293955200000,12.00]
Below is the code to generate the graph.
j$('#loadgraph').click(function() {
var d1=[];
d1='{!formatteddata1}';
alert(d1);
j$.plot(j$("#placeholder"),[d1],{
xaxis:
{ mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
}
,yaxis: {
min:0, max: 24, tickSize: 5
}
});
});

Hey mate,
The d1 shouldn't be a String, you're declaring it as an array but you're pushing the value with single quotes changing it to string. Change this:
var d1=[];
d1='{!formatteddata1}';
to this:
var d1=[{!formatteddata1}];
Cheers
G.

Related

Write a function to export multiple CSV files for different dates in Google Earth Engine

Here by this function I can download the monthly data for a particular month. What I need is getting a CSV file which will have monthly value for all pixels(377 in my case) in a single CSV.
If that's not possible a function to download monthly data CSV files for 31 years.
Currently I have to modify this line
var dataset = data.filter(ee.Filter.date('2001-12-01', '2001-12-30'));
to get the values for all pixels for a single month and manually edit the above line for the next month and so on and make file operation manually in my PC.
Sharing the entire code
var dataset = data.filter(ee.Filter.date('2001-12-01', '2001-12-30'));
var soilMoisture = dataset.select('pr');
var soilMoistureVis = {
//min: 0.0,
//max: 28.0,
min: 250,
max: 700,
palette: ['0300ff', '418504', 'efff07', 'efff07', 'ff0303'],
};
var rgbVis = {
bands: ['B11', 'B8', 'B3'],
min: 0,
max: 3000
};
var total = soilMoisture.reduce(ee.Reducer.sum());
var totalRanchi = total.clip(ranchi);
var stats = total.reduceRegion({
reducer: ee.Reducer.mean(),
geometry: ranchi,
scale: 5000,
})
var count_px = total.reduceRegion({
reducer: ee.Reducer.count(),
geometry: ranchi,
scale: 5000,
})
print("Total Pixel = ",count_px.get('pr_sum'));
print("Amount = ",stats.get('pr_sum'))
Map.centerObject(ranchi);
//Map.addLayer(total, soilMoistureVis, 'Soil Moisture');
var vectors = totalRanchi.sample({
region: ranchi,
geometries: true,
scale: 5000,// if you want points
});
print(vectors);
Map.addLayer(ranchi,rgbVis, "Ranchi")
Map.addLayer(vectors, soilMoistureVis, "Vectors");
//Map.addLayer(totalRanchi, soilMoistureVis, "Ranchi_Region");
Export.table.toDrive({
collection: vectors,
folder: 'earthengine_pr',
fileNamePrefix: 'vec_',
fileFormat: 'CSV'}) ```
A similar question was answered here: https://gis.stackexchange.com/questions/312547/make-a-loop-for-monthly-ndvi-in-google-earth-engine
Basically you want to map your calculation and export for every month in your date range. Your code doesn't have data so I can't give you a full example, but the answer in the link above should be enough to get you started. If you run into any errors, leave a comment and I can try and help you out.

C3js - Failed to parse x 'time' to Date object

I am constantly facing a failed to parse time to date object issue. I want to generate a graph which on the left (Y-axis) shows a probability. Say the probability is 0, 0.2, 0.4 etc.. to 1. On the graph, I would like to plot the probability of something at a specific time. The below code is what I am using.
arr1 is the array containing the probabilities.
arr5 is the array containing the timestamp for each of the probability in arr1. The time format is in "12:03:55".
The issue now is if I were to hard code the timestamps into the chart columns, the chart would display perfectly fine. However I am getting the time from a user uploaded .csv file, hence I am concatenating an array which has the timestamps. And this gives me the error of Failed to parse x '12:03:55' to Date object.
I did console.log(dataTime), so I know my concat has been performed correctly in the intended format. This is what the console.log returns.
["times", "12:03:55", "12:03:56", "12:03:56", "12:03:56", "12:03:57", "12:03:57", "12:03:58", "12:03:58", "12:03:59", "12:03:59", "12:04:00"]
This is what the console.log for dataMood returns.
["Mood", 0.3677342, 0.34968433, 0.32662648, 0.3163717, 0.78009516, 0.97079295, 0.97183245, 0.9724318, 0.9689829, 0.7293974, 0.12735543]
Below is the code I am using.
var labelMood = 'Mood';
var dataMood = [labelMood].concat(arr1);
var times = 'times';
var dataTime = [times].concat(arr5);
var chart = c3.generate({
bindto: '#line',
data: {
x: 'times',
xFormat: '%H:%M:%S',
columns: [
dataTime, dataMood
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M:%S'
}
}
}
});
I really can't see why this isn't working since the format of the concatenated object is the same as how I would've hard coded the times into columns. I'm at my wits end after having Googled for hours. Hopefully someone has came across this issued before and has solved it successfully.

Formatting text from axis ticks in plotly using tickformat

Is possible to add format to the xaxis and yaxis ticks using tickformat?
The idea is cut long names of axis as:
axiswithaverylongname --> axisw...
In the plotly api reference there's and example to format dates
https://plot.ly/javascript/reference/#layout-xaxis-tickformat
and also they refer to the d3 documentation
https://github.com/d3/d3-format/blob/master/README.md
from the plotly reference:
tickformat (string)
default: ""
Sets the tick label formatting rule using d3 formatting mini-languages
which are very similar to those in Python. For numbers, see:
https://github.com/d3/d3-format/blob/master/README.md#locale_format
And for dates see: https://github.com/d3/d3-time-
format/blob/master/README.md#locale_format We add one item to d3's
date formatter: "%{n}f" for fractional seconds with n digits. For
example, "2016-10-13 09:15:23.456" with tickformat "%H~%M~%S.%2f"
would display "09~15~23.46"
As far as I know there is no way of doing it directly via tickformat but a few lines of JavaScript code will fix it for you.
Plotly.d3.selectAll(".xtick text").each(function(d, i) {
Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5));
});
Using d3's seleectAll wet get all text labels on the x-axis and update the text with the first 5 letters of the initial label.
You can either do it automatically or when the button is pressed in the example below.
var trace1 = {
x: ["A", "B1", "axiswithaverylongname", "Wow, wait a second, that's way tooooo long"],
y: [1, 2, 3, 4],
type: "bar"
};
var myPlot = document.getElementById('myPlot')
Plotly.newPlot('myPlot', [trace1]);
document.getElementById("cleanButton").addEventListener("click", function(){
Plotly.d3.selectAll(".xtick text").each(function(d, i) {
if (Plotly.d3.select(this).html().length > 8) {
Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5) + '...');
}
});
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot" style="width:100%;height:100%"></div>
<button id="cleanButton">Clean x-axis</button>

How do I chart the a second custom data point in Dygraphs?

I'm toying around with Dygraphs and really liking it. However I'm having trouble setting a string value for the second point. I've tried to produce it to be a date, but I would rather keep the custom format for my own date and time.
My simple chart is
new Dygraph(document.getElementById("graphdiv"),
dataload
,
{
labels: [ "x", "A" ],
title: 'Point',
ylabel: 'Value in Eng Units',
xlabel: 'Time & Date'
});
The code that provides the data into dataload is
i = 0
while ( i < 100){
datappointvalue = [ archivetime[i], archivevalue[i] ] ;
dataload.push(datapidvalue);
}
As you can guess archivetime and archivevalue are arrays that I populate.
archivetime has the format of a string "22-MAR-2016 20:20:41.26" archivevalue has the format of decimal/int "144.32".
My graph always comes out like
this - It will always get the values of archivevalue, but never archivetime.
So the question is ultimately how can I display my second value to be the date and time. I would prefer not having to reformat my archivedate into something else, but if necessary that can be done.
Thanks!
I've figured it out.
I did not realize that the x-axis had to be in a specific date format and to use new Date() in the code.
So my code is now
i = 0
while ( i < 100){
datappointvalue = [ new date(archivetime[i]), archivevalue[i] ] ;
dataload.push(datapidvalue);
}
where archivetime[i] now has the format "2016/3/17 20:20:41" as specified in http://dygraphs.com/data.html
Thanks

Handling Large Datasets with With X axis Charts

I am using FLOTR API to display charts
I have some large sets of data for Six Months . For example
var jsonData = [August 19, 2004',August 20, 2004',August 21, 2004',August 22, 2004',.........,January 1 , 2005] ;
Like this for 6 Months .
But inside X axis I need to display only the Months date values .
Flotr.draw(
xaxis:{
tickFormatter: function(n)
{
return ;
},
}
Please tell me , what will be the best solution for this ??
In your xaxis object, you need to use the ticks property to specify the ticks you want.
It would look something like this:
xaxis: {
...
ticks: [[<timestamp>,'August, 2004'],[<timestamp>,'September, 2004'],...,[<timestamp>,'January, 2005]],
...
}
You'll have to create the timestamps the same way you've created them for your data, but that's about it.

Categories