I use the library amchart to generate a chart with the plugin dataLoader
. But each time there is one day empty at the begin and the end of the chart for no reason. Did someone already get this error?
-- EDIT FIDDLE --
I create a fiddle using the example data from amchart that you can find here. I just change the chart type to "line" and the default period to "10D" and as you can see there is still a space on the right of the chart (if also at left as well if you change the period). Is it possible to erase it?
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "none",
//"color": "#fff",
"dataSets": [ {
"title": "MSFT",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
/**
* data loader for events data
*/
"eventDataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function( data ) {
for ( var x in data ) {
switch ( data[ x ].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[ x ] = {
"type": "pin",
"graph": "g1",
"backgroundColor": color,
"date": data[ x ].Date,
"text": data[ x ].Type,
"description": "<strong>" + data[ x ].Title + "</strong><br />" + data[ x ].Description
};
}
return data;
}
}
}, {
"title": "TXN",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": true,
"categoryField": "Date",
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/TXN.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
} ],
"dataDateFormat": "YYYY-MM-DD",
"panels": [ {
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"type": "line",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
"comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
} ],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
},
{
"title": "Volume",
"percentHeight": 30,
"marginTop": 1,
"columnWidth": 0.6,
"showCategoryAxis": false,
"stockGraphs": [ {
"valueField": "volume",
"openField": "open",
"type": "column",
"showBalloon": false,
"fillAlphas": 1,
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"useDataSetColors": false
} ],
"stockLegend": {
"markerType": "none",
"markerSize": 0,
"labelText": "",
"periodValueTextRegular": "[[value.close]]"
},
"valueAxes": [ {
"usePrefixes": true
} ]
}
],
"panelsSettings": {
// "color": "#fff",
"plotAreaFillColors": "#333",
"plotAreaFillAlphas": 1,
"marginLeft": 60,
"marginTop": 5,
"marginBottom": 5
},
"chartScrollbarSettings": {
"graph": "g1",
"graphType": "line",
"usePeriod": "WW",
"backgroundColor": "#333",
"graphFillColor": "#666",
"graphFillAlpha": 0.5,
"gridColor": "#555",
"gridAlpha": 1,
"selectedBackgroundColor": "#444",
"selectedGraphFillAlpha": 1
},
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 1,
"inside": false,
"showLastLabel": true
},
"chartCursorSettings": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"legendSettings": {
//"color": "#fff"
},
"stockEventsSettings": {
"showAt": "high",
"type": "pin"
},
"balloon": {
"textAlign": "left",
"offsetY": 10
},
"periodSelector": {
"position": "bottom",
"periods": [ {
"period": "DD",
"count": 10,
"label": "10D",
"selected": true
}, {
"period": "MM",
"count": 1,
"label": "1M"
}, {
"period": "MM",
"count": 6,
"label": "6M"
}, {
"period": "YYYY",
"count": 1,
"label": "1Y"
}, {
"period": "YYYY",
"count": 2,
"label": "2Y"
},
/* {
"period": "YTD",
"label": "YTD"
},*/
{
"period": "MAX",
"label": "MAX"
}
]
}
} );
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width : 100%;
height : 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>
Finally,
in your example in "categoryAxesSettings": change "startOnAxis" to true
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1,
"startOnAxis" : true, // add this line
},
follow this doc: https://docs.amcharts.com/3/javascriptstockchart/CategoryAxis#startOnAxis
Related
I'm setting my minimum value and max value using the sample data in my push function to show it in the date picker. But when I click the date picker, it shows the wrong min and max value, what's wrong with my code? I used this to get the min and max value
"minDate": dataProvider[0].date,
"maxDate":dataProvider[dataProvider.length - 1].date,
var chartData1 = [];
generateChartData();
function generateChartData() {
chartData1.push(
{
"date": "2012-10-11",
"value": 33
}, {
"date": "2012-12-12",
"value": 50
}, {
"date": "2012-12-13",
"value": 10
}, {
"date": "2012-12-14",
"value": 100
}, {
"date": "2013-12-15",
"value": 30
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"extendToFullPeriod": false,
"dataSets": [{
"title": "first data set",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData1,
"categoryField": "date"
}],
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
},
{
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [{
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1
}],
"stockLegend": {
"periodValueTextRegular": "[[value.close]]"
}
}
],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
fullWidth: true,
cursorAlpha: 0.1
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
}
});
chart.addListener('rendered', function(event) {
var dataProvider = chart.dataSets[0].dataProvider;
$(".amChartsPeriodSelector .amChartsInputField").datepicker({
"dateFormat": "dd-mm-yy",
"minDate": dataProvider[0].date,
"maxDate": dataProvider[dataProvider.length - 1].date,
"onClose": function() {
$(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
}
});
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
font-family: Verdana;
}
#chartdiv {
width: 100%;
height: 100%;
}
<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
From the minDate and maxDate documentation:
minDate
Multiple types supported:
A date object containing the minimum date.
A string in the format defined by the dateFormat option, or a relative date.
Your dates are in the format yyyy-mm-dd, but your dateFormat option is dd-mm-yy.
That said, notice the documentation mentions that they can be date objects. You could convert your strings to date objects by wrapping them in new Date(...).
"minDate": new Date(dataProvider[0].date),
"maxDate": new Date(dataProvider[dataProvider.length - 1].date),
var chartData1 = [];
generateChartData();
function generateChartData() {
chartData1.push({
"date": "2012-10-11",
"value": 33
}, {
"date": "2012-12-12",
"value": 50
}, {
"date": "2012-12-13",
"value": 10
}, {
"date": "2012-12-14",
"value": 100
}, {
"date": "2013-12-15",
"value": 30
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"extendToFullPeriod": false,
"dataSets": [{
"title": "first data set",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData1,
"categoryField": "date"
}],
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
},
{
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [{
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1
}],
"stockLegend": {
"periodValueTextRegular": "[[value.close]]"
}
}
],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
fullWidth: true,
cursorAlpha: 0.1
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
}
});
chart.addListener('rendered', function(event) {
var dataProvider = chart.dataSets[0].dataProvider;
$(".amChartsPeriodSelector .amChartsInputField").datepicker({
"dateFormat": "dd-mm-yy",
"minDate": new Date(dataProvider[0].date),
"maxDate": new Date(dataProvider[dataProvider.length - 1].date),
"onClose": function() {
$(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
}
});
});
html,
body {
width: 100%;
height: 100%;
margin: 0px;
font-family: Verdana;
}
#chartdiv {
width: 100%;
height: 100%;
}
<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
Is it possible to enter duration in floats, for example, 0.89
My fiddle - https://jsfiddle.net/sachinpsingh/36xqwskf/1/
I tried but it seems to accept only integer values.
The Code -
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"period": "fff",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"balloonDateFormat": "QQQ",
"columnWidth": 0.5,
"marginBottom": 30,
"valueAxis": {
"type": "date",
"minPeriod": "fff",
"ignoreAxisWidth": true
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[duration]]ms"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01 00:00:00",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
}]
}],
"valueScrollbar": {
"autoGridCount": true
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
}
});
When I define "duration": 4.88, it shows in the chart as "duration": 4 (only integer value).
I want that it should show 4.88 as the size in chart.
I figured out a solution -
just need to replace the "type": "date", to "type": "time",
just as below -
"valueAxis": {
"type": "time",
"minPeriod": "fff",
"ignoreAxisWidth": true
}
It Works!
I am using AmCharts of stock type for displaying graph. The problem is that on mobile devices it consumes touch & does not scroll. I have set "panEventsEnabled": false. But it still consumes the touch and on desktop browser I am still able to pan the graph. I don't get why it is not disabling the panEvent.
Below is my chart object. panEventsEnabled=false is set in the end.
var chartObject = {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"minPeriod": "mm",
"maxSeries": 250,
"groupToPeriods": [ "mm", "10mm", "30mm", "hh", "3hh", "DD", "3DD", "WW", "MM", "YYYY"]
},
"dataSets": [ {
"color": "#00e673",
"fieldMappings": [ {
"fromField": "close",
"toField": "value"
}, {
"fromField": "volumeto",
"toField": "volume"
} ],
"categoryField": "time"
}],
"balloon": {},
"panels": [ {
"showCategoryAxis": true,
"categoryBalloonEnabled": false,
"recalculateToPercents": "never",
"title": "Value",
"percentHeight": 60,
"stockGraphs": [ {
"id": "g1",
"title": Value,
"precision": 2,
"valueField": "value",
"type": "line",
"compareable": true,
"lineThickness": 2,
"balloonText": "close: [[value]]",
"fillAlphas": 0.6
} ],
"stockLegend": {
"valueTextRegular": ": [[value]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"precision": 2,
"valueField": "volume",
"type": "column",
"cornerRadiusTop": 2,
"fillAlphas": 1
} ],
"stockLegend": {
"valueTextRegular": "Volume: [[value]]"
}
} ],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "10mm",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorColor": "#ff0000",
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "top",
"dateFormat": "YYYY-MM-DD JJ:NN",
//"periodContainer":{},
"hideOutOfScopePeriods":false,
"inputFieldsEnabled": false,
"inputFieldWidth": 100,
"periods": [ {
"period": "mm", //histomin limit 60
"count": 60,
"minPeriod": "mm",
"label": "1H"
}, {
"period": "mm",//histomin limit 1440 //autogroup
"minPeriod": "mm",
"count": 1440,
"label": "1D"
},{
"period": "DD",//histohour limit 168
"count": 7,
"label": "1W"
}, {
"period": "MM",//histohour limit 744
"count": 1,
"label": "1M"
}, {
"period": "MM",//histoday limit 93
"count": 3,
"label": "3M"
},{
"period": "YYYY",//histoday limit 365
"count": 1,
"label": "1Y"
}, {
"period": "MAX",//histoday all
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": false,
"creditsPosition":"bottom-left",
"panEventsEnabled": false
},
};
Use the responsive plugin instead and override selectWithoutZooming.
"responsive": {
"enabled": true,
"rules": [{
"maxWidth": 800,
"overrides": {
"chartCursorSettings": {
"selectWithoutZooming": true
}
}
}]
}
Check an example here: https://codepen.io/team/amcharts/pen/80a7ccf3fb8d2c04d00ef9121ca0806c?editors=1010
I use amCharts but I need to group data results by Date:
Demo example
I have 5 visits by one day and chart need to group results.
My code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"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"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"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": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
By documentation I use grouping settings without success.
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
Any Help?
According to the documentation, categoryAxesSettings only applies to stock type charts. You're using a serial here. An alternative option is to translate the data yourself:
function translateData(data){
var newData = [], dates = [];
data.map(function(item){
var index = dates.indexOf(item.date);
if(index > -1){
newData[index].value += item.value;
}else{
newData.push(item);
dates.push(item.date);
}
});
return newData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"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"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"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": translateData([
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
}
])
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="height: 300px;"></div>
I am trying to add a green or red arrow next to the label.I have added customBullet field for my amchart but I could't insert the unicoded arrow inside
dataProvider. Here is the codes :
<script>
var chart = AmCharts.makeChart("avaragediv", {
"type": "serial",
"theme": "light",
"rotate": true,
"marginBottom": 50,
"dataProvider": [{
"age": "Average Opened",
"male": -0.8,
"female": 0.3,
"bullet":"<text>▲</text>",
}, {
"age": "Average Effort",
"male": -0.2,
"female": 0.3,
}, {
"age": "Average Speed",
"male": -0.3,
"female": 0.6
}, {
"age": "Average Handle",
"male": -0.5,
"female": 0.8
}],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "male",
"title": "Monthly",
"customBulletField": "bullet",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function (item) {
return Math.abs(item.values.value);
},
"balloonFunction": function (item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}, {
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "female",
"title": "Weekly",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function (item) {
return Math.abs(item.values.value);
},
"balloonFunction": function (item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}],
"categoryField": "age",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0.2,
"axisAlpha": 0
},
"valueAxes": [{
"gridAlpha": 0,
"ignoreAxisWidth": true,
"labelsEnabled": false,
"labelFunction": function (value) {
return Math.abs(value) + '%';
},
"guides": [{
"value": 0,
"lineAlpha": 0.2
}]
}],
"balloon": {
"fixedPosition": true
},
"allLabels": [{
"text": "Weekly",
"x": "28%",
"y": "85%",
"bold": true,
"align": "middle"
}, {
"text": "Monthly",
"x": "75%",
"y": "85%",
"bold": true,
"align": "middle"
}],
});
Encoded arrow is ▲ . How can I do that? Here is the fiddle