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;

How to generate dynamic graph at runtime in amcharts..?

Following is the code of Multiple Value Axes:
In that we want to show the graph by using random data dynamically.
when we run this code nothing will be happened.
<script>
var chart;
var chartData = [];
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 50);
var v = [];
var a = [];
for (var i = 0; i < 50; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);}
for (var j = 1; j < 4; j++) {
v[j] = Math.round(Math.random() * 40 *j) + 100;
chartData.push({
date: newDate,
a + j.toString():v[j]
// a + j = stringValue - 0;
//var a[j]:v[j],
});
}
}
}
// 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(10, 20);
}
// create chart
AmCharts.ready(function() {
// generate some random data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.marginTop = 0;
chart.autoMarginOffset = 5;
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
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.dashLength = 2;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
// 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;
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);
var graph = [];
var v ;
for (var j = 1; j < 4; j++)
{
graph[j] = new AmCharts.AmGraph();
graph[j].valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph[j].title = "red line";
v = a + j.toString();
graph[j].valueField = v;
graph[j].bullet = "round";
graph[j].hideBulletsCount = 30;
chart.addGraph(graph[j]);
}
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
<body>
<div id="chartdiv" style="width: 640px: hieght: 400px: overflow: hidden: text-align: left;">
</div>
</body>

It seems that you're looking to produce 4 graphs with random values.
If that is correct, there is a number of issues with your code:
The values for each of the graph need to be consolidated into a single data point for each category. So that we get one object per category:
[
{
date: '2015-01-01',
value1: 100,
value2: 200,
value3: 300,
value4, 400
},
{
date: '2015-01-02',
value1: 101,
value2: 201,
value3: 302,
value4, 404
},
// etc.
]
The best way to achieve that is to create an item with a date part, then generate a value for each graph and add them to the same object. Only then push that object into chart data array.
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 50);
for (var i = 0; i < 50; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var item = {
date: newDate
};
for (var j = 1; j < 4; j++) {
item[j.toString()] = Math.round(Math.random() * 40 * j) + 100;;
}
chartData.push(item);
}
}
The same with adding actual graph objects. Just need to assign valueField to the same key as we did with data:
var v;
for (var j = 1; j < 4; j++) {
graph[j] = new AmCharts.AmGraph();
graph[j].valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph[j].title = "red line";
v = j.toString();
graph[j].valueField = v;
graph[j].bullet = "round";
graph[j].hideBulletsCount = 30;
chart.addGraph(graph[j]);
}
Here's the complete working code:
var chart;
var chartData = [];
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 50);
for (var i = 0; i < 50; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var item = {
date: newDate
};
for (var j = 1; j < 4; j++) {
item[j.toString()] = Math.round(Math.random() * 40 * j) + 100;;
}
chartData.push(item);
}
}
// 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(10, 20);
}
// create chart
AmCharts.ready(function() {
// generate some random data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.marginTop = 0;
chart.autoMarginOffset = 5;
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
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.dashLength = 2;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
// 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;
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);
var graph = [];
var v;
for (var j = 1; j < 4; j++) {
graph[j] = new AmCharts.AmGraph();
graph[j].valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph[j].title = "red line";
v = j.toString();
graph[j].valueField = v;
graph[j].bullet = "round";
graph[j].hideBulletsCount = 30;
chart.addGraph(graph[j]);
}
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Amchart - Export to PNG file

I created an amchart for plotting time based area. I need to add an export to image option to this graph. Below shows my amchart code. What are the lines needed to add the export to image option to this graph
AmCharts.ready(function () {
// first we generate some random data
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
// data updated event will be fired when chart is first displayed,
// also when data will be updated. We'll use it to set some
// initial zoom
chart.addListener("dataUpdated", zoomChart);
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
categoryAxis.minPeriod = "mm"; // as we have data with minute interval, we have to set "mm" here.
categoryAxis.gridAlpha = 0.07;
categoryAxis.axisColor = "#DADADA";
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0.07;
valueAxis.title = "Unique visitors";
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line"; // try to change it to "column"
graph.title = "red line";
graph.valueField = "visits";
graph.lineAlpha = 1;
graph.lineColor = "#d1cf2a";
graph.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "JJ:NN, DD MMMM";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
});

You should just be able to add the following before you write the chart to the DIV.
"exportConfig":{
"menuTop": 0,
menuItems: [{
textAlign: 'center',
icon: 'images/graph_export.png',
iconTitle: 'Save chart as an image',
onclick:function(){},
items: [
{title:'JPG', format:'jpg'},
{title:'PNG', format:'png'},
{title:'SVG', format:'svg'}
]
}]
}
This will give you a download icon on the graph to download in either JPG, PNG or SVG formats.

Try this code :
chart.export = {
enabled: true,
position: "bottom-right"
}
chart.initHC = false;
chart.validateNow();
And don't forget to include the needed export plugin!

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 - graphs connected by starting and ending points

I have multiple graphs per chart and for some unknown(to me) reason each graph is connected by the start and the end points of it e.g.
Simple question: How to remove it? I couldn't find anything in the documentation that controls it.
My code as follows:
lineChart = function(id, period) {
var chart, data = [];
var cData = chartData[id];
AmCharts.ready(function() {
for (item in cData) {
var i = cData[item];
data.push({
date: new Date(i.date),
impressions: i.impressions,
clicks: i.clicks,
conversions: i.conversions,
ctr: i.ctr,
profit: i.profit,
cost: i.cost,
revenue: i.revenue
});
}
chart = new AmCharts.AmSerialChart();
chart.dataProvider = data;
chart.categoryField = "date";
chart.balloon.color = "#000000";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.minPeriod = period;
categoryAxis.parseDates = true;
categoryAxis.gridPosition = "start";
categoryAxis.position = "bottom";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.integersOnly = true;
valueAxis.gridCount = 10;
chart.addValueAxis(valueAxis);
// GRAPHS
// Impressions graph
var graph = new AmCharts.AmGraph();
graph.title = "Impressions";
graph.valueField = "impressions";
graph.balloonText = "[[title]]: [[value]]";
//graph.lineAlpha = 1;
graph.bullet = "round";
chart.addGraph(graph);
// Clicks graph
var graph = new AmCharts.AmGraph();
graph.title = "Clicks";
graph.valueField = "clicks";
graph.balloonText = "[[title]]: [[value]]";
graph.bullet = "round";
chart.addGraph(graph);
// Conversions graph
var graph = new AmCharts.AmGraph();
graph.title = "Conversion";
graph.valueField = "conversions";
graph.balloonText = "[[title]]: [[value]]";
graph.bullet = "round";
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.markerType = "circle";
chart.addLegend(legend);
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
if(period == 'hh')
chartCursor.categoryBalloonDateFormat = "MMM DD, JJ:00";
chart.addChartCursor(chartCursor);
// WRITE
chart.write(id);
});
};

This looks like the data issue. Make sure your data points are strictly in consecutive ascending order.
To verify how your actual data looks like, add the second line below to your code. Then run your chart in Google Chrome with Console open (F12 then select Console tab)
chart.dataProvider = data;
console.debug(data);
Check the datapoints for irregularities. Especially the last two ones.

The problem was that each chart was rendered within it's own AmCharts.ready method. The documentation states that it's allowed, however it didn't work for me, therefore I wrapped all rendering within one ready method and the issue was fixed.