Discussion :

[megamario]

Bonjour à tous,

J'ai un souci dans l'utilisation des données avec LiveCharts en C# WPF.

J'ai entre 1 et 4 courbes à afficher.

Les données sont composées d'une mesure et un temps DateTime sur l'Axe X.

J'ai plusieurs problèmes dans la compréhension de LiveCharts.

1)Avoir un axe X qui indique un DateTime et qui l'affiche sous la forme "dd/MM/yyy HH:mm:ss". Affichage vertical et éventuellement un espacement entre chaque étiquette si besoin, car cela peut être sur plusieurs jours, à raison d'environ une mesure toute les 10 secondes pour chaque courbe.

2)Mes mesures, suivant les appareils connectés, elles sont décalées ou pas dans le temps. C'est-à-dire que : J'ai l'un des appareils qui m'envoie toutes les mesures à l'instant t en même temps, donc là pas de souci particulier, mais j'ai d'autres appareils qui sont décalés, exemple: 1er mesure de la Courbe 1 l'instant t, puis la 1er de la courbe 2 à t + quelques secondes, ensuite 10 secondes après (env, mais cela peut être plus s'il n'a pas de mesure à effectuer) cela recommence.

l'Idéal serait aussi de mettre en place un zoom sur l'axe X quand il y a beaucoup de mesures.

Je n'ai pas vraiment de code à vous donner, car j'avais réussi à avoir les courbes correct malgré le décalage de données sur l'axe X (point 2), mais mon PC a planté, carte mère HS et je n'ai pas eu le temps de sauvegarder ce test. Je reprends le code ce matin et je vais rechercher à refaire cette partie que je posterais immédiatement si je la retrouve. Par contre, malgré le passage de Datetime en X, l'axe X n'indiquait pas les heures au bon format.

J'ai vu qu'il y avait un LiveCharts 2, mais je n'ai pas essayé.

Je m'y remets immédiatement. Merci de votre aide.

[megamario]

J'ai trouvé quelques chose de pas trop mal.

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" >
            <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
45
 
  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");
        };

Je vais rechercher le Zoom, mais il me semble que ce n'était pas compliqué.


[EDIT]
j'ai réussi a ajouté un zoom sur l'axe X, avec simplement la déclaration de Zoom="X";

Code :

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

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

Toutefois c'est difficile à gérer et il n'y pas de slide horizontal. Il faut aussi que je trouve un moyen de le réinitialiser.

[micka132]

J'ai pas de réponse à te fournir, mais tu sembles être sur la version 1 (v0) de livechart.
Il y a la 2 en cours, si tu en as la possibilité je te conseille de passer directement dessus car à priori il n'y aura plus d'évolution de la 1, et que ça ne sera pas vraiment rétrocompatible.

Pour le zoom par exemple ici c'est "ZoomMode" au lieux de "Zoom"
https://lvcharts.com/docs/WPF/2.0.0-...les.lines.zoom

[megamario]

J'ai pas de réponse à te fournir, mais tu sembles être sur la version 1 (v0) de livechart.
Il y a la 2 en cours, si tu en as la possibilité je te conseille de passer directement dessus car à priori il n'y aura plus d'évolution de la 1, et que ça ne sera pas vraiment rétrocompatible.

Pour le zoom par exemple ici c'est "ZoomMode" au lieux de "Zoom"
https://lvcharts.com/docs/WPF/2.0.0-...les.lines.zoom

Bonjour micka,

Effectivement j'ai vu que livechart v2 était en cours, n'étant pas diffusé encore sur la plateforme NuGet, je ne l'avais pas vu.

Concernant le slide horizontal, sur la v1, je ne l'avais pas vu non plus, mais en maintenant la souri sur le graphique cela fonctionne, pas très fluide, mais cela va mieux en ajoutant DisableAnimations="True".

Pour la réinitialisation du zoom, j'ai simplement ajouter un nom à l'axe X et Y et dans le code behind

Code :

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

1
2
3
4
5
6
7
        public void ResetZoomOnClick()
        {
            X.MinValue = double.NaN;
            X.MaxValue = double.NaN;
            Y.MinValue = double.NaN;
            Y.MaxValue = double.NaN;
        }

X et Y étant les noms que je leur est donné.
J'ai essayé en ajoutant XminValue="{Binding X}" etc. et le code dans le DataContext, mais bizarrement cela ne fonctionnait pas, les proprety sont bien appelées après l'appel de PropertyChanged, mais je n'est pas de changement sur le graphique. Le mettre dans le code behind est un peu gênant, mais pas bien grave, cela ne respecte pas le MVVM, mais cela fonctionne.