web-dev-qa-db-fra.com

Comment utiliser les dates sur l'axe X avec l'API Google Chart?

Existe-t-il un moyen de tracer un graphique avec l'API Google Chart afin que les valeurs de l'axe des X correspondent aux jours du mois?

J'ai des points de données qui ne sont pas fournis avec la même fréquence. Par exemple:

Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500

Je veux faire un graphique qui séparera chaque point de données avec la distance relative basée sur le temps pendant un mois. Cela peut être fait avec Excel, mais comment puis-je calculer et l'afficher avec Google chart?

D'autres solutions gratuites similaires à Google chart ou à une bibliothèque gratuite pouvant être utilisée avec ASP.NET sont également les bienvenues.

javascriptasp.netvb.netgoogle-visualization
36
jvanderh

UPDATE Ceci est désormais pris en charge directement dans l'API de graphique à l'aide de la fonctionnalité "graphique annoté" des graphiques avancés - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

Je l'ai fait sur mon Statistiques de la base de données ReHash graphique (même s’il s’est avéré que les dates sont espacées de manière égale, cela ne montre donc pas qu’il le fait).

Premièrement, vous voulez obtenir votre période globale, qui sera analogue à la largeur totale de votre graphique. Pour ce faire, nous soustrayons la date la plus ancienne de la dernière. Je préfère utiliser les horodatages Unix-Epoch car ils sont entiers et faciles à comparer de cette façon, mais vous pouvez facilement calculer le nombre de secondes, etc.

Maintenant, parcourez vos données. Pour chaque date, nous voulons le percentile dans la période globale depuis le début (c’est-à-dire que la date la plus ancienne est 0 et la plus récente est 100). Pour chaque date, vous souhaitez d’abord calculer la distance de la date actuelle à partir de la date la plus ancienne de l’ensemble de données. Essentiellement, "à quelle distance du début". Donc, soustrayez la date la plus ancienne de la date actuelle. Ensuite, pour trouver le centile, nous divisons la distance de la date actuelle par la période globale, puis multiplions par 100 et tronquons ou arrondissons toute décimale pour donner notre intégrale x-coordonnée.

Et c'est aussi simple que ça! Vos valeurs x seront comprises entre 0 (le côté gauche du graphique) et 100 (le côté droit) et chaque point de données se situera à une distance du début respective de sa distance temporelle réelle.

Si vous avez des questions, n'hésitez pas à les poser! Je peux poster pesudocode ou PHP si vous le souhaitez.

20
defines

J'ai eu le même problème, trouvé nuages ​​de points sur Google Charts, il fait exactement ce qui est nécessaire.

Voici le code avec lequel je me suis retrouvé (a pris le leur comme point de départ):

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Quantity');
    data.addRow([new Date(2011, 0, 1), 10])
    data.addRow([new Date(2011, 1, 1), 15])
    data.addRow([new Date(2011, 3, 1), 40])
    data.addRow([new Date(2011, 6, 1), 50])


    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById('visualization'));
    chart.draw(data, {title: 'Test',
                      width: 600, height: 400,
                      vAxis: {title: "cr", titleTextStyle: {color: "green"}},
                      hAxis: {title: "time", titleTextStyle: {color: "green"}},
                      lineWidth: 1}
              );
}

Notez qu’ils semblent compter les mois à partir de 0, c’est-à-dire que janvier est 0, février est 1, ..., décembre est 11.

11
egor83

Il semble que vous puissiez maintenant le faire avec des graphiques avancés:

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

8
Brian Adkins

Cela peut être fait facilement avec les cartes Google, mais votre application doit calculer les étiquettes.

Le paramètre chxl chart x label est celui dont vous avez besoin. L'exemple suivant identifie un axe des ordonnées avec des nombres sur 50 étapes et le bas avec des dates

chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009
1
David Snabel-Caunt

Hai. Je pense dans le même sens que vous. Je peux prévoir des problèmes où les étiquettes se superposent et ne penser qu'à deux approches.

1) Déterminez combien de caractères dans chaque date, en fonction du format (lundi/mardi, lundi/mardi, 1er janvier/1er février, 1er janvier, 29 février, 14 février 2010, etc.), puis calculez le nombre d'étiquettes. vous pouvez vous adapter à la largeur de votre graphique (ce qui peut être complexe, impliquant une largeur de caractère en pixels (plus facile pour les polices fixes), ou juste quelques essais et erreurs). 

Bien entendu, vos étiquettes pourraient s’aligner directement sur les données.

2) utilisez plusieurs étiquettes d'axe X et placez vos dates verticalement.

0
Mawg