We Keep Coding

AM charts display fixed range in axes

Really Hope you can help!
I am using AMCharts and Ive added some data through a simple php function (pulled from database)
I've added some upper and lower limits, using the below function
// HORIZONTAL GREEN RANGE
var guide = new AmCharts.Guide();
guide.value =11.00;
guide.toValue = 11.80;
guide.fillColor = "#00CC00";
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
var guideRED = new AmCharts.Guide();
guideRED.value = 11.80;
guideRED.toValue = 11.90;
guideRED.fillColor = "orange";
guideRED.inside = true;
guideRED.fillAlpha = 0.2;
guideRED.lineAlpha = 0;
valueAxis.addGuide(guideRED);
var guideblue = new AmCharts.Guide();
guideblue.value = 11.00;
guideblue.toValue = 10.90;
guideblue.fillColor = "orange";
guideblue.inside = true;
guideblue.fillAlpha = 0.2;
guideblue.lineAlpha = 0;
valueAxis.addGuide(guideblue);
but I need to set the display range on the Y (top to bottom???) to 11.90 and 10.50 respectivly so the operator can see the plotted line, and its relationship to the red and orange zones. At present the graph simply renders the chart to +1 the max and min it has in value form.
Here is the graph functions
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.dataDateFormat = "DD-MM-YY";
chart.categoryField = "date";
// AXES
// category
var categoryAxis = chart.categoryAxis;
// categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
// categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minorGridEnabled = true;
categoryAxis.inside = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.tickLength = 4;
valueAxis.axisAlpha = 0;
valueAxis.showFirstLabel = false;
valueAxis.showLastLabel = false;
valueAxis.autoGridCount = true;
valueAxis.gridCount = 500;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 2;
graph.lineColor = "#00CC00";
graph.valueField = "value";
graph.dashLength = 3;
graph.bullet = "round";
graph.balloonText = "[[category]]<br><b><span style=\'font-size:14px;\'>value:[[value]]</span></b>";
chart.addGraph(graph);
(this is all within a tag hence the escape char's
Many thanks.

To force the value axis to particular scale, first set it's minimum and maximum properties. The chart will still try to use whole numbers. To disable that set strictMinMax.
I.e.:
var valueAxis = new AmCharts.ValueAxis();
valueAxis.minimum = 10.5;
valueAxis.maximum = 11.90;
valueAxis.strictMinMax = true;

Issue in drawing multi value axes line chart

I am trying to create stock chart of stockprice, revenue, visits using amcharts, but m stuck while creating revenue line on it, this is the graph m getting
i want yellow line of above graph like the blue line of below graph
The code of above graph is
var sp = JSON.parse('<?php echo $graphDetails; ?>');
// for(var stkpr in sp){
// sp[stkpr].date = new Date(sp[stkpr].date);
// }
console.log(sp);
var chart;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = sp;
chart.categoryField = "date";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
categoryAxis.twoLineMode = true;
categoryAxis.dateFormats = [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// first value axis (on the left)
var valueAxis1 = new AmCharts.ValueAxis();
valueAxis1.axisColor = "#FF6600";
valueAxis1.axisThickness = 2;
valueAxis1.gridAlpha = 0;
chart.addValueAxis(valueAxis1);
// second value axis (on the right)
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.position = "right"; // this line makes the axis to appear on the right
valueAxis2.axisColor = "#FCD202";
valueAxis2.gridAlpha = 0;
valueAxis2.axisThickness = 2;
// categoryAxis.autoGridCount = false;
// categoryAxis.gridCount = chartData.length;
// categoryAxis.gridPosition = "start";
chart.addValueAxis(valueAxis2);
// third value axis (on the left, detached)
valueAxis3 = new AmCharts.ValueAxis();
valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
valueAxis3.gridAlpha = 0;
valueAxis3.axisColor = "#B0DE09";
valueAxis3.axisThickness = 2;
chart.addValueAxis(valueAxis3);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.title = "Stock Price";
graph1.valueField = "stockPrice";
graph1.bullet = "round";
graph1.hideBulletsCount = 30;
graph1.bulletBorderThickness = 1;
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
graph2.title = "revenue";
graph2.valueField = "revenue";
graph2.bullet = "square";
graph2.hideBulletsCount = 30;
graph2.bulletBorderThickness = 1;
chart.addGraph(graph2);
// third graph
var graph3 = new AmCharts.AmGraph();
graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used
graph3.valueField = "visits";
graph3.title = "visits";
graph3.bullet = "triangleUp";
graph3.hideBulletsCount = 30;
graph3.bulletBorderThickness = 1;
chart.addGraph(graph3);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0.1;
chartCursor.fullWidth = true;
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(5, 245);
}

AMCharts How to color bullets by value?

I am working with amcharts and I tried to color bullets in the chart by the values they have. So I created an array in javascript and passed the values from the database into it. Green is just a value for testing.
var chartData = [
<?php
foreach($tmp as $row)
{
echo'{"Wahrscheinlichkeit":'.$row[3].',"Schaden":'.$row[4].',"value":1,"Beschreibung":"'.$row[2].'", "Color":"Green"},';
}
?>
];
Here I create the chart:
chart = new AmCharts.AmXYChart();
chart.dataProvider = chartData;
Here I draw the chart:
var graph = new AmCharts.AmGraph();
graph.valueField = "value"; // größe der Kugeln
graph.xField = "Wahrscheinlichkeit";
graph.yField = "Schaden";
graph.maxBulletSize=20;
graph.lineAlpha = 0;
graph.bullet = "circle";
graph.bulletColor= "[[Color]]";
graph.balloonText = "Wahrscheinlichkeit:<b>[[x]]</b> Schaden:<b>[[y]]</b><br>Beschreibung:<b> [[Beschreibung]]</b>"
chart.addGraph(graph);
At the point "bulletcolor" I try to get the color out of the array, but it doesn't work.
chart.write("chartdiv");
Looking forward getting tips and help from you

"bulletColor" can't reference fields in data like this.
Instead, please use "lineColorField":
http://docs.amcharts.com/3/javascriptcharts/AmGraph#lineColorField
I.e.:
var graph = new AmCharts.AmGraph();
graph.valueField = "value"; // größe der Kugeln
graph.xField = "Wahrscheinlichkeit";
graph.yField = "Schaden";
graph.maxBulletSize=20;
graph.lineAlpha = 0;
graph.bullet = "circle";
graph.lineColorField = "Color";
graph.balloonText = "Wahrscheinlichkeit:<b>[[x]]</b> Schaden:<b>[[y]]</b><br>Beschreibung:<b> [[Beschreibung]]</b>"
chart.addGraph(graph);

amcharts showing value inside bar

I'm using amCharts, and i want to show values inside bar
This is how it looks at the moment:
and I want it to be like this:
This is my code to display chart:
AmCharts.ready(function() {
generateWidgetData('week');
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = graphData;
chart.categoryField = 'date';
chart.startDuration = 1;
chart.columnWidth = 0.60;
chart.dataDateFormat = 'YYYY-MM-DD';
chart.startEffect = 'easeInSine';
chart.stackType = 'regular';
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = 'DD';
categoryAxis.plotAreaBorderAlpha = 0.01;
categoryAxis.labelRotation = 90;
categoryAxis.axisThickness = 0;
categoryAxis.stackType = 'regular';
categoryAxis.gridThickness = 0;
categoryAxis.inside = false;
//categoryAxis.gridPosition = 'start';
//categoryAxis.startDate = '2014-05-08';
// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.
// GRAPH
var graph = new AmCharts.AmGraph();
graph.maxColumns = 1;
graph.valueField = 'Self-entered';
graph.balloonText = '[[category]]: <b>[[value]]</b>';
graph.type = 'column';
graph.lineAlpha = 0;
graph.labelText = '[[value]]';
graph.fillAlphas = 0.8;
graph.stackType = 'regular';
chart.addGraph(graph);
graph.cornerRadiusTop = 8;
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = 'top-right';
chart.write('stepschart');
});
Thanks in advance.

I fixed this so i will post answer, maybe it will help to someone
its really simple all you need to do is to add 2 lines of code:
graph.labelText = '[[value]]'; // this will insert values in labels
graph.labelPosition = 'inside'; // and with this we put our label inside bar
Hope this will help to someone who also need to do same thing

AmCharts Smoothed Line Serial Multiple Y Axis is not Showing

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?

It's all very simple, you have a typo:
graph.valueaxis should be graph.valueAxis