Retrieve data from nested JSON to Morris.js xkey - javascript

So I'm trying to make a bar chart, with morris.js, using CakePHP 3. I have the following nested JSON,(wich contains date details):
MarketingSales:
0: Object
country_id: 5
date: Object
NumeroDia: 4
date: "2015-01-01 T 00:00:00+0000"
day: 1
id: 366
month: 1
week: 1
year: 2015
date_id: 366
id: 4106
medium_id: 8
sales: 54189.18863
views: 3496
This JSON comes from two joined tables ("MarketingSales" and "Dates"), using the "contains" option from CakePHP.
I'm now trying to label the x axis with the number of the month, but I'm getting "undefined" labels.
so far, I have tried:
xkey:['date']
xkey:['date.month']
xkey:['date']['month']
xkey:date.month
Reading through morris.js documentation I found about setting parseTime to false, but it doesn't work either.
Any ideas of what I'm doing wrong?
Thanks!
edit: fixed typing error

Seems like a type error. Should not be one of these?
xkey:['date']
xkey:['date.month']
xkey:['date']['month']
xkey:date.month

Related

Continuous axis for multiple boxplots of duration data with Plotly in Grafana

I'm really out of ideas on how to solve this puzzle, so it has come to this.
I am using the "Plotly panel" panel plugin for Grafana to show multiple boxplots of duration data.
I need to show these boxplots relative to each other like in the image below:
Using the query below this works fine, the only problem is that the values are in seconds and i want to show them in YY-MM-DD HH:MM:SS. Mind you i don't want to show any dates, i want the duration.
Example output:
[
"9",
"27",
"76",
"3615738"
]
select
array_agg(duration_/1000 order by duration_ asc),
name_,
task_def_key_
from
act_hi_taskinst
where
duration_ is not null
and proc_def_id_ = '$PROCESS_ID'
group by
task_def_key_, name_
When i use the query below the values returned from the query are in the correct format, but the y-axis is not continuous anymore. It's like each boxplot gets it's own graph and they're just put on top of each other.
Example output:
[
"11 mons 15 days 19:49:44.774",
"11 mons 15 days 19:51:34.721",
"1 year 20 days 19:58:33.093",
"1 year 27 days 21:29:48.734",
"1 year 27 days 21:30:18.473"
]
select
array_agg(age(end_time_, start_time_) order by age(end_time_, start_time_) asc),
name_,
task_def_key_
from
act_hi_taskinst
where
duration_ is not null
and proc_def_id_ = '$PROCESS_ID'
group by
task_def_key_, name_
So my question is, how should i adjust my query so that the data can be interpreted by Plotly correctly. Or, how can i format the milliseconds to YY-MM-DD HH:MM:SS with Javascript inside the Plotly panel in Grafana (i don't think i can use any libraries there).
Thanks in advance for any responses guiding me in the right direction.

In highchart of column type and xaxis of datetime type showing more ticks for month data

When I plot column chart using highcharts with a month of data there is an extra tick getting added in the end.
I have data from 14th April to 14th May whereas x-axis shows 15th May there is no data for 15th May which is actually a future date.
https://jsfiddle.net/kamaldeka/Lex25cp3/
The same problem is not seen if I use the line/spline chart.
https://jsfiddle.net/kamaldeka/et21ykrx/
The data are real-time so I need to keep time.useUTC to false.
You need to set the pointPlacement property to 'on':
pointPlacement: string, number
Possible values: "on","between", number.
In a column chart, when pointPlacement is "on", the point will not
create any padding of the X axis. (...)
plotOptions: {
series: {
pointPlacement: 'on',
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/169j4q8o/
API Reference: https://api.highcharts.com/highcharts/series.line.pointPlacement

sorting heat map in dc.js

Using dc.js example (http://dc-js.github.io/dc.js/examples/heat.html) I have managed to bring the layout with a modified dataset. The problem I'm facing here is not knowing how to sort the values.
I have 3 fields in my dataset: Day_Name, Time, Values
I have my day names in the csv as "Sun", "Mon", "Tue", "Wed", etc.. and Time as 00:00, 01:00, 02:00, 03:00 till 23:00..
Which part of the code should I change to sort the values? Kindly suggest or advise me to correct my code.
Here is my code in a fiddle.
I changed my data set by having the day name as 1, 2, 3, 4, 5, 6, 7 for the week days and included a HTML code as a legend to it saying that 1 = Sunday, 2 = Monday and so on...
For now i'm going with this solution.
If i come across on how to sort the week_days, i'll update my answer.
On the heatmap, the keys are one axis (eg. Day_name) and the values are the other (Time)
You can use the Acccessor functions
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
and use ordering if needed

How to parse amcharts stock dates

How can we parse the amcharts stock dates?
Here example datas:
chartData1=[{
'date':'01-09-2010,00:05:05',
'value':1,
'volume':1
},{
'date':'01-10-2010,00:05:05',
'value':1,
'volume':1
},{
'date':'01-11-2010,00:05:05',
'value':1,
'volume':1
},{
'date':'02-07-2010,00:05:05',
'value':1,
'volume':1
},{
'date':'02-11-2010,00:05:05',
'value':1,
'volume':1
},{
'date':'03-07-2010,00:05:05',
'value':2,
'volume':2
},{
'date':'03-08-2010,00:05:05',
'value':2,
'volume':2
},{
'date':'04-08-2010,00:05:05',
'value':1,
'volume':1
},{
'date':'04-09-2010,00:05:05',
'value':1,
'volume':1
}];
When use it like this the dates from and to time period coming from like this:
From
29-10-1920
To
30-10-1920
How can I fix this error with parsing dates?
Thanks
Simply set chart.dataDateFormat = "DD-MM-YYYY,JJ:NN:SS"
I ran into the same problem as you and the only way I got around this was to use Javascript date objects instead of date strings.
Instead of writing
'date':'01-09-2010,00:05:05'
I write is as
'date': new Date(2010, 09, 01, 00, 05, 05, 00)
I looked through the amCharts website for their Stock Chart demos they only use date objects instead of date strings:
http://www.amcharts.com/tutorials/your-first-stock-chart/
It looks like the plugin doesn't parse date strings correctly. For regular amCharts it works fine with the chart.dataDateFormat option, but not for the Stock Charts in my testing.
First you have to set the dataformat for the category axis, as per your requirement it is set to following format:
chart.dataDateFormat = "DD-MM-YYYY,JJ:NN:SS"
Then you have to define whether you want to display your data daily, hourly, or every minute. Default setting is daily, for hourly you can use
categoryAxesSettings.minPeriod = "hh"
For more details visit https://www.amcharts.com/tutorials/formatting-dates/
In addition to setting the date format for the category axis, you also have to set parseDates for category Axis to true if you're using date objects for your categoryAxis.

HighCharts X-Axis Date Not Working (00:00)

I have a HighChart chart which contains a series which is made up of date/value pairs. Each date in the pairs is different. When there are data pairs which have dates which are not within the same week they dates are displayed as they should (mm/dd/yyyy) but when the data set contains only a view pairs which are all within the same week or days right next to each other instead of displaying dates in the (mm/dd/yyyy) format the chart switches to what looks like a time display and shows 00:00, 08:00, 16:00 instead of the full dates.
I already scoured the HighCharts forum and cannot find nor get an answer to this strange behaviour. Maybe someone here can help.
You can see the chart at http://jsfiddle.net/schleichermann/DkgVr/
This is a foible of the auto-scaling algorithm.
Basically, it starts with the smallest unit and stops looking too soon in some cases (like yours)1.
If you know, in advance, the timescale of interest, you can tweak the xAxis settings to compensate.
In this case adding:
day: '%b %e',
hour: '%b %e',
May be adequate. See: jsfiddle.net/DkgVr/4/ .
Or setting tickInterval: 24 * 3600 * 1000 (one day) might be good enough.
See: jsfiddle.net/DkgVr/5/ .
1 It should probably work largest to smallest. Consider making a feature-request or bug report.

Categories

Resources