We Keep Coding

Need to show data points with the separate date column of same date

In above picture there are 2 data points on 150 (y-axis) and date is same, issue is that 2 data points are overlapping on each other, I need to show them separately, So both points which are overlapping with 2 date x-axis point instead of 1, please suggest any solution.
Here is the code:
chartBP = new AmCharts.AmSerialChart();
chartBP.path = "../../js/amcharts/";
chartBP.dataDateFormat = "YYYY-MM-DD";
chartBP.dataProvider = bp_array;
chartBP.categoryField = "created_at";
var bpDateAxix = chartBP.categoryAxis;
bpDateAxix.parseDates = true;
bpDateAxix.minorGridEnabled = true;
bpDateAxix.axisColor = "#FF7418";
bpDateAxix.twoLineMode = true;
var bpValueAxis = new AmCharts.ValueAxis();
bpValueAxis.gridAlpha = 0.15;
chartBP.addValueAxis(bpValueAxis);
bpValueAxis.axisColor = "#FF6600";
bpValueAxis.title = "Blood Pressure ("+uom+")";
bpValueAxis.minimum = 0;
var sysGraph = new AmCharts.AmGraph();
sysGraph.valueAxis = bpValueAxis;
sysGraph.valueField = "systolic";
sysGraph.balloonText = "SYS:[[systolic]] "+uom+"<br><p style='font-size:9px;max-width:300px;
word-wrap: break-word;'>[[alert_text]]</p>";
sysGraph.bullet = "round";
sysGraph.colorField = "bullet_color";
sysGraph.lineColor = "#808080";
chartBP.addGraph(sysGraph);
var diaGraph = new AmCharts.AmGraph();
diaGraph.valueAxis = bpValueAxis;
diaGraph.valueField = "diastolic";
diaGraph.balloonText = "DIA:[[diastolic]] "+uom+"<br><p style='font-size:9px;max-width:300px;
word-wrap: break-word;'>[[alert_text]]</p>";
diaGraph.colorField = "bullet_color";
diaGraph.lineColor = "#808080";
diaGraph.bullet = "square";
chartBP.addGraph(diaGraph);
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.scrollbarHeight = 20;
chartScrollbar.color = "#000000";
chartScrollbar.dragIcon = "/amcharts/images/dragIconRoundSmall.svg";
chartScrollbar.dragIconHeight = 22;
chartScrollbar.dragIconWidth = 22;
chartBP.addChartScrollbar(chartScrollbar);
chartBP.write(elementId);
AmCharts.checkEmptyData(chartBP);

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

AmChart not showing second y-axis

I have been assigned a task of displaying 2 charts in a graph, therefore I need two y-axis to represent the charts.
One axis will be on the left, the other on the right.
My problem is that only one y axis is showing.
As I am using amCharts, I have noticed one issue where the visible y Axis has an array called allLabels and it has elements in it, but the second y Axis does not, however I don't know
what fills up that array property.
Code:
function addconsumerUsageGraph(consumerUsageGraph) {
//You can ignore this
if (consumerUsageGraph.graphs.length == 2)
{
var gr1 = consumerUsageGraph.graphs[0];
var gr2 = consumerUsageGraph.graphs[1];
consumerUsageGraph.removeGraph(gr1);
consumerUsageGraph.removeGraph(gr2);
}
if (consumerUsageGraph.graphs.length == 1) {
var gr1 = consumerUsageGraph.graphs[0];
consumerUsageGraph.removeGraph(gr1);
}
//I add the two yAxis here:
var yAxis1 = new AmCharts.ValueAxis();
yAxis1.position = "left";
var yAxis2 = new AmCharts.ValueAxis();
yAxis2.position = "right"; // set this to "right" if you want it on the right
//Adding the value axis to the whole graph
consumerUsageGraph.addValueAxis(yAxis1);
consumerUsageGraph.addValueAxis(yAxis2);
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.type = "column";
graph.title = "Usage";
graph.lineAlpha = 1;
graph.fillAlphas = 0.75;
consumerUsageGraph.addGraph(graph);
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "cost";
graph2.type = "line";
graph2.lineAlpha = 1;
graph2.title = "Cost";
graph2.lineColor = graphColour;
graph2.bullet = "round";
graph2.bulletAlpha = 0.5;
graph2.bulletBorderAlpha = 0.8;
//Assigning the second yAxis to the second graph
graph2.valueAxes = yAxis2;
consumerUsageGraph.addGraph(graph2);
//consumerUsageGraph.write("chartdiv");
var legend = new AmCharts.AmLegend();
legend.marginBottom = -10;
legend.useGraphSettings = true;
consumerUsageGraph.addLegend(legend);
}
How the chart looks now:

graph doesn't have property valueAxes, use valueAxis instead:
graph2.valueAxis = yAxis2;

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

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.