AmCharts Smoothed Line Serial Multiple Y Axis is not Showing

Question

I try to make multiple line using amcharts. The type I'm gonna use is smoothed lines (view demo here). I've seen it's possible to draw multiple line charts and multiple value axis on this link. So, I try to implement it on smoothed lines using:

a. 2 lines

b. Both of them are different in scale, so I need two Y axis.

The problem is: only one Y axis appears.

Here's the code I wrote using javascript:

<script type="text/javascript">
            var chart;
            var graph;
            var chartData = [
                {"year":"1950", "v1":0.2, "v2":-26},
                {"year":"1951", "v1":-0.2, "v2":-45},
                {"year":"1952", "v1":1, "v2":-14},
                {"year":"1953", "v1":0.2, "v2":6},
                {"year":"1954", "v1":-0.5, "v2":18},
                {"year":"1955", "v1":0.8, "v2":-8},
                {"year":"1956", "v1":-0.4, "v2":-35},
                {"year":"1957", "v1":-0.4, "v2":-37},
                {"year":"1958", "v1":-0.2, "v2":27},
                {"year":"1959", "v1":1.3, "v2":-14},
                {"year":"1960", "v1":1, "v2":8},
                {"year":"1961", "v1":0, "v2":-6},
                {"year":"1962", "v1":0.4, "v2":9},
                {"year":"1963", "v1":-0.3, "v2":-38},
                {"year":"1964", "v1":0.7, "v2":-3},
                {"year":"1965", "v1":0, "v2":-10},
                {"year":"1966", "v1":0.7, "v2":-48},
                {"year":"1967", "v1":0.2, "v2":22},
                {"year":"1968", "v1":1.1, "v2":-22},
                {"year":"1969", "v1":-0.2, "v2":-49},
                {"year":"1970", "v1":1.5, "v2":-2},
                {"year":"1971", "v1":-0.3, "v2":-37},
                {"year":"1972", "v1":1, "v2":-44},
                {"year":"1973", "v1":-0.4, "v2":18},
                {"year":"1974", "v1":1.2, "v2":-17},
                {"year":"1975", "v1":-0.3, "v2":-33},
                {"year":"1976", "v1":0.6, "v2":-45},
                {"year":"1977", "v1":-0.2, "v2":2},
                {"year":"1978", "v1":0.5, "v2":18},
                {"year":"1979", "v1":-0.3, "v2":-24},
                {"year":"1980", "v1":0.5, "v2":14},
                {"year":"1981", "v1":-0.5, "v2":-28},
                {"year":"1982", "v1":0.7, "v2":-6},
                {"year":"1983", "v1":1.1, "v2":-1},
                {"year":"1984", "v1":0.9, "v2":-26},
                {"year":"1985", "v1":0.8, "v2":0},
                {"year":"1986", "v1":1.5, "v2":-27},
                {"year":"1987", "v1":1.4, "v2":26},
                {"year":"1988", "v1":-0.5, "v2":26},
                {"year":"1989", "v1":0.8, "v2":-45},
                {"year":"1990", "v1":0.3, "v2":-23},
                {"year":"1991", "v1":1.2, "v2":-21},
                {"year":"1992", "v1":-0.2, "v2":-31},
                {"year":"1993", "v1":0.8, "v2":-12},
                {"year":"1994", "v1":0.3, "v2":-35},
                {"year":"1995", "v1":1.1, "v2":-1},
                {"year":"1996", "v1":0.9, "v2":-14},
                {"year":"1997", "v1":-0.1, "v2":11},
                {"year":"1998", "v1":1.1, "v2":-29},
                {"year":"1999", "v1":-0.2, "v2":11},
                {"year":"2000", "v1":-0.4, "v2":-18},
                {"year":"2001", "v1":0.6, "v2":-12},
                {"year":"2002", "v1":1.5, "v2":-3},
                {"year":"2003", "v1":0.6, "v2":-47},
                {"year":"2004", "v1":1.5, "v2":-43},
                {"year":"2005", "v1":0.1, "v2":-18},
                {"year":"2006", "v1":0, "v2":7},
                {"year":"2007", "v1":0.5, "v2":-25},
                {"year":"2008", "v1":1.5, "v2":-50},
                {"year":"2009", "v1":0.4, "v2":28},
                {"year":"2010", "v1":0.7, "v2":25},
                {"year":"2011", "v1":0.4, "v2":-16},
                {"year":"2012", "v1":-0.2, "v2":5},
                {"year":"2013", "v1":0.2, "v2":-17},
                {"year":"2014", "v1":-0.5, "v2":-22}
            ];

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "../amcharts/images/";
                chart.dataProvider = chartData;
                chart.marginLeft = 10;
                chart.categoryField = "year";
                chart.dataDateFormat = "YYYY";
                chart.addListener("dataUpdated", zoomChart);

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true;
                categoryAxis.minPeriod = "YYYY";
                categoryAxis.dashLength = 3;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.minorGridAlpha = 0.1;

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.id = "ax1";
                valueAxis.axisAlpha = 0;
                valueAxis.inside = true;
                valueAxis.dashLength = 3;
                valueAxis.position = "right";
                chart.addValueAxis(valueAxis);

                var valueAxis2 = new AmCharts.ValueAxis();
                valueAxis2.id = "ax2";
                valueAxis2.axisAlpha = 0;
                valueAxis2.inside = true;
                valueAxis2.dashLength = 3;
                valueAxis2.baseValue = -20;
                valueAxis2.position = "left";
                chart.addValueAxis(valueAxis2);

                // GRAPH
                graph = new AmCharts.AmGraph();
                graph.valueaxis = "ax1";
                graph.type = "smoothedLine";
                graph.lineColor = "#d1655d";
                graph.negativeLineColor = "#637bb6";
                graph.bullet = "square";
                graph.bulletSize = 8;
                graph.bulletBorderColor = "#FFFFFF";
                graph.bulletBorderAlpha = 1;
                graph.bulletBorderThickness = 2;
                graph.lineThickness = 2;
                graph.valueField = "v1";
                graph.title = "title v1";
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
                chart.addGraph(graph);

                graph2 = new AmCharts.AmGraph();
                graph2.valueaxis = "ax2";
                graph2.type = "smoothedLine";
                graph2.lineColor = "#d1655d";
                graph2.negativeLineColor = "#637bb6";
                graph2.bullet = "round";
                graph2.bulletSize = 8;
                graph2.bulletBorderColor = "#FFFFFF";
                graph2.bulletBorderAlpha = 1;
                graph2.bulletBorderThickness = 2;
                graph2.lineThickness = 2;
                graph2.valueField = "v2";
                graph2.title = "title v2";
                graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
                chart.addGraph(graph2);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.cursorPosition = "mouse";
                chartCursor.categoryBalloonDateFormat = "YYYY";
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                chart.creditsPosition = "bottom-right";

                // WRITE
                chart.write("chartdiv");
            });

Anyone having similar issues? How to overcome this?

Answer 1

It's all very simple, you have a typo:

graph.valueaxis should be graph.valueAxis