Discussion of article "Charts and diagrams in HTML" - page 2

New comment
 

Here's the code for 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: []
        };
                        
                        
/*
 Load the data from the CSV file. */            

                        
$.get('data.csv', function(data) {
                                
 // Split the lines
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // header line contains categories
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// the rest of the lines contain data with their name in the first 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>

And here is the data file 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

I don't attach the library files.

 

Thanks for the "help": as usual, nobody helped, I figured it out myself :-)

Question to the author, is there something similar for 3D charts?

 

Yeah. The graphical representation of information in MT5 is a bit weak. And how many interesting things can be drawn!: graphs of correlations of everything and anything, dynamic display of the current rate through different wavelet transformations, 3D and who knows what else. I would like to make some bright screen seiver on semi-chaotic correlations of residuals of series of different rates!

Graphics in the strategy tester are especially bad. Even exporting the tester results to a text file is not done at all.

By the way, if you want to export data to a file anyway, it is better not to invent your own graphics, but to use ready-made packages such as vinnigraphics, sigmaplot, origine or excel.

I was especially pleased with the crown of the article - the probability distribution function. People are trying to make a reasonable study of the course. It is good to see.

 

Thank you for this excellent script ! 

Would it be possible to have this script work on the test results of the strategy tester (instead of the deal history on the trade server) ?

This would be a great help in interpreting test results.

Thanks

Gino. 

 

I can't figure out where I can download the files that are supposedly attached to the article? The file names are there, but there are no links in them:

Files

JS_Lib.zip - files of highcharts.js and jquery.min.js libraries
Test.zip - files highcharts.js, jquery.min.js and Test_01.htm
Example1.zip - files highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 and exdat.txt
Example2.zip - files Example2.htm and exdat.txt
Report.zip - files ProfitReport.htm and data.txt
ProfitReport.mq5 - Script for collecting statistics and creating data.txt file.

 
In my work as a web programmer I use the FusionCharts library.
I like the simple installation of charts and graphs on a template.
1. I connect Java Script library FusionCharts.
2. I create a DIV to display the chart (id="chart_container").
3. I insert chart data into the chartData array.
4. I edit the chartConfig array. This is the design and parameters of the chart.
5. I call FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); });
Detailed code and demonstration of the example: 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
New comment