As you can see here, on the X-Axis the dates are equidistant inspite of the date's varying in range.
[Right click->Open in a new tab if you can't see the pic]
But the X-axis distance is equivalent for both.
I want the X-axis to show value 0, when there's no value for a particular date..
Possible Solutions:
Is there any inbuilt parameter that am missing within AMcharts itself for this?
The other solution i had in mind was to input value 0 for date's having no corresponding data. [But this will lag the front
end]
The date format issue where:
For a date, 2014-11-12 10:15, the "dataDateFormat": "YYYY-MM-DD
JJ:NN" doesn't seem to work.
Tried to do it in milliseconds as well, didn't work.
Here's my fiddle
"dataProvider": [{
"date": "1343364300000",
"value": 1
},{
"date": "1343364900000",
"value": 5
},{
"date": "1343365500000",
"value": 10
},{
"date": "1343366100000",
"value": 15
},{
"date": "1343366100000",
"value": 8
},{
"date": "1343369520000",
"value": 24
},]
This is the chart am using for this.
http://www.amcharts.com/demos/date-based-data/#
For first point I think if you need to display 0 on empty data the only way is to implement your zero fill function on server side or JS.
I ran with same issue months ago and had to implement on my server side because there isn't any built in function in the library to do that.
Second point. Your date formatter is running ok, the problem is you have pan and zoom activated together. Then you are not able to zoom and see formatted dates because categoryAxis.parseDates groups them in Months. I would suggest you disable chartCursor.pan and put a min period on category axis of mm or ss.
Here's your modified fiddle.
Related
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.
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 can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted:
as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have more number of ticks than the actual values. What I'm looking for is something similar to this:http://nvd3.org/examples/line.html
However when i hover over these ticks they are misaligned as shown:
thats where the graph line should be and thats where the hovered tick shows the tooltip.but for some reason i dont get 7 ticks displayed instead gets 10 ticks displayed and all the hovered tooltips get misaligned.I also tried to force nvd3 to have specific # of ticks but didnt work.
chart2.xAxis
.ticks(7)
.tickFormat(function(d) {
return d3.time.format.utc('%b %d')(new Date(d));
});
here is the fiddle: http://jsfiddle.net/86hr7h1s/4/
I should ideally display 7 days and 7 ticks on the graph as oppose to duplicate days and 10 ticks on the graph.
Any ideas whats wrong and how to correct this?
EDIT::::::
I was able to fix my issue for 7 days with the below answer, using the tickValues() instead of ticks(). However, for large values, say display a graph data of 2 months, i'll have 30 data points. I still see that my graph ticks on hover dont align:
As you can see above the hover points still dont align with the vertical ticks. I dont want to force the ticksValues for more than 7 days on the graph.
Ay ideas how this could be achieved?
FYI:
I used this to make nvd3 display 7 values:
var datas = this.graphFunction(data);
chart2.xAxis.tickValues(datas[0].xAxisTickValues);
http://jsfiddle.net/86hr7h1s/5/
Thanks!
If you want to control the ticks precisely, you should use .tickValues() rather than ticks().
API Doc
I understand that the question was asked a long time ago, but I recently faced the same issue and found a good solution for it.
The reason of the issue with inaccurate ticks on the x-axis is the inaccurate internal numeric representation of dates that we want to display on the x-axis. As we can see here
https://nvd3.org/examples/line.html
when values on the x-axis are numbers, all ticks are displayed accurately. When we want to display dates on the x-axis, we also need to convert dates to some numeric representation. Typically dates are converted to the numeric representation via the Date.prototype.getTime() function and then labels are formatted using a code like this
chart.xAxis.tickFormat(d3.time.format('%b %Y')(date))
But the accuracy which the getTime() function provides to us is redundant in most cases. Assume we want to display only months and years on the x-axis and have a sorted list of dates where different items always have different moths but the item with a particular month may have any day and time. So, there may be a situation, where two adjacent list items have though have different months are very close to each other (for example, "Feb 28" and "Mar 1"). When we convert these list items to numeric representation using the getTime() function, the resulting list of big numbers remembers how far adjacent list items stand apart from each other. As the distance between adjacent chart points is always equal in NVD3 charts, NVD3 tries to fine-tune labels display to provide the info that some numbers are close to each other, but others are not. It leads to inaccurately displayed labels or even to duplicated labels if a chart has few points.
The solution is to omit redundant information about date and time when we convert dates to numbers. I needed to display only months and years on the x-axis and this code works great for me.
function getChartData(data) {
var values = data.map(function(val) {
return {
x: val.x.getUTCFullYear() * 12 + val.x.getUTCMonth(),
y: val.y
}
});
return [{
values: values,
key: 'date'
}];
}
function formatDate(numericValue) {
var year = Math.floor(numericValue / 12);
var month = numericValue % 12;
return shortMonthNames[month] + ' ' + year;
}
nv.addGraph(function() {
var data = [
...
{
x: new Date(2020, 2, 15, 15, 12),
y: 90
},
{
x: new Date(2020, 3, 3, 3, 54),
y: 50
},
...
];
var chart2 = nv.models.lineChart()
.showXAxis(true)
.showYAxis(true);
chart2.xAxis.tickFormat(formatDate);
d3.select('svg#svg')
.datum(getChartData(data))
.call(chart2);
return chart2;
});
Here we don't use the .tickValues() NVD3 function and so don't interfere to the default rendering engine, so the NVD3 lib can automatically add or remove axis labels when the viewport width is changed, and ticks and corresponding vertical lines are displayed exactly on the place where they should be.
Here is the full working example
http://jsfiddle.net/AlexLukin/0ra43td5/48/
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.
I have been using FLOT for many great things. Recently, i have needed to use it for time based plots. It worked perfect last month, but this month, i noticed that my last tick was smaller than the others. Also, i noticed that the tick label was not there.
Here is a JSFIDDLE of the issue for you to look at.
Due to the large amount of Javascript, i will keep all the code inside the Fiddle; unless the information is requested.
However, me and a friend thought of a simple workaround :
if(% 2 === 0) {
/*
Check if the data can be divided by 2
Repeat this for 3 as well (return the value and
plug it in the tickSize: [val, 'day'];
*/
}
The only drawback i see here if for months that have 31 days.
How would i fix this issue, or what did i do wrong that is causing this effect?
How about always making the chart 31 days wide (which means 30 days between first and last day and 15 ticks each 2 days wide)? You get that by setting the x axis maximum if your month does not have 31 days by itself:
xaxis: {
mode: "time",
timeformat: "%b %d",
tickSize: [2, 'day'],
max: 1398902400000
},
See this updated fiddle.