Highcharts - Date saut en série

Question

Alors je tire certaines données à partir d'une base de données et obtenir un timestamp UNIX et un certain nombre. Disons donc que N (nombre) a été vendu à D (date).

Il y a des jours manquants, comme le week-end. Je en ai besoin pour afficher toujours le jour, mais ne nécessitent pas de données. C'est un graphique en ligne.

1 Avril 2010, 50 vendu
2 avril 2010, 53 vendu
7 avril 2010, 10 vendu
(J'ai plus d'un 1000 dossiers couvrant plusieurs années un - donc je vais ajouter un zoom aussi)

Ainsi, le tableau devrait encore afficher 1-7 Avril, mais ont aucune donnée pour 3-6. (La ligne serait tout simplement passer de 2-7).

Toutes les idées sur la façon de le faire?

Merci, Josh

Answer 1

jeter un coup d'oeil ici: http://highcharts.com/ref/#series deuxième exemple de la propriété 'data'.

Vous avez juste à convertir la date de MySQL, le convertir en timestamp UNIX (UNIX_TIMESTAMP ()), puis multiplier par 1000 (JS a besoin de temps en microsecondes) ...

Answer 2

échelle de l'axe x de vos données lorsque vous créez le graphique pour ne compter les jours où vous avez au moins une vente, et juste vous assurer que votre axe est sensiblement marqué.

Cela signifierait Parcourant l'ensemble de votre ensemble de données et d'assurer qu'il a des numéros séquentiels. Alors peut-être pas terriblement efficace et pourrait certainement bénéficier de pré-traitement (une autre clé dans la base de données pour « jour de la vente » ou quelque chose).

Answer 3

Si possible, alors u peut me montrer votre code.

Peut être ce lien vous donnera un peu d'aide. démo pour spécifier null pour date donnée: http: //jsfiddle.net/highcharts/FGRtd/

Answer 4

Vous pouvez tracer vos données sous forme de données normale Y et utiliser un formatter sur l'axe x

dates = ['April 1 2010', 'April 2 2010', 'April 7 2010'];
numSold = [50, 53, 10];

chart = new Highcharts.Chart({
    series: [{
        type: 'line',
        data: numSold
    }],
    xAxis: {
        labels: {
            formatter: function() {
                var dateStr = dates[this.value];
                return dateStr;
            }
        }
    }
});