Trouble with Dual Y Series

21 views
Skip to first unread message

Greg Slocum

unread,
Aug 12, 2018, 12:18:45 PM8/12/18
to Google Visualization API
I have code to generate charts like this for a series of products:
I'd like to have the "value" lines on one vertical axis and the "level" lines on another, but I'm having trouble getting the "series" code right.  It seems that whatever I add causes the chart no longer to display.  This is what I have to generate the graph above:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Inventory Level');
      data.addColumn('number', 'Safety Stock');
      data.addColumn('number', 'Inventory Value');
      data.addColumn('number', 'Safety Stock Value');

      data.addRows([
        [new Date(2018, 4, 1), 1116.32, 640, 35018.9584, 20076.8],
        [new Date(2018, 4, 2), 1107.32, 640, 34736.6284, 20076.8],
        [new Date(2018, 4, 3), 1044.5, 640, 32765.965, 20076.8],
        [new Date(2018, 4, 4), 1031.5, 640, 32358.155, 20076.8],
        [new Date(2018, 4, 5), 1017.3, 640, 31912.701, 20076.8],
        [new Date(2018, 4, 6), 1005.5, 640, 31542.535, 20076.8],
        [new Date(2018, 4, 7), 974.9, 640, 30582.613, 20076.8],
        [new Date(2018, 4, 8), 966.97, 640, 30333.8489, 20076.8],
        [new Date(2018, 4, 9), 962.81, 640, 30203.3497, 20076.8],
        [new Date(2018, 4, 10), 934.81, 640, 29324.9897, 20076.8],
        [new Date(2018, 4, 11), 898.81, 640, 28195.6697, 20076.8],
        [new Date(2018, 4, 12), 884.53, 640, 27747.7061, 20076.8],
        [new Date(2018, 4, 13), 870.76, 640, 27315.7412, 20076.8],
        [new Date(2018, 4, 14), 864.64, 640, 27123.7568, 20076.8],
        [new Date(2018, 4, 15), 840.64, 640, 26370.8768, 20076.8],
        [new Date(2018, 4, 16), 840.64, 640, 26370.8768, 20076.8],
        [new Date(2018, 4, 17), 822.4, 640, 25798.688, 20076.8],
        [new Date(2018, 4, 18), 808.49, 640, 25362.3313, 20076.8],
        [new Date(2018, 4, 19), 797.64, 640, 25021.9668, 20076.8],
        [new Date(2018, 4, 20), 791.62, 640, 24833.1194, 20076.8],
        [new Date(2018, 4, 21), 755.84, 640, 23710.7008, 20076.8],
        [new Date(2018, 4, 22), 736.84, 640, 23114.6708, 20076.8],
        [new Date(2018, 4, 23), 709.84, 640, 22267.6808, 20076.8],
        [new Date(2018, 4, 24), 659.66, 640, 20693.5342, 20076.8],
        [new Date(2018, 4, 25), 650.09, 640, 20393.3233, 20076.8],
        [new Date(2018, 4, 26), 645.32, 640, 20243.6884, 20076.8],
        [new Date(2018, 4, 27), 637.52, 640, 19999.0024, 20076.8],
        [new Date(2018, 4, 28), 628.32, 640, 19710.3984, 20076.8],
        [new Date(2018, 4, 29), 620.12, 640, 19453.1644, 20076.8],
        [new Date(2018, 4, 30), 592.12, 640, 18574.8044, 20076.8],
        [new Date(2018, 4, 31), 580.87, 640, 18221.8919, 20076.8],
        [new Date(2018, 5, 1), 560.62, 640, 17586.6494, 20076.8],
        [new Date(2018, 5, 2), 538.28, 640, 16885.8436, 20076.8],
        [new Date(2018, 5, 3), 524.03, 640, 16438.8211, 20076.8],
        [new Date(2018, 5, 4), 510.38, 640, 16010.6206, 20076.8],
        [new Date(2018, 5, 5), 499.72, 640, 15676.2164, 20076.8],
        [new Date(2018, 5, 6), 454.2, 640, 14248.254, 20076.8],
        [new Date(2018, 5, 7), 446.12, 640, 13994.7844, 20076.8],
        [new Date(2018, 5, 8), 407.09, 640, 12770.4133, 20076.8],
        [new Date(2018, 5, 9), 370.81, 640, 11632.3097, 20076.8],
        [new Date(2018, 5, 10), 338.23, 640, 10610.2751, 20076.8],
        [new Date(2018, 5, 11), 296.6, 640, 9304.342, 20076.8],
        [new Date(2018, 5, 12), 248.83, 640, 7805.7971, 20076.8],
        [new Date(2018, 5, 13), 176.08, 640, 5523.6296, 20076.8],
        [new Date(2018, 5, 14), 165.02, 640, 5176.6774, 20076.8],
        [new Date(2018, 5, 15), 140.53, 640, 4408.4261, 20076.8],
        [new Date(2018, 5, 16), 131.52, 640, 4125.7824, 20076.8],
        [new Date(2018, 5, 17), 119.92, 640, 3761.8904, 20076.8],
        [new Date(2018, 5, 18), 101.92, 640, 3197.2304, 20076.8],
        [new Date(2018, 5, 19), 413.92, 640, 12984.6704, 20076.8],
        [new Date(2018, 5, 20), 413.92, 640, 12984.6704, 20076.8],
        [new Date(2018, 5, 21), 391.52, 640, 12281.9824, 20076.8],
        [new Date(2018, 5, 22), 711.12, 640, 22307.8344, 20076.8],
        [new Date(2018, 5, 23), 693.52, 640, 21755.7224, 20076.8],
        [new Date(2018, 5, 24), 687.72, 640, 21573.7764, 20076.8],
        [new Date(2018, 5, 25), 687.72, 640, 21573.7764, 20076.8],
        [new Date(2018, 5, 26), 708.84, 640, 22236.3108, 20076.8],
        [new Date(2018, 5, 27), 705.32, 640, 22125.8884, 20076.8],
        [new Date(2018, 5, 28), 696.2, 640, 21839.794, 20076.8],
        [new Date(2018, 5, 29), 690.12, 640, 21649.0644, 20076.8],
        [new Date(2018, 5, 30), 679.88, 640, 21327.8356, 20076.8],
        [new Date(2018, 6, 1), 670.6, 640, 21036.722, 20076.8],
        [new Date(2018, 6, 2), 670.6, 640, 21036.722, 20076.8],
        [new Date(2018, 6, 3), 643, 640, 20170.91, 20076.8],
        [new Date(2018, 6, 4), 642.52, 640, 20155.8524, 20076.8],
        [new Date(2018, 6, 5), 627.76, 640, 19692.8312, 20076.8],
        [new Date(2018, 6, 6), 604.24, 640, 18955.0088, 20076.8],
        [new Date(2018, 6, 7), 580.16, 640, 18199.6192, 20076.8],
        [new Date(2018, 6, 8), 568.26, 640, 17826.3162, 20076.8],
        [new Date(2018, 6, 9), 553.17, 640, 17352.9429, 20076.8],
        [new Date(2018, 6, 10), 469.43, 640, 14726.0191, 20076.8],
        [new Date(2018, 6, 11), 431.93, 640, 13549.6441, 20076.8],
        [new Date(2018, 6, 12), 376.93, 640, 11824.2941, 20076.8],
        [new Date(2018, 6, 13), 359.93, 640, 11291.0041, 20076.8],
        [new Date(2018, 6, 14), 381.99, 640, 11983.0263, 20076.8],
        [new Date(2018, 6, 15), 363.27, 640, 11395.7799, 20076.8],
        [new Date(2018, 6, 16), 339.35, 640, 10645.4095, 20076.8],
        [new Date(2018, 6, 17), 336.27, 640, 10548.7899, 20076.8],
        [new Date(2018, 6, 18), 336.27, 640, 10548.7899, 20076.8],
        [new Date(2018, 6, 19), 329.43, 640, 10334.2191, 20076.8],
        [new Date(2018, 6, 20), 306.63, 640, 9618.9831, 20076.8],
        [new Date(2018, 6, 21), 288.12, 640, 9038.3244, 20076.8],
        [new Date(2018, 6, 22), 272.92, 640, 8561.5004, 20076.8],
        [new Date(2018, 6, 23), 268.64, 640, 8427.2368, 20076.8],
        [new Date(2018, 6, 24), 261.6, 640, 8206.392, 20076.8],
        [new Date(2018, 6, 25), 249.32, 640, 7821.1684, 20076.8],
        [new Date(2018, 6, 26), 241.92, 640, 7589.0304, 20076.8],
        [new Date(2018, 6, 27), 233.92, 640, 7338.0704, 20076.8],
        [new Date(2018, 6, 28), 222.92, 640, 6993.0004, 20076.8],
        [new Date(2018, 6, 29), 217, 640, 6807.29, 20076.8],
        [new Date(2018, 6, 30), 208.084, 640, 6527.59508, 20076.8],
      ]);
      var options = {
        chart: {
title:           'Inventory versus Safety Stock Level for 2141703, 4-P18-205:1 VER CSchutzrohr 214U 1,5Z, at Geesthacht',
subtitle:           'in Base Unit of Measure'
        },
        width: 900,
        height: 500,
           hAxis: {
           format:             'M/d/yy',
                       gridlines: {count: 15}
                     }
      };
      var chart = new google.charts.Line(document.getElementById('line_top_x'));
      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

Greg Slocum

unread,
Aug 12, 2018, 1:28:22 PM8/12/18
to Google Visualization API
OK, half way there.  How do I assign the levels to one vertical axis and the values to the other?

, so by adding
....
      var options = {
        chart: {
title:           'Inventory versus Safety Stock Level for 2141703, 4-P18-205:1 VER CSchutzrohr 214U 1,5Z, at Geesthacht',
subtitle:           'in Base Unit of Measure'
        },
        width: 900,
        height: 500,
 series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
           hAxis: {
           format:             'M/d/yy',
                       gridlines: {count: 15}
                     }
      };
....

I get

Daniel LaLiberte

unread,
Aug 13, 2018, 9:42:04 AM8/13/18
to Google Visualization API
It might be simplest to only move series 0 to the right side and leave the rest on the left, so replace your series option with:

  series: { 0: {targetAxisIndex: 1 }



--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/52910270-d1b6-4303-b0de-d0900c0b1a99%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Reply all
Reply to author
Forward
0 new messages