amCharts convertir unixtime en date lisible

Question

Je souhaite afficher un diagramme de zone empilé à l'aide d'amCharts, tout autre élément ayant fonctionné, mais la date n'a pas été correctement analysée.

"dataProvider": [{ 
    "date": 1482192000, 
    "cars": 1587, 
    "motorcycles": 650, 
    "bicycles": 121 
} 

propriété nommée Date sur le paquet de données ci-dessus ne peuvent être convertis à ce jour lisible comme « JJ/MM/AAAA »

Enfin, le tableau doit montrer les 30 jours du mois choisi.
Voici mon CodePen:
CodePen Stacked Area Chart

Answer 1

Vos données et la configuration sont incorrectes à la fois. Voici une liste de ce qui ne va pas et comment les corriger

1) dataDateFormat est utilisé pour analyse dates de chaînes, ne pas les formater. Comme vous utilisez des horodatages Unix, vous n'avez absolument pas besoin de cette propriété, vous pouvez donc la supprimer.

2) Vos horodatages unix doivent également être en millisecondes pour que cela fonctionne. Les secondes vous donneront des temps invalides.

3) Vos données doivent être triées par ordre croissant de date pour qu'elles soient rendues correctement. Vos données sont actuellement en ordre mélangé.

Quant à vos autres questions:

Pour formater vos dates, vous devez régler le dateFormats array dans vos CategoryAxis aux chaînes de format désiré comme described here. Pour JJ/MM/AAAA:

"categoryAxis": { 
    // other properties omitted: 
    "dateFormats": [{period:'fff',format:'JJ:NN:SS'}, 
    {period:'ss',format:'JJ:NN:SS'}, 
    {period:'mm',format:'JJ:NN'}, 
    {period:'hh',format:'JJ:NN'}, 
    {period:'DD',format:'DD/MM/YYYY'}, //you may need to change the entries for 'WW' and 'MM' as well, depending on the amount of visible data 
    {period:'WW',format:'MMM DD'}, 
    {period:'MM',format:'MMM'}, 
    {period:'YYYY',format:'YYYY'}] 
    // ... 
} 

Pour zoomer automatiquement sur la charge graphique, vous pouvez ajouter un événement rendered similaire à la façon dont les démos sur le site Web de AmCharts fait et appeler l'une des méthodes de zoom, par exemple:

"listeners": [{ 
    "event": "rendered", 
    "method": function(e) { 
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
    e.chart.zoomToDates(new Date(2017, 1, 1), new Date(2017, 1, 15)); 
    } 
}] 

Voici un codepen mis à jour avec tous les correctifs susmentionnés here.