https://stackoverflow.com/questions/21657200
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianIt's all very simple, you have a typo:
graph.valueaxis should be graph.valueAxis
AmCharts Smoothed Line Serial Multiple Y Axis is not Showing
-
09-10-2022 - |
문제
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?
해결책
제휴하지 않습니다 StackOverflow
