Diskussion zum Artikel "Diagramme in HTML" - Seite 2

Neuer Kommentar
 

Hier ist der Code für 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: []
        };
                        
                        
/*
 Laden Sie die Daten aus der CSV-Datei. */            

                        
$.get('data.csv', function(data) {
                                
 // Aufteilung der Zeilen
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // Kopfzeile enthält Kategorien
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// die restlichen Zeilen enthalten Daten mit ihrem Namen an erster Stelle
                
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>

Und hier ist die Datendatei 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

Ich füge die Bibliotheksdateien nicht bei.

 

Danke für die "Hilfe": wie üblich hat mir niemand geholfen, ich habe es selbst herausgefunden :-)

Frage an den Autor, gibt es etwas Ähnliches für 3D-Diagramme?

 

Ja, das stimmt. Die grafische Darstellung von Informationen im MT5 ist ein bisschen schwach. Und wie viele interessante Dinge können gezeichnet werden: Graphen von Korrelationen von allem und jedem, dynamische Anzeige des aktuellen Kurses durch verschiedene Wavelet-Transformationen, 3D und wer weiß, was noch. Ich würde gerne einen hellen Bildschirm mit halbchaotischen Korrelationen von Residuen von Serien verschiedener Raten erstellen!

Die Grafiken im Strategietester sind besonders schlecht. Auch das Exportieren der Testergebnisse in eine Textdatei ist nicht möglich.

Übrigens, wenn Sie die Daten trotzdem in eine Datei exportieren wollen, ist es besser, keine eigenen Grafiken zu erfinden, sondern fertige Pakete wie vinnigraphics, sigmaplot, origine oder excel zu verwenden.

Besonders gut gefallen hat mir der krönende Abschluss des Artikels - die Wahrscheinlichkeitsverteilungsfunktion. Die Leute versuchen, eine vernünftige Studie über den Kurs zu erstellen. Das ist gut zu sehen.

 

Vielen Dank für dieses hervorragende Skript!

Wäre es möglich, dass dieses Skript mit den Testergebnissen des Strategietesters arbeitet (anstelle des Geschäftsverlaufs auf dem Handelsserver)?

Dies wäre eine große Hilfe bei der Interpretation der Testergebnisse.

Vielen Dank

Gino.

 

Ich kann nicht herausfinden, wo ich die Dateien herunterladen kann, die angeblich an den Artikel angehängt sind? Die Dateinamen sind zwar vorhanden, aber es gibt keine Links dazu:

Dateien

JS_Lib.zip - Dateien der Bibliotheken highcharts.js und jquery.min.js
Test.zip - Dateien highcharts.js, jquery.min.js und Test_01.htm
Example1.zip - Dateien highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 und exdat.txt
Example2.zip - Dateien Example2.htm und exdat.txt
Report.zip - Dateien ProfitReport.htm und data.txt
ProfitReport.mq5 - Skript zum Sammeln von Statistiken und Erstellen der Datei data.txt.

 
Bei meiner Arbeit als Webprogrammierer verwende ich die FusionCharts-Bibliothek.
Ich mag die einfache Installation von Diagrammen und Graphen auf einer Vorlage.
1. Ich verbinde die Java Script Bibliothek FusionCharts.
2. Ich erstelle ein DIV, um das Diagramm anzuzeigen (id="chart_container").
3. Ich füge die Diagrammdaten in das chartData-Array ein.
4. Ich bearbeite das chartConfig-Array. Dies ist das Design und die Parameter des Diagramms.
5. Ich rufe FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); });
Ausführlicher Code und Demonstration des Beispiels: http://profi.spage.me/jquery/creation-of-graphs-chart-and-diagrams-on-java-script
Creation of graphs, chart and diagrams on Java Script – profi.spage.me
  • profi.spage.me
Use Java Script Library FusionCharts to Create Graphs. Connect library FusionCharts to page. The documentation for this library can be found here. Create tag DIV id=”chart_container” for reload the chart. Create an array of data for the chart board. Create an array parameters for the chart design...
12
Neuer Kommentar