Discussão do artigo "Gráficos e diagramas em HTML" - página 2

Novo comentário
 

Aqui está o código para 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: []
        };
                        
                        
/*
 Carregue os dados do arquivo CSV. */            

                        
$.get('data.csv', function(data) {
                                
 // Dividir as linhas
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // a linha do cabeçalho contém categorias
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// o restante das linhas contém dados com seus nomes na primeira posição
                
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>

E aqui está o arquivo de dados 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

Não anexei os arquivos da biblioteca.

 

Obrigado pela "ajuda": como sempre, ninguém ajudou, eu mesmo descobri :-)

Pergunta para o autor: existe algo semelhante para gráficos 3D?

 

Sim. A representação gráfica das informações no MT5 é um pouco fraca. E quantas coisas interessantes podem ser desenhadas: gráficos de correlações de tudo e qualquer coisa, exibição dinâmica da taxa atual por meio de diferentes transformações de wavelet, 3D e sabe-se lá o que mais. Eu gostaria de fazer uma tela brilhante sobre correlações semi-caóticas de resíduos de séries de taxas diferentes!

Os gráficos no testador de estratégia são especialmente ruins. Nem mesmo a exportação dos resultados do testador para um arquivo de texto é feita.

A propósito, se quiser exportar dados para um arquivo de qualquer forma, é melhor não inventar seus próprios gráficos, mas usar pacotes prontos, como vinnigraphics, sigmaplot, origine ou excel.

Fiquei especialmente satisfeito com a coroa do artigo - a função de distribuição de probabilidade. As pessoas estão tentando fazer um estudo razoável do curso. É bom ver isso.

 

Obrigado por esse excelente script!

Seria possível fazer com que esse script funcionasse nos resultados de teste do testador de estratégia (em vez do histórico de negociações no servidor de negociação)?

Isso seria de grande ajuda para interpretar os resultados dos testes.

Obrigado pela atenção

Gino.

 

Não consigo descobrir onde posso baixar os arquivos que supostamente estão anexados ao artigo. Os nomes dos arquivos estão lá, mas não há links neles:

Arquivos

JS_Lib.zip - arquivos das bibliotecas highcharts.js e jquery.min.js
Test.zip - arquivos highcharts.js, jquery.min.js e Test_01.htm
Example1.zip - arquivos highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 e exdat.txt
Example2.zip - arquivos Example2.htm e exdat.txt
Report.zip - arquivos ProfitReport.htm e data.txt
ProfitReport.mq5 - Script para coletar estatísticas e criar o arquivo data.txt.

 
Em meu trabalho como programador da Web, uso a biblioteca FusionCharts.
Gosto da instalação simples de tabelas e gráficos em um modelo.
1. Conecto a biblioteca Java Script FusionCharts.
2. Crio um DIV para exibir o gráfico (id="chart_container").
3. Insiro os dados do gráfico na matriz chartData.
4. Edito a matriz chartConfig. Esse é o design e os parâmetros do gráfico.
5. Chamo FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); });
Código detalhado e demonstração do exemplo: 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
Novo comentário