Programmatically highlighting DyGraph time series - javascript

I’m putting together an web-app that plots time series of weather data for the current year and the past 10 years on one dygraph. I want the time series for the current year (2015 at this time) to be highlighted relative to the past years, so I’m trying to increase the strokewidth for the current year from a default of 2 to 5. My problem is that I’m having trouble getting this to work programatically. The daily data for each year is in native array format, so the time series are identified by the contents of the array Yr0Labels:
["Date", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015"]
Next January 1 the Yr0Labels will programmatically change to:
["Date", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",”2016”]
In the dygraph options parameter I set default strokeWidth to 2 and the strokeWidth for 2015 to 5. Because I want the current calendar year data to be highlighted properly after Jan. 1 , I’ve tried identifying the series to be highlighted by the contents of yr0Labels[11],
{
……
strokeWidth: 2,
labels: yr0Labels,
series: { yr0Labels[11] : { strokeWidth: 5} },
……..
}
This produced a syntax error - SyntaxError: missing : after property id
Suspecting that dygraph didn’t want to see array syntax in the series identifier, I tried to identify the series via a string variable “cyear”,
cyear = yr0Labels[11];
{…strokeWidth: 2,
labels: yr0Labels,
series: { cyear : { strokeWidth: 5} },
…….}
This didn’t produce an error, but also didn’t highlight the series.
The only way I’ve been able to make this work is to directly enter the current year value as the series identifier,
{…strokeWidth: 2,
labels: yr0Labels,
series : { ‘2015’ : { strokeWidth: 5} },
…….}
This worked, but I’d have to edit the dygraph option parameter every Jan. 1 to make data for the current calendar year plot properly.
How I can make this highlighting work programmatically?

The issue is with how you're using keys in JavaScript object literals.
This:
{ foo: 'bar' }
is the same as:
{ 'foo': 'bar' }
even if there's a variable in scope called foo. To achieve the result you want, you need to do fill out your objects using something like:
var foo = 'blah';
var o = {};
o[foo] = 'bar';

Related

ChartsJS bar chart with HH:MM:SS format

I have a chartsJS as type: 'bar'. This works fine with data sets of numbers or string. How can I create a data set which consist of time format HH:MM:SS. My Chart so far looks like this:
let hours = ["40", "20", "15", "10"];
let frameworks = ['Week1', 'Week2', 'Week3'];
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: frameworks,
datasets: [{
data: hours,
}],
},
});
I want the array "hours" to consist of
let hours = ["01:00:00", "02:00:00", "03:00:00", "04:00:00"];
How can I format this? Been looking around and not been able to come up with a soluiton just yet.
I think you can do it with moment library.
It's the best library for working with time and dates.
You can find here documentation: https://momentjs.com/

scatter plot d3.js freecodecamp pronect having trouble with yscale displaying minutes

I had completed all 14 user stories, except 2, userstory #6 and #12 they are related to each other (about YScale domain and range, and converting it to minutes)
It's been two days I stuck on this, I will share my code
Can anyone tell me what is the bug in my code.
##https://codepen.io/codebrakerk/pen/ZEWOPpz
You need to access "Time" from your dataset.
{
"Time": "36:50",
"Place": 1,
"Seconds": 2210,
"Name": "Marco Pantani",
"Year": 1995,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1995 due to high hematocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
}
I guess the "Seconds" attribute implies the time it took for the person to complete his run. Your time code should run as follows:
(item) => {
let t = item["Time"].split(':');
return new Date(minutes=t[0], seconds=t[1]);
}

Multiple y-axis values against one single x-axis point

I have implemented AMCharts JS library in one of my web apps and am having an issue. Right now i need to add multiple y-axis values to one single x-axis point (which is actually a date). I have 5 values 5,1,5,4,1,3 which contain same x-axis point (same date) but when i observe the graph sometimes 4 is missing while sometimes 5 as shown in the image. Am i really doing something wrong? This is the form of data
{date: "2016-03-29", value: 5}
{date: "2016-03-29", value: 1}
{date: "2016-03-29", value: 5}
{date: "2016-03-29", value: 4}
{date: "2016-03-29", value: 1}
{date: "2016-03-29", value: 3}
{date: "2016-10-20", value: 0}
{date: "2016-10-20", value: 0}
{date: "2016-10-20", value: 0}
There are a couple of issues with your setup.
First, your data is structured incorrectly for a chart with parseDates enabled. You can't have multiple elements of the same date. AmCharts requires that you group your data points if they share the same date/category. This is by design and every single example on the website shows this, so all of your 2016-03-29 and 2016-10-20 points can be reduced into two objects. I'm presuming that those multiple values correspond to different graph objects, so you need unique value fields for each, i.e.
[{
date: "2016-03-29",
value1: 5,
value2: 1,
value3: 5,
value4: 4,
value5: 1,
value6: 3
}, {
date: "2016-10-20"
value1: 0,
value2: 0,
value3: 0
}]
And then you have 6 graph objects with valueFields set to value1 through value6 to accommodate for those points. Again, I'm assuming that you have multiple graphs given your dataset.
Edit
Your comment indicates that this is not the case and they all belong to one graph. You still need to restructure your data and give unique timestamps since you can't have multiple entries with the same timestamp for a parseDates-enabled chart. If those values came in at different times, then provide that information. For example, assuming your data is hourly:
{date: "2016-03-29 01:00", value: 5}
{date: "2016-03-29 02:00", value: 1}
{date: "2016-03-29 03:00", value: 5}
{date: "2016-03-29 04:00", value: 4}
{date: "2016-03-29 05:00", value: 1}
{date: "2016-03-29 06:00", value: 3}
{date: "2016-10-20 01:00", value: 0}
{date: "2016-10-20 02:00", value: 0}
{date: "2016-10-20 03:00", value: 0}
This will work but you have to set your dataDateFormat to match the timestamp (in this case "YYYY-MM-DD JJ:NN") and adjust your minPeriod to accommodate for the smallest interval in between your points (for this example: "hh").
If you don't parse dates, then you can keep your setup, but the chart will look weird with multiple 2016-03-29 entries. Those are your only options.
As for displaying multiple value axes, a value axis needs to be associated with a graph. If you need multiple value axes, then you need multiple graphs. Each graph's valueAxis property needs to be assigned to a valueAxis object or valueAxis id. You can't assign multiple value axes to one graph object. You can see how this works in this example.
If you only have one graph and need to display a second value axis, create a duplicate graph instance and disable visual aspects of it, like so:
valueAxes: [{
"position": "left",
"id": "v1"
}, {
"position": "right",
"id": "v2"
}],
graphs: [{
//initial graph
type: "line",
bullet: "round",
valueField: "value"
}, {
//invisible duplicate graph
//for second axis
lineAlpha: 0,
showBalloons: false,
visibleInLegend: false,
valueAxis: "v2",
valueField: "value"
}],
Demo

Highcharts proper usage of datetime?

My current setup is somewhat static with xaxis categories and tickinterval(cant even see the graph without tickinterval).
If you change screen resolution it looks somewhat bad and I would like to have the x-axis to be dynamic.
What I've gathered you should use data like this http://www.highcharts.com/samples/data/usdeur.js and xAxis like below?
xAxis: { type: 'datetime' }
But that example only uses YYMMDD, I also use hh:mm:ss.
Currently looks like this: i.imgur.com/v649otj.png
xAxis: {
categories: getjson('Date'),
tickInterval: 20
},
series: [
{name:'Cars', data: getjson('Values')},
]
Data:
getjson('Date') equals:
Array [ "2014-11-09 02:36:00", "2014-11-07 07:35:00", "2014-11-08 20:29:00", "2014-11-08 20:30:00", "2014-11-10 11:06:00", "2014-11-08 08:12:00", "2014-11-08 20:31:00", "2014-11-08 20:23:00", "2014-11-08 20:24:00", "2014-11-08 20:25:00", 190 till… ]
getjson('Values') equals:
Array [ 13, 209, 209, 19, 0, 209, 15, 13, 13, 19, 190 till… ]
So how do I make use of this data and the datetime configuration.
Somehow push the 'Date'-data into same array as 'values' and convert it into right date format?
Edit: Current work: http://jsfiddle.net/tws8x0pd/4/
Datetime configuration uses UTC numbers not YYMMDD! You should pass your datetime data with Date.UTC(year,month,day,hour,minute,second) in Series data with the format:
series: [
{name:'...', data: [ [ Date.UTC(year,month,day,hour,minute,second), value ],
[ Date.UTC(year,month,day,hour,minute,second), value ],
...
]
}
]
so you should get the year,month,... out of your json date and put it with the corresponding value in json values. Each in one array, not apart in separate arrays.
The time require to be as timestamp (time in miliseconds) not strnig as you have. So you need to prepare correct data by Date.parse() / Date.UTC()

Plotting an empty interval for elasticsearch date histogram

I'm using an elasticsearch date histogram to group responses by count over time. The date histogram facet works great for this but if an interval doesn't have any responses that fall within in it it doesn't show up in the json. I figured the best way to combat this is to use javascript to fill in the gaps in a charting library. (ideally in highcharts but d3 or something else is possible). Months seem pretty easy to do but it get more complicated when I need to do it by week and day as well. Basically my problem is:
{ date: April: 5, count: 5 }, { date: June, count: 10 }
needs to be more like
{ date: April: 5, count: 5 }, {date: May, count: null }, { date: June, count: 10 }
min_doc_count=0 only creates intervals in between nonempty buckets. If you want to plot empty intervals outside your buckets (a few months ahead or behind of the start of your data), then add extended_bounds (docs).
In elasticsearch_dsl, to allow empty buckets out to two years ago, this looks like
A(
"date_histogram",
field="publishedAt",
calendar_interval="month",
format="MMM yyyy",
min_doc_count=0,
extended_bounds={"min": f"{date:%b %Y}||-2y"},
),
I had the same issue for a while after searching and reading the documentation I found out extended_bounds will fix my problem:
{
"aggs": {
"total": {
"date_histogram": {
"extended_bounds": {
"max": "2022-11-01",
"min": "2015-09-04"
},
"field": "eventDate",
"calendar_interval": "1d",
"min_doc_count": 0
}
}
}
}

Categories