Discussione sull’articolo "Grafici e diagrammi in HTML" - pagina 2

Nuovo commento
 

Ecco il codice di 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: []
        };
                        
                        
/*
 Caricare i dati dal file CSV. */            

                        
$.get('data.csv', function(data) {
                                
 // Dividere le linee
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // la riga di intestazione contiene categorie
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// il resto delle righe contiene dati con il loro nome nella prima posizione
                
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>

Ed ecco il file dati 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

Non allego i file di libreria.

 

Grazie per l'"aiuto": come al solito, nessuno mi ha aiutato, l'ho capito da solo :-)

Domanda all'autore: esiste qualcosa di simile per i grafici 3D?

 

Sì. La rappresentazione grafica delle informazioni nella MT5 è un po' debole. E quante cose interessanti si possono disegnare!: grafici di correlazioni di tutto e di niente, visualizzazione dinamica del tasso corrente attraverso diverse trasformazioni wavelet, 3D e chissà cos'altro. Mi piacerebbe fare qualche schermata luminosa sulle correlazioni semi-caotiche dei residui di serie di tassi diversi!

La grafica del tester di strategia è particolarmente scadente. Anche l'esportazione dei risultati del tester in un file di testo non avviene affatto.

A proposito, se volete comunque esportare i dati in un file, è meglio non inventare i vostri grafici, ma usare pacchetti già pronti come vinnigraphics, sigmaplot, origine o excel.

Mi ha fatto particolarmente piacere la corona dell'articolo: la funzione di distribuzione delle probabilità. Le persone stanno cercando di fare uno studio ragionevole del corso. È bello vedere.

 

Grazie per questo eccellente script!

Sarebbe possibile far funzionare questo script sui risultati dei test del tester della strategia (invece che sulla cronologia delle operazioni sul server di trading)?

Questo sarebbe di grande aiuto nell'interpretazione dei risultati dei test.

Grazie

Gino.

 

Non riesco a capire dove posso scaricare i file che sono presumibilmente allegati all'articolo? I nomi dei file ci sono, ma non ci sono link:

File

JS_Lib.zip - file delle librerie highcharts.js e jquery.min.js
Test.zip - file highcharts.js, jquery.min.js e Test_01.htm
Example1.zip - file highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 e exdat.txt
Example2.zip - file Example2.htm e exdat.txt
Report.zip - file ProfitReport.htm e data.txt
ProfitReport.mq5 - Script per la raccolta di statistiche e la creazione del file data.txt.

 
Nel mio lavoro di programmatore web utilizzo la libreria FusionCharts.
Mi piace la semplicità di installazione di grafici e diagrammi su un modello.
1. Collego la libreria Java Script FusionCharts.
2. Creo un DIV per visualizzare il grafico (id="chart_container").
3. Inserisco i dati del grafico nell'array chartData.
4. Modifico l'array chartConfig. Si tratta del design e dei parametri del grafico.
5. Richiamo FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); });
Codice dettagliato e dimostrazione dell'esempio: 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
Nuovo commento