Google折线图不起作用

Question

the following code writes data to the screen and this needs to be plotted in a graph. The graph should be similar to the attachment So, when the array indicator is calculated (line 112), it contains 3 subarrays: one with a date, one with normalised prices and one with the mRS values. The array indicator is also calculated 3 times: one for AAL, one for ABF and one for ADM. So I need 3 graphs displayed, one for each symbol. So essentially the multilinechart code needs to be integrated into the transpose code whereby 3 line charts are generated, namely after the calculation of the indicator array

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

var prices = [['Date', 'AAL', 'ABF', 'ADM'],
['2016-12-01', 1207.5, 2514.55, 1847.00],
['2016-11-01', 1123.5, 2475.00, 1901.00],
['2016-10-01', 1131, 2462.00, 1917.00],
['2016-09-01', 967.6, 2600.00, 2049.00],
['2016-08-01', 779.8, 3041, 2013.36],
['2016-07-01', 830.5, 2691, 2125.32],
['2016-06-01', 726.9, 2719, 1993.72],
['2016-05-02', 600.1, 2933.644, 1933.282],
['2016-04-01', 763.4, 3053.222, 1792.365],
['2016-03-01', 552.1, 3337.219, 1913.98],
['2016-02-01', 480.25, 3394.019, 1671.716],
['2016-01-04', 277.45, 3138.919, 1712.254],
['2015-12-01', 299.45, 3330.244, 1601.257],
['2015-11-02', 408.65, 3508.387, 1564.58],
['2015-10-01', 546.6, 3418.352, 1556.858],
['2015-09-01', 550.9, 3304.572, 1449.722],
['2015-08-03', 741, 3168.036, 1472.785],
['2015-07-01', 789.923, 3189.803, 1407.223],
['2015-06-01', 894.409, 2840.547, 1317.905],
['2015-05-01', 999.089, 2985.838, 1414.824],
['2015-04-01', 1076.017, 2817.219, 1458.897],
['2015-03-02', 985.457, 2778.762, 1432.678],
['2015-02-02', 1119.873, 3081.488, 1381.177],
['2015-01-01', 1030.099, 3059.794, 1355.894],
['2014-12-01', 1111.081, 3109.098, 1237.909],
['2014-11-03', 1223.068, 3134.425, 1161.125],
['2014-10-01', 1218.441, 2695.038, 1250.082],
['2014-09-01', 1280.913, 2621.644, 1201.39],
['2014-08-01', 1416.038, 2801.704, 1227.186],
['2014-07-01', 1461.646, 2718.524, 1339.334],
['2014-06-02', 1307.163, 2983.722, 1423.904],
['2014-05-01', 1332.301, 2943.89, 1340.253],
['2014-04-01', 1446.106, 2898.044, 1285.099],
['2014-03-03', 1395.374, 2712.71, 1290.464],
['2014-02-03', 1369.37, 2924.382, 1296.79],
['2014-01-01', 1284.4, 2648.331, 1305.827],
['2013-12-02', 1180.646, 2384.961, 1183.829],
['2013-11-01', 1206.584, 2212.07, 1123.282],
['2013-10-01', 1328.227, 2186.987, 1155.815],
['2013-09-02', 1357.743, 1809.787, 1114.245],
['2013-08-01', 1322.413, 1779.881, 1119.517],
['2013-07-01', 1242.815, 1875.387, 1245.585],
['2013-06-03', 1117.474, 1673.764, 1178.112],
['2013-05-01', 1347.412, 1738.319, 1187.878],
['2013-04-01', 1381.396, 1856.318, 1118.274],
['2013-03-01', 1493.496, 1823.7, 1162.796],
['2013-02-01', 1664.242, 1776.693, 1092.085],
['2013-01-01', 1633.503, 1677.881, 1067.642],
['2012-12-03', 1639.998, 1500.404, 1012.645]];

// Pairwise multiplication of the elements in two arrays; for use in mUp and mDown calculation
function dotproduct(a, b) {
  var n = 0;
  for (var i = 0; i < Math.min(a.length, b.length); i++) n += a[i][1] * b[i];
  return n;
}

// Define array of weights that is global to the program
var weight = [];

// Weighting function
function weights() {
  var k = 1;
  var lambda = 2;
  for (var x = 0.1; x < 20; x++) {
    weight.push([x, k * Math.pow(x/lambda, k-1) * Math.exp(-Math.pow(x/lambda, k)) / lambda]);
  }
}

// Create the weights
weights();
document.write(weight + '<hr>');

// Fetch first row of the prices array and keep the remainder as actual prices
var symbols = prices[0];
prices.shift();

// Loop through all columns of prices
for (var c in prices[0]) {
  var min = prices[0][c];
  var max = prices[0][c];
  var up = [];
  var down = [];
  var indicator = [];

  // Loop through all rows of prices and calculate the minimum and maximum, the up-value and down-value
  for (var r in prices) {
    min = Math.min(prices[r][c], min);             // minimum price, for normalisation
    max = Math.max(prices[r][c], max);             // maximum price, for normalisation
    var last = (typeof prices[parseInt(r)+1] != "undefined") ? prices[parseInt(r)+1][c] : 0;
    up.push(Math.max(prices[r][c] - last, 0));     // up value
    down.push(-Math.min(prices[r][c] - last, 0));  // down value
  }
  document.write('symbol: ' + symbols[c] + '<br>');

  var mUp = [];    // weighted up values
  var mDown = [];  // weighted down values

  // Loop through all values of up and down and apply the weighting to the up and down values progressively
  for (var i in up) {
    mUp.push(dotproduct(weight, up));
    up.shift();    // drop the first element off the up array
    mDown.push(dotproduct(weight, down));
    down.shift();  // drop the first element off the down array
  }
  // Add date and price to indicator array
  for (var r in prices) {
    indicator.push([prices[r][0], (prices[r][c]-min)/max, mUp[r]/(mUp[r]+mDown[r])]);
  }

  // *********
  // Add the code to generate the line graph of array indicator here
  // *********
  document.write('indicator: ' + indicator + '<br>');

  // Calculate percentile
  document.write('first indicator: ' + indicator[0][2] + '<br>');
  // Define a counter
  var count = 0;
  // Count the number of data points smaller than or equal to n
  for (i in indicator) if (indicator[i][2] <= indicator[0][2]) count++;
  document.write('count: ' + count + '<br>');
  // Return the percentile
  document.write('percentile: ' + count/indicator.length + '<br>');
  document.write('<hr>');
}

</script>

Answer 1

Assuming that the array prices is the result of those calculations, you use .arrayToDataTable() to interface the data to the Google Visualization API.

SNIPPET

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <title>Line Chart</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'AAL', 'ABF', 'ADM'], ['2016-12-01', 1207.5, 2514.55, 1847.00], ['2016-11-01', 1123.5, 2475.00, 1901.00], ['2016-10-01', 1131, 2462.00, 1917.00], ['2016-09-01', 967.6, 2600.00, 2049.00], ['2016-08-01', 779.8, 3041, 2013.36], ['2016-07-01', 830.5, 2691, 2125.32], ['2016-06-01', 726.9, 2719, 1993.72], ['2016-05-02', 600.1, 2933.644, 1933.282], ['2016-04-01', 763.4, 3053.222, 1792.365], ['2016-03-01', 552.1, 3337.219, 1913.98], ['2016-02-01', 480.25, 3394.019, 1671.716], ['2016-01-04', 277.45, 3138.919, 1712.254], ['2015-12-01', 299.45, 3330.244, 1601.257], ['2015-11-02', 408.65, 3508.387, 1564.58], ['2015-10-01', 546.6, 3418.352, 1556.858], ['2015-09-01', 550.9, 3304.572, 1449.722], ['2015-08-03', 741, 3168.036, 1472.785], ['2015-07-01', 789.923, 3189.803, 1407.223], ['2015-06-01', 894.409, 2840.547, 1317.905], ['2015-05-01', 999.089, 2985.838, 1414.824], ['2015-04-01', 1076.017, 2817.219, 1458.897], ['2015-03-02', 985.457, 2778.762, 1432.678], ['2015-02-02', 1119.873, 3081.488, 1381.177], ['2015-01-01', 1030.099, 3059.794, 1355.894], ['2014-12-01', 1111.081, 3109.098, 1237.909], ['2014-11-03', 1223.068, 3134.425, 1161.125], ['2014-10-01', 1218.441, 2695.038, 1250.082], ['2014-09-01', 1280.913, 2621.644, 1201.39], ['2014-08-01', 1416.038, 2801.704, 1227.186], ['2014-07-01', 1461.646, 2718.524, 1339.334], ['2014-06-02', 1307.163, 2983.722, 1423.904], ['2014-05-01', 1332.301, 2943.89, 1340.253], ['2014-04-01', 1446.106, 2898.044, 1285.099], ['2014-03-03', 1395.374, 2712.71, 1290.464], ['2014-02-03', 1369.37, 2924.382, 1296.79], ['2014-01-01', 1284.4, 2648.331, 1305.827], ['2013-12-02', 1180.646, 2384.961, 1183.829], ['2013-11-01', 1206.584, 2212.07, 1123.282], ['2013-10-01', 1328.227, 2186.987, 1155.815], ['2013-09-02', 1357.743, 1809.787, 1114.245], ['2013-08-01', 1322.413, 1779.881, 1119.517], ['2013-07-01', 1242.815, 1875.387, 1245.585], ['2013-06-03', 1117.474, 1673.764, 1178.112], ['2013-05-01', 1347.412, 1738.319, 1187.878], ['2013-04-01', 1381.396, 1856.318, 1118.274], ['2013-03-01', 1493.496, 1823.7, 1162.796], ['2013-02-01', 1664.242, 1776.693, 1092.085], ['2013-01-01', 1633.503, 1677.881, 1067.642], ['2012-12-03', 1639.998, 1500.404, 1012.645] ]); var options = { title: 'Line Chart', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>