Discussion de l'article "Graphiques et diagrammes en HTML" - page 2

[Denis Kirichenko]

Voici le code de data-from-csv.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
        
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Highcharts Example</title>


<!-- 1. Add these JavaScript inclusions in the head of your page -->

 
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="highcharts.js" type="text/javascript"></script>
<!-- - -->              



<!-- 2. Add the JavaScript to initialize the chart on document ready -->
                
 
 <script type="text/javascript">
                

$(document).ready(function() {
        
  var options = {

        chart: {
          renderTo: 'container',
          defaultSeriesType: 'column'
        },
        title: {
          text: 'Autocorrelation'
        },
        xAxis: {

          categories: []
                                
        },
        yAxis: {
          title: {
            text: 'Units'
          }
        },
        series: []
        };
                        
                        
/*
 Charger les données du fichier CSV. */            

                        
$.get('data.csv', function(data) {
                                
 // Séparer les lignes
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // la ligne d'en-tête contient des catégories
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// le reste des lignes contient des données dont le nom figure en première position
                
else {
                                                
var series = { 
                                                        
data: []
                                                
};
                                                
$.each(items, function(itemNo, item) {
                
if (itemNo == 0) {
                
series.name = item;
                                                        
} else {

series.data.push(parseFloat(item));
        
}
                                                
});
                                        
options.series.push(series);

                                        
}
                                        
                                
});
                                
                                
var chart = new Highcharts.Chart(options);
                        
});
});
                
</script>
                
        
</head>
        <body>
                
                
<!-- 3. Add the container -->
                
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        
</body>
</html>

Et voici le fichier de données data.csv :

Categories,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21
ACF,0.0048,-0.0084,-0.0094,-0.0080,-0.0037,-0.0067,0.0052,-0.0018,0.0066,0.0267,-0.0210,0.0013,0.0032,-0.0027,0.0207,-0.0059,-0.0131,0.0160,0.0250,-0.0077
Bounds,0.0073,-0.0073,-0.0073,-0.0073,-0.0073,-0.0073,0.0073,-0.0073,0.0073,0.0073,-0.0073,0.0073,0.0073,-0.0073,0.0073,-0.0073,-0.0073,0.0073,0.0073,-0.0073

Je ne joins pas les fichiers de la bibliothèque.

[Denis Kirichenko]

Merci pour l'"aide" : comme d'habitude, personne n'a aidé, j'ai trouvé tout seul :-)

Question à l'auteur : existe-t-il quelque chose de similaire pour les graphiques 3D ?

[Гребенев Вячеслав]

Oui. La représentation graphique des informations dans MT5 est un peu faible. Et combien de choses intéressantes peuvent être dessinées : des graphiques de corrélations de tout et n'importe quoi, l'affichage dynamique du taux actuel à travers différentes transformations d'ondelettes, la 3D et qui sait quoi d'autre. J'aimerais faire un écran lumineux sur les corrélations semi-chaotiques des résidus de séries de taux différents !

Les graphiques du testeur de stratégie sont particulièrement mauvais. Même l'exportation des résultats du testeur vers un fichier texte ne se fait pas du tout.

D'ailleurs, si vous voulez quand même exporter des données vers un fichier, il vaut mieux ne pas inventer vos propres graphiques, mais utiliser des logiciels prêts à l'emploi tels que vinnigraphics, sigmaplot, origine ou excel.

J'ai été particulièrement satisfait de la couronne de l'article - la fonction de distribution de probabilité. Les gens essaient de faire une étude raisonnable du cours. Cela fait plaisir à voir.

[gino]

Merci pour cet excellent script !

Serait-il possible de faire fonctionner ce script sur les résultats de test du testeur de stratégie (au lieu de l'historique des transactions sur le serveur commercial) ?

Cela nous aiderait beaucoup à interpréter les résultats des tests.

Merci beaucoup.

Gino.

[Иван]

Je n'arrive pas à savoir où je peux télécharger les fichiers qui sont censés être joints à l'article. Les noms des fichiers sont là, mais il n'y a pas de liens :

Fichiers

JS_Lib.zip - fichiers des bibliothèques highcharts.js et jquery.min.js
Test.zip - fichiers highcharts.js, jquery.min.js et Test_01.htm
Example1.zip - fichiers highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 et exdat.txt
Example2.zip - fichiers Example2.htm et exdat.txt
Report.zip - fichiers ProfitReport.htm et data.txt
ProfitReport.mq5 - Script pour la collecte de statistiques et la création d'un fichier data.txt.

[Алексей Ванин]

Dans mon travail de programmeur web, j'utilise la bibliothèque FusionCharts.

J'aime la simplicité d'installation des diagrammes et des graphiques sur un modèle.

1. Je connecte la bibliothèque Java Script FusionCharts.

2. Je crée un DIV pour afficher le graphique (id="chart_container").

3. J'insère les données du graphique dans le tableau chartData.

4. Je modifie le tableau chartConfig. Il s'agit de la conception et des paramètres du graphique.

5. J'appelle FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render() ; }) ;

Code détaillé et démonstration de l'exemple : http://profi.spage.me/jquery/creation-of-graphs-chart-and-diagrams-on-java-script