L'utilisation de dates dans l'axe des X avec Google chart API?

Question

Est-il possible de tracer un graphique avec Google chart API de sorte que l'axe des abscisses les valeurs sont des jours dans un mois?

J'ai des points de données ne sont pas fournies 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 tableau distinct pour 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 afficher avec Google graphique?

D'autres solutions libres similaire à Google de graphique ou d'une bibliothèque libre qui peut être utilisé avec ASP.NET sont également les bienvenus.

Answer 1

Mise à JOUR de Ce qui est maintenant pris en charge directement dans le Tableau de l'API à l'aide de l'avancée des graphiques ", annoté du montage" fonction - http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html

Je l'ai fait sur mon Resucée de la Base de données Statistiques graphique (même si les dates s'est avéré être espacés uniformément, de sorte qu'il ne correspond pas exactement à démontrer qu'il fait).

Tout d'abord, vous voulez obtenir votre période globale, qui sera analogue à l'ensemble de la largeur de votre tableau. Pour ce faire, nous soustrayons la première date de la dernière. Je préfère utiliser Unix époque des horodateurs, comme ils sont des nombres entiers et facile à comparer de cette façon, mais vous pouvez facilement calculer le nombre de secondes, etc.

Maintenant, boucle par le biais de vos données. Pour chaque date, nous voulons que le centile dans l'ensemble de cette période que la date est depuis le début (c'est à dire la date la plus ancienne est de 0, la dernière est de 100). Pour chaque date, vous devez d'abord calculer la distance de la date de la première date dans l'ensemble de données. Essentiellement, "où en sommes-nous depuis le début". Donc, soustraire la date la plus rapprochée de la date actuelle. Alors, pour trouver la percentile, on divise la distance de la date par la période globale, puis multipliez par 100 et tronquer ou le tour de toutes les décimales de donner à nos intégrale x-coordonner.

Et c'est aussi simple que ça! Votre x-valeurs vont de 0 (le côté gauche de la carte) à 100 (le côté droit) et chaque point de données sera se trouvent à une distance à partir du début respectifs de il est vrai temporelle de la distance.

Si vous avez des questions, n'hésitez pas à demander! Je peux poster pesudocode ou PHP, si désiré.

Answer 2

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

Voici le code que j'ai fini avec (a pris la leur en tant que 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 mois à partir de 0, c'est à dire en janvier est de 0, février 1, ..., décembre est de 11.

Answer 3

Il ressemble, vous pouvez maintenant le faire avec des graphes avancés:

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

Answer 4

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

Le chxl graphique x paramètre d'étiquette est celui dont vous avez besoin. L'exemple suivant des étiquettes d'un axe y avec les numéros de 50 étapes, et le fond avec les dates

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

Answer 5

Hai. Je suis en train de penser à la même chose que vous. Je peux prévoir les problèmes où les étiquettes écraser les uns les autres, et peut penser qu'à deux approches.

1) déterminer le nombre de caractères dans chaque date, selon le format (lun/mar, lundi/mardi, 1er janvier, 1er février, 1er janvier, 29 février, 14/2/2010 ..etc), puis de calculer le nombre d'étiquettes que vous pouvez être sur votre tableau de largeur (ce qui pourrait obtenir gnarly, impliquant char largeur en pixels (plus facile pour les polices à chasse fixe), ou juste quelques essais et erreurs).

Bien sûr, vos étiquettes sont susceptibles de correspondre directement avec toutes les données.

2) l'utilisation de plusieurs X-étiquettes de l'axe et place vos dates verticalement.