Develop Reference

amcharts (v3.x) date formatting issue on graph

I am trying to plot chart using Amchart and Angular js.
My Data array object contains date in form of a string.
Problem is the amchart's dataDateFormat is not working as required.
For example -
in my data object
{
"date": "2012-07-27 11:33",
"value": 18
}
In amchart code
"dataDateFormat": "JJ:NN" or "dataDateFormat": "YYYY-MM-DD JJ:NN"
shows a single line as graph.
Below is the js code
angular.module("ctrl", ['ui.bootstrap']).controller("mindCtrl",
function($scope) {
$scope.makaDaCharto = function(index) {
$scope.chart = AmCharts.makeChart("chartdiv" + index, {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "JJ:NN",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
},
"valueScrollbar": {
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [{
"date": "2012-07-27 11:22",
"value": 13
}, {
"date": "2012-07-27 11:23",
"value": 11
}, {
"date": "2012-07-27 11:24",
"value": 15
}, {
"date": "2012-07-27 11:25",
"value": 16
}, {
"date": "2012-07-27 11:26",
"value": 18
}, {
"date": "2012-07-27 11:27",
"value": 13
}, {
"date": "2012-07-27 11:28",
"value": 22
}, {
"date": "2012-07-27 11:29",
"value": 23
}, {
"date": "2012-07-27 11:30",
"value": 20
}, {
"date": "2012-07-27 11:31",
"value": 17
}, {
"date": "2012-07-27 11:32",
"value": 16
}, {
"date": "2012-07-27 11:33",
"value": 18
}, {
"date": "2012-07-27 11:34",
"value": 21
}, {
"date": "2012-07-27 11:35",
"value": 26
}, {
"date": "2012-07-27 11:36",
"value": 24
}, {
"date": "2012-07-27 11:37",
"value": 29
}, {
"date": "2012-07-27 11:38",
"value": 32
}, {
"date": "2012-07-27 11:39",
"value": 18
}, {
"date": "2012-07-27 11:40",
"value": 24
}, {
"date": "2012-07-27 11:41",
"value": 22
}, {
"date": "2012-07-27 11:42",
"value": 18
}, {
"date": "2012-07-27 11:43",
"value": 19
}, {
"date": "2012-07-27 11:44",
"value": 14
}, {
"date": "2012-07-27 11:45",
"value": 15
}, {
"date": "2012-07-27 11:46",
"value": 12
}, {
"date": "2012-07-27 11:47",
"value": 8
}, {
"date": "2012-07-27 11:48",
"value": 9
}, {
"date": "2012-07-27 11:49",
"value": 8
}, {
"date": "2012-07-27 11:50",
"value": 7
}, {
"date": "2012-07-27 11:51",
"value": 5
}, {
"date": "2012-07-27 11:52",
"value": 11
}, {
"date": "2012-07-27 11:53",
"value": 13
}, {
"date": "2012-07-27 11:54",
"value": 18
}]
});
$scope.chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
$scope.chart.zoomToIndexes($scope.chart.dataProvider.length - 40,
$scope.chart.dataProvider.length - 1);
}
};
});
Amchart Curve by editing fiddle
Existing Example fiddle at http://jsfiddle.net/v917yya3/68/
Fiddle I Created to depict the issue http://jsfiddle.net/phex4qg5/
PS - I already tried
amCharts with AngularJS
JSON with parsed time or timestamp to amCharts
Almost all formats explained here http://www.amcharts.com/kbase/formatting-dates/

AmCharts assumes your data is in daily intervals by default. Since your data is in minute intervals, you need to adjust the category axis' minPeriod to accommodate this. In your case, set minPeriod: "mm", along with setting dataDateFormat: "YYYY-MM-DD JJ:NN" will fix your chart.
Updated fiddle: http://jsfiddle.net/phex4qg5/10/

Overlaying two AmCharts

I have one chart I want to build that has a scatter plot and then four lines. The four lines will be from a completely different dataset, with the same x min max and y min max but different structure. How can I create one chart with the fixed xmin xmax ymin ymax and then another and have one overlay the other.
Basically I want one chart with two completely different datasets that have the same domain and ranges AND keep the interactivity of both. I am trying the datasets an field mappings but haven't had much luck. I am not entirely sure I understand what the field mappings are doing. An example I found:
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData1,
"categoryField": "date"
}, {
"title": "second data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData2,
"categoryField": "date"
}],
I am using dataloader for now, I am able to read in both datasets at one time with ajax as another option if I can do it all in one chart. So I am not sure how to use dataloader with this example either. So if someone knows how that may work that would be helpful as well.
Thanks!

You can use simple CSS to get that.
position: absolute, some positioning coordinates top & left, and dimentions width & height.
z-index to decide what would be on top of what.
And transparent background for both of them.
The rest is just configurations in the config JSON of the chart.
AmCharts.makeChart("chartdiv", {
"type": "serial",
"autoMargins": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"fillAlphas": 1,
"fillColors": "#4DCD11",
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"fillAlphas": 1,
"fillColors": "#070AB5",
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"allLabels": [],
"balloon": {},
"titles": [{
"id": "Title-1",
"size": 15,
"text": " "
}],
"dataProvider": [{
"category": "1",
"column-1": 8,
"column-2": 5
},
{
"category": "2",
"column-1": 6,
"column-2": 7
},
{
"category": "3",
"column-1": 2,
"column-2": 3
}
]
});
AmCharts.makeChart("chartdiv2", {
"type": "serial",
"theme": "light",
"autoMargins": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-1",
"lineThickness": 6,
"noStepRisers": true,
"title": "graph 1",
"type": "step",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-2",
"lineThickness": 6,
"noStepRisers": true,
"title": "graph 2",
"type": "step",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": " "
}],
"allLabels": [],
"balloon": {},
"titles": [{
"id": "Title-1",
"size": 15,
"text": " "
}],
"dataProvider": [{
"category": "1",
"column-1": 8,
"column-2": 5
},
{
"category": "2",
"column-1": 6,
"column-2": "2"
},
{
"category": "3",
"column-1": "7",
"column-2": 3
},
{
"category": "4",
"column-1": "9",
"column-2": 3
},
{
"category": "5",
"column-1": "7",
"column-2": 1
},
{
"category": "6",
"column-1": "8",
"column-2": 2
},
{
"category": "7",
"column-1": "7",
"column-2": "6"
}
]
});
#chartdiv,
#chartdiv2 {
position: absolute;
background-color: transparent;
}
#chartdiv {
z-index: 100;
top: 0;
left: 0;
width: 600px;
height: 400px
}
#chartdiv2 {
z-index: 120;
top: 120px;
left: 100px;
width: 400px;
height: 180px
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>

D3 should be able to handle that pretty easily. You can use d3.request (e.g. d3.json) to call the data (in separate requests if necessary). Then d3.scale to set your min/max values to defined points on an svg chart, then plot your scatter points/lines etc. to those points using the data requested.
Mess about with axes and tooltips for a bit and you should have a functional chart.

amCharts Serial Chart unable to display data after enabling data parsing "parseDates": true

I am using spring as webservice and JSON response after hitting is following:
[ {
"date": "2016-04-17",
"open": 1085.0,
"high": 1092.2,
"low": 1072.0,
"close": 1088.3,
"volume": 54100,
"value": 1088.3
}, {
"date": "2016-04-14",
"open": 1081.25,
"high": 1081.25,
"low": 1081.25,
"close": 1081.25,
"volume": 0,
"value": 1081.25
} ]
I am trying to create chart for stock analysis. When I set "parseDates": false graph showing data. But of course, date is not parsed. When I set parseDates to true it stops showing data.
Here's my JavaScript Code:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"position": "left"
} ],
"graphs": [ {
"id": "g1",
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
"title": "Price:",
"type": "candlestick",
"valueField": "close"
} ],
"chartScrollbar": {
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": false
},
"dataProvider": resp,
"export": {
"enabled": true,
"position": "top-right"
}
} );
chart.addListener( "rendered", zoomChart );
zoomChart();
function zoomChart() {
chart.zoomToIndexes( chart.dataProvider.length - 50, chart.dataProvider.length - 1 );
}

The data points on date-based chart must be ordered in ascending order. Oldest first, newest last. Looking at your data sample, it seems to be that they are in descending order.
To fix that simply call reverse() on your resp array:
resp.reverse();
Working demo:
/**
* Source data
*/
var resp = [ {
"date": "2016-04-17",
"open": 1085.0,
"high": 1092.2,
"low": 1072.0,
"close": 1088.3,
"volume": 54100,
"value": 1088.3
}, {
"date": "2016-04-14",
"open": 1081.25,
"high": 1081.25,
"low": 1081.25,
"close": 1081.25,
"volume": 0,
"value": 1081.25
} ];
/**
* Reverse array
*/
resp.reverse();
/**
* Create chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"position": "left"
} ],
"graphs": [ {
"id": "g1",
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
"title": "Price:",
"type": "candlestick",
"valueField": "close"
} ],
"chartScrollbar": {
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true
},
"dataProvider": resp,
"export": {
"enabled": true,
"position": "top-right"
}
} );
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="height: 200px"></div>

Stacking data by hours AmCharts

Is it possible to stack data hourly ? I have only two columns: time and signal from trigger "trig = 1". So I need to stack all trigger signals on each hour. So on Y axis should be a number sum of all trigger signals in each hour. You can use this example JSFiddle.
Data looks like this:
[{"time":"15:15:00","trig":"1"},{"time":"15:45:00","trig":"1"},
{"time":"16:10:18","trig":"1"},{"time":"16:20:00","trig":"1"},
{"time":"17:30:00","trig":"1"},{"time":"17:50:00","trig":"1"},
{"time":"18:25:00","trig":"1"},{"time":"18:45:00","trig":"1"},
{"time":"19:05:00","trig":"1"},{"time":"19:40:00","trig":"1"},
{"time":"21:15:00","trig":"1"},{"time":"21:50:00","trig":"1"}]
And my JS:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [{
"title": "triger",
"fieldMappings": [{
"fromField": "time",
"toField": "time"
}, {
"fromField": "trig",
"toField": "trig"
}],
"compared": false,
"categoryField": "time",
"dataLoader": {
"url": "values4.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"pathToImages": "images/",
"dataDateFormat": "JJ:NN:SS",
"categoryAxis": {
"parseDates": true
},
"panels": [{
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "trig",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
}]
}],
"periodSelector": {
"position": "top",
"dateFormat": "JJ:NN",
"inputFieldWidth": 150,
"periods": [ {
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["5ss"]
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periods": [{
"period": "HH",
"count": 1,
"label": "1 hour"
}, {
"period": "HH",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"selected": true,
"label": "MAX"
}]
},
});

Javascript amcharts stacked bar chart click handler

I need something like this javascript amCharts graph item click event
I am using AmCharts.makeChart, and cannot seem to integrate that previous answer.
Can someone please help in making the click handler work properly with this method of making amcharts?
Any help would be greatly appreciated.
Code I'm currently using:
AmCharts.makeChart("0",
{
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]]:[[value]]",
"bulletField": "Not set",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Yes",
"type": "column",
"valueField": "column-1",
"visibleInLegend": false
},
{
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "No",
"type": "column",
"valueField": "column-2",
"visibleInLegend": false
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "100%",
"axisThickness": 0,
"gridThickness": 0,
"labelFrequency": 0,
"labelsEnabled": false,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0,
"title": ""
}
],
"allLabels": [],
"balloon": {},
"legend": {
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 22,
"text": ""
}
],
"dataProvider": [
{
"category": "category 1",
"column-1": "53",
"column-2": "13"
}
]
}
);

You must store chart in a variable and then add listener for clickGraphItem event:
var chart = AmCharts.makeChart("0", {
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]]:[[value]]",
"bulletField": "Not set",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Yes",
"type": "column",
"valueField": "column-1",
"visibleInLegend": false
}, {
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "No",
"type": "column",
"valueField": "column-2",
"visibleInLegend": false
}],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"stackType": "100%",
"axisThickness": 0,
"gridThickness": 0,
"labelFrequency": 0,
"labelsEnabled": false,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0,
"title": ""
}],
"allLabels": [],
"balloon": {},
"legend": {
"useGraphSettings": true
},
"titles": [{
"id": "Title-1",
"size": 22,
"text": ""
}],
"dataProvider": [{
"category": "category 1",
"column-1": "53",
"column-2": "13"
}]
});
chart.addListener("clickGraphItem", handleClick)
function handleClick(event){
console.log(event);
}