Discussion :

[megamario]

Bonjour,

Dans une demande précédente je cherchais de l'aide pour créer des courbes avec un axe en DateTime et dont les mesures de chaque courbes n'étaient pas (forcement) sur le même point de l'axe X.

Problème en grand partie résolue, et qui conviens pour le moment. Mais l'on viens de me demander s'il était possible d'ajouter des points sur le haut du graphique (par exemple), lié aussi avec la période de temps de l'axe X, mais la données n'est pas une valeur mais un événement.

Explication événement:
Lorsque je récupère les données, j'ai aussi des événements qui sont inclus par exemple: allumage, extinction de l'appareil, reset des données etc..
Pour le moment j'ai ajouté des évènement dans une Listview, mais l'idéal serait donc de les visualiser sur le graph afin de comprendre pourquoi il y a des irrégularités (normale ou pas du coup) dans les courbes.

Autre point l'espacement:
Comme je vous est indiqué au dessus, j'ai la possibilité d'avoir des événements tel que l'arrêt ou la mise en marche de l'appareil de mesure. L'axe des X étant un DateTime, j'ai des courbes qui peuvent être coupé puisque aucune mesures, mais actuellement ce n'est pas le cas puisque la liaison se créer entre tous les points. Est-il possible de couper une LineSerie?


Voici un exemple de test qui m'a permis de faire mon code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
        <lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" Zoom="X">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="Date" LabelFormatter="{Binding AxisXLabelFormatter}" LabelsRotation="140"/>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="Voltage (U)"/>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 public SeriesCollection SeriesCollection { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            // Création des données de la courbe 1
            var values1 = new ChartValues<ObservablePoint>
            {
                new ObservablePoint(DateTime.ParseExact("08/05/2023 15:01:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),58.45),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:20:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),70.14),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:30:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),80.50),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:58:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),89.5),
                new ObservablePoint(DateTime.ParseExact("08/05/2023 18:01:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),102.10),
            };
            // Création des données de la courbe 2
            var values2 = new ChartValues<ObservablePoint>
            {
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:10:15", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),8.5),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:22:45", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),10.54),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:43:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(), 12.12),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 16:08:10", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),9.1),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 17:18:05", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),2.10),
            };
 
            // Ajout des courbes au SeriesCollection
            SeriesCollection = new SeriesCollection
            {
                new LineSeries
                {
                    Title = "Courbe 1",
                    Values = values1
                },
                new LineSeries
                {
                    Title = "Courbe 2",
                    Values = values2
                }
            };
            DataContext = this;
        }
        public Func<double, string> AxisXLabelFormatter => value =>
        {
            var dateTime = DateTime.FromOADate(value);
            return dateTime.ToString("dd/MM/yyyy HH:mm:ss");
        };

Ce n'est qu'un test avec des valeur en dur que j'ai adapté pour mes mesures, mais je n'est pas changer grand chose a part l'affectation des données dynamique et de 1 à 4 courbes.

Voici ce que cela me donne:



Voici ce que j'ai sur des mesures réel:





Sur ce graph vous pouvez constater 3 zones. J'ai fait en sorte de pouvoir afficher ces zones de façon indépendante:



Etc...

Mais voici ce que j'aimerais arriver à faire avec les évènements marqués:



Sa se serait vraiment top. Avoir les points en haut du graph (callé sur le Max Y) ici en vert. Et au passage de la souri l'indication de l'événement.
Ainsi que la suppression de la courbe lorsqu'il n'y a pas de mesure..

Pour information je suis encore sur la version 1 de liveCharts, j'ai vu qu'il y avait la version 2 après, s'il faut passé à la version 2 pour avoir ces fonctionnalité, cela attendra un peu et fera partie d'une évolution du logiciel. Sur le gitub de livecharts j'ai vue la zone "Line with missing points" ils indiquent juste qu'il faut que j'écrive un double.NaN. J'ai pas fait l'essaie encore, mais je suppose qu'il faut que j'ajoute cette valeur juste avant la reprise de la nouvelle donnée.

Merci de votre aide.

[micka132]

Il te suffit de placer un point juste apres la valeur ou tu veux la coupure (0.0001s ou 1 minute? ) et tu mets un double.NaN

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
            var values1 = new ChartValues<ObservablePoint>
            {
                new ObservablePoint(DateTime.ParseExact("08/05/2023 15:01:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),58.45),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:20:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),70.14),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:30:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),80.50), 
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:31:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(), double.NaN),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:58:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),89.5),
                new ObservablePoint(DateTime.ParseExact("08/05/2023 18:01:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),102.10),
            };
            // Création des données de la courbe 2
            var values2 = new ChartValues<ObservablePoint>
            {
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:10:15", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),8.5),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:22:45", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),10.54),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:43:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(), 12.12), 
                new ObservablePoint( DateTime.ParseExact("08/05/2023 15:44:01", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(), double.NaN),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 16:08:10", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),9.1),
                new ObservablePoint( DateTime.ParseExact("08/05/2023 17:18:05", "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture).ToOADate(),2.10),
            };

Pour les points en haut, j'imagine que tu peux essayer avec les VisualElements
(https://github.com/Live-Charts/Live-Charts/issues/305 )

Au passage il y a le datetimepoint au lieux de l'observablePoint, je ne sais pas trop la différence mais il doit y en avoir une !