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.
Related
I am using #nivo/line react library for charts. Right now I have:
xScale={{
type: 'time',
format: '%m/%d/%Y %H:%M:%S %p',
precision: 'second',
}}
xFormat="time:%Y-%m-%d"
axisBottom={{
orient: 'bottom',
tickSize: 0,
tickPadding: 10,
tickRotation: 0,
tickValues: 'every 5 hours',
format: '%m/%d/%Y %H:%M:%S %p',
legendOffset: 100,
translateX: 25,
legendPosition: 'start',
}}
I want to remove the seconds view altogether. The docs are here: https://nivo.rocks/guides/axes#ticks but I am looking for something a bit more specific, or with examples. I know I can remove the milliseconds from my data but i was wondering if i could do the format without doing that. Does anyone have more info particularly for formatting? thanks
I was able to format it like:
format: '%m/%d/%Y %H:%M %p'. withOUT changing any of the other areas formatting. Changing more than one causes an error.
Now I need to create a new line within that.
Have you tried using a function for the format property? You can use it to transform the value any way you want.
I like the dates in my data to be Unix timestamps. That helps me stay flexible how to display them differently across components. The example below uses the Moment.js library to help with date formatting, but it works with anything really.
<ResponsiveLine
axisBottom={{
format: function(value){
return moment.unix(value).format('MMMM Do YYYY, h:mm');
}
}}
// other props
/>
It would help if you supplied a minimal working example (for instance a codepen or jsfiddle), because the solution depends on the structure of your data. And it will make finding the solution for your specific case easier and more fun :-)
Need some help please. I am trying to group my click stats by week using underscore and moment.
here is the code:
var groupedByWeekFbCompleted = _.groupBy($scope.facebookObjects, function(item) {
return moment(item.timeclicked,"YYYY-MM-DD").isoWeek();
});
here is a screen shot of the chart it gives me
When I print groupedByWeekFbCompleted to the console this is what I get
The data comes from the DB formatted like this
2016-06-18 14:03:56
I can not figure out what 24, 26, 27, 28 and 29 represent. My hope is to display the first day of the week as a label and then group by that week
If you will take that date string and parse it using moment you will get something like
moment("2016-11-08 14:03:56", "YYYY-MM-DD HH:mm:ss").isoWeek()
// 45
24, 26, 27, 28 and 29 are the week day, and the values are arrays of dates within that week
EDIT
To display a date string on your labels, you can use the .format method to parse the timestamp you get from the moment function, provide it the same format you used, like so:
moment("2016-11-08 14:03:56", "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm:ss")
// output: "2016-11-08 14:03:56"
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
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.
I'm working with the google chart and I've tried so many date formats and nothing is working. I'm ready to just use moments format feature, however I need the google date format for datetime.
Thanks!
The "datetime" data type requires a javascript Date object, eg:
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date and time');
data.addRow([new Date(2014, 5, 24, 11, 35, 24)]); // June 24 2014 11:35:24
If you are looking for the specs of the DateFormat patterns, they use a subset of the ICU Date Format pattern set.
What kind of chart are you trying to use from Google?
Check this out it has some example code, you can also play around in the "Visualization Playground"
https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline
https://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line
In that example they are using Javascript Date objects.
There's also a section on the Date Format (date or datetime):
https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline#Data_Format