Develop Reference

Timestamp in Amchart category axis showing as Undefined

I'm trying to show timestamp on the amchart category axis, but its showing as undefined in the chart. Here is the chart code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"date": 1492664639000,
"value": 10
}, {
"date": 1492664646000,
"value": 20
}, {
"date": 1492664653000,
"value": 20
}, {
"date": 1492664660000,
"value": 23
}, {
"date": 1492664667000,
"value": 35
}, {
"date": 1492664674000,
"value": 26
}, {
"date": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});
Here is a DEMO.

You use wrong key for reference. Try this. (Demo here: https://codepen.io/anon/pen/ZKQPJL)
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"timestamp": 1492664639000,
"value": 10
}, {
"timestamp": 1492664646000,
"value": 20
}, {
"timestamp": 1492664653000,
"value": 20
}, {
"timestamp": 1492664660000,
"value": 23
}, {
"timestamp": 1492664667000,
"value": 35
}, {
"timestamp": 1492664674000,
"value": 26
}, {
"timestamp": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[timestamp]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});

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>

Vega how to create charts that dynamically resize & how to change x-axis?

am trying to figure out how to use vega in a web app.
From what I am seeing it looks like it is possible to resize the chart size but I am not entirely sure how to go about it? Would I have to manually change the json object that vega is working off or is there an easier way?
Also, I am having a bad time trying to customize the x-axis. I have date that ranges from 0-potentially thousands. Would like to be able to dynamically set the tick data for the x-axis (by tick data I mean how the x axis increments.. part of my confusion I'm sure is that I don't know what vega means by tick, etc.).
BTW, I'm using angular for the front-end with ng-vega to put the "spec" for vega onto the scope.

{
"signals":[
{
"name":"width",
"init":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on":[
{
"update":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events":"window:resize"
}
]
}
]
}
Please have a look in sample
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "fit", "contains": "padding"},
"background": "white",
"padding": 5,
"height": 200,
"style": "cell",
"data": [
{
"name": "source_0",
"url": "data/seattle-weather.csv",
"format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","},
"transform": [
{
"type": "formula",
"as": "month_date",
"expr": "datetime(0, month(datum[\"date\"]), 1, 0, 0, 0, 0)"
},
{
"type": "formula",
"as": "month_date_end",
"expr": "datetime(0, month(datum[\"date\"])+1, 1, 0, 0, 0, 0)"
},
{
"type": "aggregate",
"groupby": ["month_date", "month_date_end"],
"ops": ["mean"],
"fields": ["precipitation"],
"as": ["mean_precipitation"]
},
{
"type": "filter",
"expr": "(isDate(datum[\"month_date\"]) || (isValid(datum[\"month_date\"]) && isFinite(+datum[\"month_date\"])))"
}
]
}
],
"signals": [
{
"name": "width",
"init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on": [
{
"update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events": "window:resize"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "source_0"},
"encode": {
"update": {
"fill": {"value": "#4c78a8"},
"x2": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date", "offset": 1}
],
"x": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date_end"}
],
"y": {"scale": "y", "field": "mean_precipitation"},
"y2": {"scale": "y", "value": 0}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source_0",
"fields": ["month_date", "month_date_end"]
},
"range": [0, {"signal": "width"}]
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "field": "mean_precipitation"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "date (month)",
"labelFlush": true,
"labelOverlap": true,
"encode": {
"labels": {
"update": {"text": {"signal": "timeFormat(datum.value, '%b')"}}
}
},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Mean of precipitation",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
],
"config": {"background": "white"}
}

Highchart, bar chart with multiple series

How can I display a bar chart with multiple series:
http://jsfiddle.net/qyd6w5tx/1/
$(function () {
$('#container').highcharts(
{
"chart": {
"style": {
"fontFamily": "Arial, sans-serif"
},
"alignTicks": false,
"marginRight": 20,
"height": 334
},
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">●</span> <span style=\"{series.options.style.pct}\">({point.percentage:,.2f}%)</span> <b style=\"{series.options.style.abs}\">{point.value:,.2f}</b><br/>"
},
"xAxis": {
"type": "category",
"reversed": false,
"labels": {}
},
"yAxis": [{
"title": {
"text": null
},
"index": 0
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"index": 1,
"min": -0.39,
"max": 9.99
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"opposite": true,
"index": 2
}],
"legend": {
"borderWidth": 0,
"enabled": false
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
"style": {
"textShadow": "none"
},
"allowOverlap": true
},
"minPointLength": 2
},
},
"credits": {
"enabled": false
},
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}],
"title": {
"text": "Test"
}
}
);
});
In this example I would like to display one after the other:
Test 01
Test 02
Test 03
Test 04
Test 05
Test 06
Test 07
And then have the Group A in blue and the Group B in red, and display a legend under the chart with:
- Group A (in blue)
- Group B (in red)
I am bit confused with how to make this with highchart...
Edit:
Thanks to Rotan075 to understand my problem and to find a solution. http://jsfiddle.net/hw5s4ahm/
Actually I didn't specify that need to keep the same data structure for the series:
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}]
The rest can change, but this data is generated by a third part level and has to stay generic. I thought it would be just a question of settings but it seem to be much more complicated.

For what I understood out of your code is that you have data for Group A and group B right? What you have to do is make two data list with each of the same length. If there is no data for the specific group you have to add a null value to it. Otherwise Highcharts combines the group A and group B for every Test x.
What you need is this code (live on JSFiddle):
$(function () {
$('#container').highcharts(
{
chart: {
type: 'column',
inverted: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter:function() {
if(this.y > 0){
return this.y;
return this.point.y;
}
}
}
}
},
yAxis: {
allowDecimals: false,
min: -1,
labels: {
formatter: function () {
return this.value + '%';
}
},
title: {
text: ' ',
margin:40
}
},
xAxis: {
categories: ['Test1', 'Test2', 'Test3', 'Test4', 'Test5','Test6','Test7']
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'middle',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1,
y:10,
x:350
},
series: [{
name: 'GroupA',
color: 'rgba(223, 83, 83, .5)',
data: [{y:null},{y:null}, {y:null}, {y:null}, {y:2.9}, {y:0.5}, {y:1.5}]
},{
name: 'GroupB',
color: 'rgba(119, 152, 191, .5)',
data: [{y:6.5}, {y:3.9}, {y:8.5}, {y:6.6},{y:null},{y:null},{y:null}]
}],
title: {
text: "Test"
}
}
);
});
P.S. For aligning the Legend on the bottom of your graph I did that in a quite hackish way. I use as title text just blank space and place the legend above it. You can modify it in whatever you want.

Most of what you are asking for should be handled by the default behavior of highcharts.
-You can specify the color for each series within the series options:
series: [{
name: 'Group A',
color: 'rgba(0,156,255,0.9)',
data: [...]
},{
name: 'Group B',
color: 'rgba(204,0,0,0.9)',
data: randomData(7)
}]
-You can set your x axis labels via the categories option:
xAxis: {
categories: ['Test 01','Test 02','Test 03','Test 04','Test 05','Test 06','Test 07']
}
-The chart will group them by default
-The legend will be aligned below the chart by default (no hacks required)
Example in action:
http://jsfiddle.net/jlbriggs/3d3fuhbb/57/
Updated example using your data:
http://jsfiddle.net/jlbriggs/3d3fuhbb/58/
Adds a min and max value to the x axis to always show each category

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);
}