How to adjust Amchart Balloon Size - javascript

https://i.stack.imgur.com/9R2Hj.png
Hi,
I'm trying to add a line chart with 3 different graphs. The graph rendering is working just fine but the balloons are very unbalanced (see the picture), thus invalid for production usage. It does not help if I add horizontal or vertical paddings.
I must be doing something wrong here but I cannot figure out what it is. Would anyone figure out the reason for the odd balloon behaviour?
var chart3 = AmCharts.makeChart("chartdiv3", {
"type": "serial",
"theme": "light",
"marginRight": 20,
"marginLeft": 50,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "YYYY-MM-DD",
"chartCursor": {
"fullWidth": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"valueLineAlpha": 0.5,
"cursorAlpha": 0
},
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff",
"horizontalPadding": 20,
"verticalPadding": 20
},
"dashLength": 3,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletSize": 6,
"hideBulletsCount": 100,
"lineThickness": 2,
"title": "received",
"useLineColorForBulletBorder": true,
"valueField": "Value",
"balloonText": "<span style='font-size:16px;'>[[Value]]</span>"
},
{
"id": "g2",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Value2",
"balloonText": "<span style='font-size:12px;'>[[Value2]]</span>"
},
{
"id": "g3",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Value3",
"balloonText": "<span style='font-size:12x;'>[[Value3]]</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
},
"categoryField": "Date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"dateFormats":
[
{ period: 'fff', format: 'JJ:NN:SS' },
{period:'ss',format:'JJ:NN:SS'},
{period:'mm',format:'JJ:NN'},
{period:'hh',format:'JJ:NN'},
{period:'DD',format:'MMM DD'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MM'},
{period: 'YYYY', format: 'YYYY' }
]
},
"export": {
"enabled": true
},
"dataProvider": Home.realizedReturnsChartItems
});
}

Related

amcharts line to be changed with different color if it goes down to the other line(after intersecting)

I am using amcharts, where in there are two line getting drawn. In case if the first line goes down to the second line, I need to make that part of line - bold with red color.
AmCharts.makeChart("chartdiv", {
"backgroundColor": 'blue',
"theme": "light",
"type": "serial",
"zoomOutText": '',
"color": "black",
"dataDateFormat": "HH:NN",
"legend": {
"useGraphSettings": true
},
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"position": "left",
"axisColor": "#472F52",
"title": "Time of the Day",
"type": "date",
"axisThickness": 2,
"markPeriodChange": false,
"autoGridCount": false,
"minimumDate": "00:00",
"maximumDate": "23:00",
"gridCount": 20,
"minPeriod": "ss",
}
],
"startDuration": 1,
"graphs": [{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"bullet": "round",
"lineColor": "#0D338C",
"bulletBorderColor": "#0D338C",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "expectedEndTime",
"title": "Expected End Time",
"dateFormat": "HH:NN",
"labelPosition": "top",
"labelColor": "red",
"valueAxis": "v1",
"labelText": "[[labelExpected]]",
"balloonText": "Estimated End Time : <b>[[value]]</b>"
},
{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"lineColor": "#C63F05",
"bullet": "round",
"bulletBorderColor": "#C63F05",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "actualEndTime",
"title": "Actual End Time",
"dateFormat": "HH:NN",
"labelPosition": "bottom",
"labelColor": "blue",
"valueAxis": "v1",
"labelText": "[[labelActual]]",
"balloonText": "Actual End Time : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "batchName",
"categoryAxis": {
"gridPosition": "start",
"axisThickness": 2,
"axisColor": "#472F52",
"autoGridCount": false,
"gridCount": 1000,
"title": "Batches",
"labelRotation": 30
},
"export": {
"enabled": true,
"borderRadius": "10px",
"text-align": "center",
"pdfMake": {
"content": ["'<Name of the Metric to be displayed dynamically>'",
" ", "from <startDate> To <endDate>", {
"image": "reference", //exported image
"fit": [523.28, 769.89]
}
]
},
"legend": {
"position": "bottom", // or "right", "bottom" and "left" are possible
"width": 200, // optional
"height": 200 // optional
}
}
});
there are two line getting drawn. In case if the first line goes down to the second line, I need to make that part of line - bold with red color.
Here is My JsFiddle
Any suggestions is deeply appreciated!
By adding fillAlphas on 2 graphs, it will fill the area between the graph and the top of the chart with lighter color.
graphs: [
{
...,
fillAlphas: .5
},
{
...,
fillAlphas: .5
}
]
The area with 2 colors overlapped are unnecessary but I don't know if there is a way to get rid of it easily. The lighter blue areas are the ones when the first line goes under the second line.
Would this be good enough?
fiddle: https://jsfiddle.net/davidliang2008/mze52096/

amchart bullet change background color by mouse hover

I'm using amchart with react.
I want to change bullet background color from black to red when I hover the bullet.
and is there any way to add bullet mouse over addListener event???
const config = {
"listeners": [
{
"event": "changed",
"method": (e) => {
this.changeChart(e)
}
}
],
"type": "serial",
"addClassNames": true,
"theme": "light",
"marginRight": 80,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": false,
"balloon": {
"adjustBorderColor": true,
"color": "#000000",
"cornerRadius": 3,
"borderColor": "#dddddd",
"borderThickness": 0,
"fillColor": "#FFFFFF",
"drop": true,
"fillAlpha": 0,
"horizontalPadding": 0,
"verticalPadding": 0,
"pointerOrientation": "down"
},
"graphs": [{
"bullet": "round",
"bulletSize": 10,
"customBulletField": "customBullet",
"bulletBorderAlpha": 1,
"bulletHitAreaSize" : 0,
"bulletColor": "#919191",
"bulletBorderThickness": 1,
"fillAlphas": 0,
"fillColorsField": "lineColor",
"legendValueText": "[[value]]",
"lineColorField": "lineColor",
"title": "value",
"valueField": "value",
"balloonText": '',
"balloonFunction": function (item) {
return makeBalloonHtml(item.dataContext.value, item.dataContext.changeValue);
}
}],
"chartCursor": {
"categoryBalloonDateFormat": "YYYY MMM DD",
"cursorAlpha": 0,
"fullWidth": false,
"categoryBalloonEnabled": false,
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"gridAlpha": 0,
},
"valueAxes": [{
"dashLength": 3,
"axisAlpha": 0.1,
"minimum": 0,
"maximum": this.state.maxValue + (this.state.maxValue / 4.5)
}],
"dataProvider": this.state.dataProvider
};
I'm using amchart with react.
I want to change bullet background color from black to red when I hover the bullet.
and is there any way to add bullet mouse over addListener event???
I figured it out.
we can use like this event method
{
"event": "rollOverGraphItem",
"method": (e) => {
console.log("rollOverGraphItem");
}
},
{
"event": "rollOutGraphItem",
"method": (e) => {
console.log("rollOutGraphItem")
}
}

amCharts group by Date

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>

amCharts Unbalanced

I'm trying to create an amCharts chart, based on three values but the result is completely messed up: the chart goes completely to the left, doesn't pin all the node results or shows all the data.
Please Help
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id":"v1",
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Tweets"
},
{
"id": "g2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#00FF00",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "green line",
"useLineColorForBulletBorder": true,
"valueField": "Retweets"
}],
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 30
},
"chartCursor": {
"cursorPosition": "mouse",
"pan": true,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top"
},
exportConfig:{
menuRight: '20px',
menuBottom: '50px',
menuItems: [{
icon: 'http://www.amcharts.com/lib/3/images/export.png',
format: 'png'
}]
},
"dataProvider":
[{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73},{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70}]
}
);
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart(){
//chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
chart.zoomToIndexes(0, 10);
}
http://jsfiddle.net/srp8313j/52/
The order of data points is important. For date-based charts, the data points need to come in ascending order, from oldest to the newest. While in your data they are running backwards. To fix this, simply change the order of the data points:
"dataProvider": [
{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70},
{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},
{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},
{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},
{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},
{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},
{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},
{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},
{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},
{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73}
]
Updated fiddle.

Remove grey header-box in AmCharts

While plotting some historical data on a chart I stumbled on this annoying grey box that I can't get rid of.
Basically I started with this example: http://www.amcharts.com/demos/date-based-data/ and did some slight modifications (removed chartScrollbar).
The chart is using type: serial with theme: light.
Still haven't found anything in the documentation http://docs.amcharts.com/3/javascriptcharts/ that resembles this.
I've tried 'guides', 'graphs', 'chartScrollBar' but nothing seems to work.
Appreciate any help in this.
Chart with grey header-box:
AmCharts conf:
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 0,
"marginRight": 0,
"autoMarginOffset": 0,
"path": "http://www.amcharts.com/lib/3/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"chartScrollbar": {
"enabled": false
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "bottom"
},
"export": {
"enabled": false
},
"dataProvider": chartData
});
The "grey box" is chart scrollbar. By default chart does not display the scrollbar. So to remove it simply remove it from your chart config altogether:
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 0,
"marginRight": 0,
"autoMarginOffset": 0,
"path": "http://www.amcharts.com/lib/3/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "bottom"
},
"export": {
"enabled": false
},
"dataProvider": chartData
});

Categories