new to javascript. I am trying to make a new series in Highcharts using one already graphed series multiplied by another already graphed series. How do I add the new series with its own y-axis? I am using some base code that I have not done myself.
ChartOptions.Series[index].data holds an array of arrays: so for example :[1563480488000, 12.144] would be timestamp and datavalue for every data point in the series.
So I would want something like this:
[1563480488000, 12.144] * [1563480488000, 1.0] = [1563480488000, 12.144]
that's 12.144*1.0, and the timestamp is kept.
dynamicChart is a new Highcharts.StockChart(chartOptions) its just away from the snippet I am working with.
I've tried the following code.
var voltSeries = chartOptions.series[0].data;
var ampSeries = chartOptions.series[1].data;
var wattSeries = [];
for(var i = 0; i <= voltSeries.length; i++){
var valu = chartOptions.series[1].data[i,1]*chartOptions.series[0].data[i,1];
wattSeries[i,1] = valu;
wattSeries[i,0] = valu;
}
eval('window.console && console.log(voltSeries)');
eval('window.console && console.log(wattSeries)');
dynamicChart.addSeries({
name: 'Watts',
data: wattSeries
});
dynamicChart.redraw();
the output of wattSeries is an Array of (2) [NaN, NaN] but It should be the timestamp and the multiplied value.
and It seems like I cannot graph it no matter what I do.
The problem is incorrectly getting values from the array. For nested arrays you should use several parentheses: array[x][x]
var dynamicChart = Highcharts.chart('container', chartOptions);
var voltSeries = chartOptions.series[0].data,
ampSeries = chartOptions.series[1].data,
wattSeries = [],
valu;
for (var i = 0; i < voltSeries.length; i++) {
valu = voltSeries[i][1] * ampSeries[i][1];
wattSeries.push([ampSeries[i][0], valu]);
}
dynamicChart.addSeries({
name: 'Watts',
data: wattSeries,
yAxis: 1
});
Live demo: http://jsfiddle.net/BlackLabel/vpzLou6r/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
Related
I'm trying to crate a code that will count number of images I have and then will create a list with the number of images (for example, if I have 5 images, I'll get this :
[0,1,2,3,4].
My code runs and I think it creates a list that is empty:
This is my code (I have tried to put only the relevant part):
//First I filter my image collection according to the number of pixels each image has
//Filter according to number of pixels
var ndviWithCount = withNDVI.map(function(image){
var countpixels = ee.Number(image.reduceRegion({
reducer: ee.Reducer.count(),
geometry: geometry,
crs: 'EPSG:4326',
scale: 30,
}).get('NDVI'));
return image.set('count', countpixels);
});
print(ndviWithCount, 'ndviWithCount');
//Here I count what is the maximum number of pixels that image has and then I create new collection with //only "big images"
var max = ndviWithCount.reduceColumns(ee.Reducer.max(), ["count"]);
print(max.get('max'));
var max_pix=max.get('max');
//filter between a range
var filter = ndviWithCount.filter(ee.Filter.rangeContains(
'count', max_pix, max_pix));
print(filter, 'filtered');
//Here I try to grab the number of images so I can create a list
var num_images=filter.size();
//creating the list of images
var listOfImages =(filter.toList(filter.size()));
//Here is the loop that diesn't work
//I have tried to determine i=0, and then that it will iterate untill i is equal to the number of images
//I try to say, i=0, so add 1 and the nadd it to my list.
for (i = 0; i < num_images; i++) {
var listOfNumbers=[];
i=i.add(1);
listOfNumbers.push(i);
}
my end goal is to have list that contains nmbers from 0 or 1 to the number of images I have.
for (i = 0; i < num_images; i++) {
var listOfNumbers=[];
i=i.add(1);
listOfNumbers.push(i);
}
You are initiating the array inside the for loop which isn't what you intend. I'm also not sure what i = i.add(1) is supposed to be. May be helpful to check out info on for loops.
let listOfNumbers = [];
for (let i = 0; i < num_images; i++) {
listOfNumbers.push(i);
}
I found the solution. The reason for the error is because of the GEE envorinment.
This code works:
var serverList = ee.List.sequence(0,NumberOfImages.subtract(1));
serverList = serverList.map(function(n) {
return ee.Number(n).add(1);
});
print(serverList);
So I am able to populate an array with values in json format in highcharts by writing the following code:
var processed_json = new Array();
for (i = 0; i < data.length; i++) {
processed_json.push({
x: data[i].duration,
y: data[i].count
});
}
My problem lies with trying to create a running total of duration on the x-axis.
I have thought about creating a second array to loop over the first and to then add the values, but how do I add the values in the second array, if I refer to the values by their title '.duration' in the first?
I need to populate an array with cumulative sum values, to then plot on the x axis. I hope this makes sense?
Does their exist an easier way to solve my issue?
I am quite new to javascript and highcharts, so apologies if there is an easier way to solve this.
Thank you for your help.
I hope that I understood what you are trying to achieve. You must have somewhere declared variable with JSON containing options for generating Highcharts chart. I assume that it's name is highchartsOptions.
highchartsOptions.xAxis.categories = [];
var processed_json = new Array(),
durationSum = 0;
for (i = 0; i < data.length; i++) {
processed_json.push({
x: data[i].duration,
y: data[i].count
});
durationSum += data[i].duration;
highchartsOptions.xAxis.categories.push(durationSum);
}
This shall add categories axis. And every category with index i will be sum of all data duration preceeding.
I have some records for that I am using three arrays which contains dynamic values.
var Results=new Array();
var Second=new Array();
var First=new Array();
I want to show these array values in Google chart but as per Google chart they shows array values differently.
How to add my arrays into Google Chart ?
If they are all the same length, you can try something like this:
var Combined = new Array();
Combined[0] = ['Results', 'First', 'Second'];
for (var i = 0; i < Results.length; i++){
Combined[i + 1] = [ Results[i], First[i], Second[i] ];
}
//second parameter is false because first row is headers, not data.
var table = google.visualization.arrayToDataTable(Combined, false);
See here for documentation on array to DataTable.
I am having some problems with my JavaScript and amCharts graph.
What I am trying to achieve is to reload an amChart line graph with new data from a DIV element. In my final page this DIV element will be dynamically updated and hidden so will not been seen by the end user. The graph needs to be redrawn without reloading the page.
I have an JSFiddle page with an example of my attempts to reload the data.
http://jsfiddle.net/gnuoynomis/Se2UE/1/
I have tried to:
Make objects of the points and add them into a string creating a string of objects but this does not seem to load into the graph.
function LoadNewDataFromDIV_V1()
{
//This function attempts to use a string of objects to pass to the dataprovider setting
var ChartData = document.getElementById("NewData").innerHTML;
var CD = ChartData.split("},{"); //Split the string on the different day elements
var NewChartData = "";
for(i=0; i<CD.length; i++)
{
var D = CD[i];
D = D.replace("{",""); //Remove any additional { that may exist to help with the formating later
D = D.replace("}",""); //Remove any additional } that may exist to help with the formating later
D = "{" + D + "}"; //Add a { and } to reformat the line correctly from the splitting
if(NewChartData != "")
NewChartData += ",";
NewChartData += JSON.parse(D); //Add the parsed object to the data string
}
chart.dataProvider = NewChartData; //Update graph data
chart.validateData(); //Revalidate chart data
}
I have also tried adding the objects into an array and tried passing this but still no luck.
function LoadNewDataFromDIV_V2()
{
//This function attempts to use an array to store the data and pass this to the dataprovider setting
var ChartData = document.getElementById("NewData").innerHTML;
var CD = ChartData.split("},{"); //Split the string on the different day elements
var NewChartDataArray = [];
for(i=0; i<CD.length; i++)
{
var D = CD[i];
D = D.replace("{",""); //Remove any additional { that may exist to help with the formating later
D = D.replace("}",""); //Remove any additional } that may exist to help with the formating later
D = "{" + D + "}"; //Add a { and } to reformat the line correctly from the splitting
NewChartDataArray.push(D); //Push the data to the array
}
chart.dataProvider = NewChartDataArray; //Update graph data
chart.validateData(); //Revalidate chart data
}
My reset of the graph works perfectly if I add the entire string straight in manually and this is what I am trying to replicate with the other methods.
If anyone is able to point out what I am doing wrong then I would be most grateful. I am also open to any suggestions if you think that I could be doing this in a better way.
working fiddle
http://jsfiddle.net/Se2UE/2/
the core of my change is here
var NewChartDataArray = [];
for(i=0; i<CD.length; i++)
{
var D = CD[i];
D = D.replace("{","");
D = D.replace("}","");
D = "{" + D + "}";
NewChartDataArray.push(JSON.parse(D));
}
declare NewChartDataArray as array and not string then add an object to array.
You had an array of strings, your library expects an array of objects
refer this
Hello I would like to ask how to properly instantiate and process a dynamically added series in Highcharts.
I am bringing about an instance of series like this:
var newSeries = new Highcharts.Series();
var newData = [];
date = Date.parse(newDate() +' UTC');
name = 'datapoint name';
newData.push([date, name]);
newSeries.name = 'Somename';
//newData variable processing
newSeries.data = newData;
newSeries.color = "#EEEEEE";
newSeries.showInLegend = false;
newSeries.index = -1;
chart.addSeries(newSeries);
With this code, I was able to add a new series in a Highchart object runtime. however, I would like to do some additional processing with my series object before adding it up to the actual chart.
I've tried:
newSeries.marker.enabled = "false";
newSeries.marker.states.hover = "false";
newSeries.index = -1; //to be able to send the series at the backmost part of the chart
but failed to achieve desired results.
If possible, can someone point me to the right direction on how to properly instantiate a series object with a marker object inside it?
Any help would be very much appreciated.
EDIT: THE RIGHT ANSWER CARE OF GREG
If you add each point as an object then you have control over the markers as follows:
function addSeries(chart) {
var newSeries = new Highcharts.Series();
newSeries.name = 'Tokyo';
newSeries.data = [{y: 1}, {y:20}, {y:23}, {y:11}];
newSeries.zIndex = -1;
for (var i = 0; i < newSeries.data.length; i++) {
var datum = newSeries.data[i];
datum.marker = {
enabled: false,
states: {
hover: {
enabled: false,
lineColor: '#ff0000'
}
}
};
}
chart.addSeries(newSeries);
}
Here's a working example: http://jsfiddle.net/LrvB9/