Discusión sobre el artículo "Gráficos y diagramas en HTML" - página 2

Nuevo comentario
 

Este es el código 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: []
        };
                        
                        
/*
 Cargar los datos del archivo CSV. */            

                        
$.get('data.csv', function(data) {
                                
 // Dividir las líneas
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // la línea de cabecera contiene categorías
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// el resto de las líneas contienen datos con su nombre en la primera posición
                
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>

Y aquí está el archivo de datos 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

No adjunto los archivos de la librería.

 

Gracias por la "ayuda": como siempre, nadie ayudó, lo resolví yo mismo :-)

Pregunta al autor, ¿hay algo similar para los gráficos 3D?

 

Sí. La representación gráfica de la información en MT5 es un poco floja. Y cuántas cosas interesantes se pueden dibujar!: gráficos de correlaciones de todo y de nada, visualización dinámica de la tasa actual a través de diferentes transformaciones wavelet, 3D y quién sabe qué más. ¡Me gustaría hacer alguna pantalla brillante seiver en semi-caótica correlaciones de los residuos de series de diferentes tasas!

Los gráficos del probador de estrategias son especialmente malos. Incluso la exportación de los resultados del probador a un archivo de texto no se hace en absoluto.

Por cierto, si desea exportar los datos a un archivo de todos modos, es mejor no inventar sus propios gráficos, sino utilizar paquetes ya hechos como vinnigraphics, sigmaplot, origine o excel.

Me ha gustado especialmente la corona del artículo: la función de distribución de probabilidad. La gente está intentando hacer un estudio razonable del curso. Es bueno verlo.

 

Gracias por este excelente script.

¿Sería posible que este script funcionara con los resultados de las pruebas del probador de estrategias (en lugar del historial de operaciones del servidor de operaciones)?

Esto sería de gran ayuda para interpretar los resultados de las pruebas.

Gracias

Gino.

 

No consigo averiguar dónde puedo descargar los archivos que supuestamente se adjuntan al artículo. Los nombres de los archivos están ahí, pero no hay enlaces en ellos:

Archivos

JS_Lib.zip - archivos de las bibliotecas highcharts.js y jquery.min.js
Test.zip - archivos highcharts.js, jquery.min.js y Test_01.htm
Example1.zip - archivos highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 y exdat.txt
Example2.zip - archivos Example2.htm y exdat.txt
Report.zip - archivos ProfitReport.htm y data.txt
ProfitReport.mq5 - Script para recopilar estadísticas y crear el archivo data.txt.

 
En mi trabajo como programador web utilizo la biblioteca FusionCharts.
Me gusta la sencilla instalación de tablas y gráficos en una plantilla.
1. Conecto la biblioteca Java Script FusionCharts.
2. Creo un DIV para mostrar el gráfico (id="chart_container").
3. Inserto los datos del gráfico en el array chartData.
4. 4. Edito el array chartConfig. Este es el diseño y los parámetros del gráfico.
5. 5. Llamo a FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); });
Código detallado y demostración del ejemplo: 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
Nuevo comentario