Amcharts: Force-show balloon over specific point.
I want chart cursor on last date in chart.
Please see my console in image. i have generated error.
Here is a amcharts doc link: https://www.amcharts.com/kbase/force-show-balloon-over-specific-data-point/
Working sample: http://jsfiddle.net/amcharts/JdTuA/
But i am unable to do it. Here is my code and error is also pasted in image. Please guide.
<script>
(function () {
var chartWeight = AmCharts.makeChart("{{ div }}", {
"type": "serial",
"theme": "light",
"dataProvider": {{ data.json|raw }},
"creditsPosition": "top-right",
"synchronizeGrid":false,
"zoomOutText": "",
"valueAxes": [
{
"id":"v_kg",
//"title": "Bodyweight in kg",
//"title": "Körpergewicht in kg",
"axisColor": "#2A3B55",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
"position": "left",
"labelsEnabled": false,
"minimum": {{ 0.99 * data.chartsOptions.all.minKg }},
"maximum": {{ 1.01 * data.chartsOptions.all.maxKg }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id":"v_ratio",
//"title": "Bodyfat in %",
//"title": "Körperfett in %",
"axisColor": "#A46A1F",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false,
"minimum": {{ (0.9 * data.chartsOptions.all.minFat)|round(1) }},
"maximum": {{ (1.05 * data.chartsOptions.all.maxFat)|round(1) }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id":"v_lean",
//"title": "Lean Mass in kg",
//"title": "Muskelmasse in kg",
"axisColor": "#80B3FF",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false
},
],
"graphs": [{
"valueAxis": "v_kg",
"lineColor": "#2A3B55",
"lineThickness": 2,
"title": "Bodyweight",
"valueField": "kgBodyweight",
"fillAlphas": 0,
"balloonText": "Weight: [[value]]kg",
"legendValueText": "[[value]]kg",
}, {
//"valueAxis": "v_lean",
"valueAxis": "v_kg",
"lineColor": "#80B3FF",
"lineThickness": 2,
"title": "Lean Mass",
"valueField": "kgLeanmass",
"fillAlphas": 0,
"balloonText": "Lean Mass: [[value]]kg",
"legendValueText": "[[value]]kg"
}, {
"valueAxis": "v_ratio",
"lineColor": "#A46A1F",
"lineThickness": 2,
"title": "Fat",
"valueField": "ratioBodyfat",
"fillAlphas": 0,
"balloonText": "Fat: [[value]]%",
"legendValueText": "[[value]]%"
}],
"chartCursor": {
"cursorPosition": 'mouse',
"leaveCursor": true,
"valueBalloonsEnabled": true,
},
"chartScrollbar": {
"selectedBackgroundColor": "#7F7F7F",
"backgroundColor": "#e9e9e9",
"offset": 12,
"selectedBackgroundAlpha": 1,
"backgroundAlpha": 1
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true,
"startOnAxis": true,
"gridAlpha": 0.07,
},
"export": {
"enabled": false,
},
"legend": {
"useGraphSettings": true,
},
});
chartCursor = new AmCharts.ChartCursor();
var date1 = new Date();
chartCursor.showCursorAt(date1);
chartWeight.addListener("dataUpdated", function () {
chartWeight.zoomToIndexes(chartWeight.dataProvider.length - 60, chartWeight.dataProvider.length);
});
})();
</script>
The new chart cursor object you created is not attached to a chart, which is why it's complaining about an undefined categoryAxis. When translating the OO-based demos to the makeChart/JSON method, you only need to call the method directly from the chart object since the JSON structure maps directly to how the chart is structured internally. Rather than create a new object, just call yourChartObject.chartCursor.showCursorAt(<your category value here>). In this situation, you're better off doing this in the init event so the chart will be fully instantiated before you call the method:
AmCharts.makeChart("...", {
// ...
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.showCursorAt(/* your date value */);
}
}]
})
Demo below:
(function() {
var chartWeight = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": getData(),
"creditsPosition": "top-right",
"synchronizeGrid": false,
"zoomOutText": "",
"valueAxes": [{
"id": "v_kg",
//"title": "Bodyweight in kg",
//"title": "Körpergewicht in kg",
"axisColor": "#2A3B55",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
"position": "left",
"labelsEnabled": false,
// "minimum": {{ 0.99 * data.chartsOptions.all.minKg }},
// "maximum": {{ 1.01 * data.chartsOptions.all.maxKg }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id": "v_ratio",
//"title": "Bodyfat in %",
//"title": "Körperfett in %",
"axisColor": "#A46A1F",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false,
// "minimum": {{ (0.9 * data.chartsOptions.all.minFat)|round(1) }},
// "maximum": {{ (1.05 * data.chartsOptions.all.maxFat)|round(1) }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id": "v_lean",
//"title": "Lean Mass in kg",
//"title": "Muskelmasse in kg",
"axisColor": "#80B3FF",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false
},
],
"graphs": [{
"valueAxis": "v_kg",
"lineColor": "#2A3B55",
"lineThickness": 2,
"title": "Bodyweight",
"valueField": "kgBodyweight",
"fillAlphas": 0,
"balloonText": "Weight: [[value]]kg",
"legendValueText": "[[value]]kg",
}, {
//"valueAxis": "v_lean",
"valueAxis": "v_kg",
"lineColor": "#80B3FF",
"lineThickness": 2,
"title": "Lean Mass",
"valueField": "kgLeanmass",
"fillAlphas": 0,
"balloonText": "Lean Mass: [[value]]kg",
"legendValueText": "[[value]]kg"
}, {
"valueAxis": "v_ratio",
"lineColor": "#A46A1F",
"lineThickness": 2,
"title": "Fat",
"valueField": "ratioBodyfat",
"fillAlphas": 0,
"balloonText": "Fat: [[value]]%",
"legendValueText": "[[value]]%"
}],
"chartCursor": {
"cursorPosition": 'mouse',
"leaveCursor": true,
"valueBalloonsEnabled": true,
},
"chartScrollbar": {
"selectedBackgroundColor": "#7F7F7F",
"backgroundColor": "#e9e9e9",
"offset": 12,
"selectedBackgroundAlpha": 1,
"backgroundAlpha": 1
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true,
"startOnAxis": true,
"gridAlpha": 0.07,
},
"export": {
"enabled": false,
},
"legend": {
"useGraphSettings": true,
},
"listeners": [{
"event": "init",
"method": function(e) {
var date = new Date();
date.setHours(0, 0, 0, 0);
date.setDate(date.getDate() - Math.floor(Math.random() * 20))
e.chart.chartCursor.showCursorAt(date);
}
}]
});
chartWeight.addListener("dataUpdated", function() {
chartWeight.zoomToIndexes(chartWeight.dataProvider.length - 60, chartWeight.dataProvider.length);
});
function getData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 100);
firstDate.setHours(0, 0, 0, 0);
var data = [];
for (var i = 0; i < 120; ++i) {
var newDate = new Date(firstDate);
newDate.setDate(i);
var dataItem = {
"date": newDate,
"kgLeanmass": Math.floor(Math.random() * 20 + 40),
"kgBodyweight": Math.floor(Math.random() * 20 + 60)
};
dataItem.ratioBodyfat = parseFloat((100 * ((dataItem.kgBodyweight - dataItem.kgLeanmass) / dataItem.kgBodyweight)).toFixed(2));
data.push(dataItem);
}
return data;
}
})();
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
Related
Made this with Amcharts V3
I've set line thickness in my graph to 3. Whenever the readings are 0, the graph line will then lie on x axis for those values, and here the thickness becomes 1. But if the values are more than 0, then the thickness is correct of 3.
Here is the function which renders the graphs:
function drawChart(chartData, color)
{
var ballon = '<div class="ballon"><p class="heading">[[date_full]]</p><div class="values"><span class="chart_label">Score</span><span class="chart_reading">[[score]]</span></div></div>';
return AmCharts.makeChart("score_chart",
{
"type": "serial",
"theme": "none",
"dataProvider": chartData,
"valueAxes": [
{
"axisAlpha": 0,
"gridAlpha": 0.5,
"position": "left",
"minimum": 0,
"maximum": 100,
"labelsEnabled": true,
"gridColor": "#E9EBED",
"axisColor": "#E9EBED",
"color": "#68737D",
"fontSize": 13
}],
"graphs": [
{
"id": "g1",
"balloonText": ballon,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"title": "red line",
"valueField": "score",
"useLineColorForBulletBorder": true,
"lineColor": color,
"lineThickness": 3,
"bulletBorderThickness": 3,
"balloonColor": "white",
"balloon": {
"borderAlpha": 0,
"borderThickness": 0,
"fillAlpha": 0
},
"bulletSize": 10
}],
"chartCursor":
{
"limitToGraph": "g1",
"cursorColor": color
},
"categoryField": "date",
"categoryAxis":
{
"parseDates": false,
"axisColor": "lightgrey",
"gridAlpha": 0,
"color": "#68737D",
"fontSize": 13
}
});
In this AmCharts serial chart (Line chart), when the line chart gets rendered, the label in the category axis gets right-aligned from the datapoint intersection.
I need these labels to be center-aligned just below the datapoint intersection scale.
This is the current source code:
chart = AmCharts.makeChart(id, {
"type": "serial",
"autoMarginOffset": 20,
"usePrefixes":true,
"prefixesOfBigNumbers":[
{"number":1e+3,"prefix":"k"},
{"number":1e+6,"prefix":"M"},
{"number":1e+9,"prefix":"G"},
{"number":1e+12,"prefix":"T"},
{"number":1e+15,"prefix":"P"},
{"number":1e+18,"prefix":"E"},
{"number":1e+21,"prefix":"Z"},
{"number":1e+24,"prefix":"Y"}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"ignoreAxisWidth":false
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [{
"id": "g1",
"fillColors":color,
"lineColor": color,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"fillColors": color,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "column-2"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": 'JJ-NN'
},
"categoryField": "column-1",
"categoryAxis": {
"gridPosition": "start",
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": false,
"minPeriod": "mm",
"gridPosition":'middle',
"centerLabels":true,
"equalSpacing":false
},
"dataProvider": dataValue,
"export": {
"enabled": true
},
"allLabels": [{
"text": timeperiod,
"align": "center",
"y":0
}]
});
And this is the rendered graph:
How can this be fixed?
To get the label centered directly under the tick when parsing dates, you have to set equalSpacing to true.
var color = "#112233";
var timeperiod = "test";
var dataValue = generateData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"autoMarginOffset": 20,
"usePrefixes":true,
"prefixesOfBigNumbers":[
{"number":1e+3,"prefix":"k"},
{"number":1e+6,"prefix":"M"},
{"number":1e+9,"prefix":"G"},
{"number":1e+12,"prefix":"T"},
{"number":1e+15,"prefix":"P"},
{"number":1e+18,"prefix":"E"},
{"number":1e+21,"prefix":"Z"},
{"number":1e+24,"prefix":"Y"}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"ignoreAxisWidth":false
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [{
"id": "g1",
"fillColors":color,
"lineColor": color,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"fillColors": color,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "column-2"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": 'JJ-NN'
},
"categoryField": "column-1",
"categoryAxis": {
//"gridPosition": "start", does not work with parseDates
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": false,
"minPeriod": "mm",
"gridPosition":'middle',
//"centerLabelOnFullPeriod":false, //alternate solution but won't center directly under the axis tick
"equalSpacing":true
},
"dataProvider": dataValue,
"export": {
"enabled": true
},
"allLabels": [{
"text": timeperiod,
"align": "center",
"y":0
}]
});
function generateData() {
var data = [];
var firstDate = new Date();
firstDate.setHours(0,0,0,0);
for (var i = 0; i < 10; ++i) {
var newDate = new Date(firstDate);
newDate.setMinutes(i);
data.push({
"column-1": newDate,
"column-2": Math.floor(Math.random() * 20 + 1)
});
}
return data;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
You can also use centerLabelOnFullPeriod if you don't want to use equalSpacing, but it will only position it slightly to the right of the tick but not quite at the center.
I need to remove the category field from the bar chart.Please suggest me how can i do this.
if i make labels inside false it is coming in left side.i need to remove it completely from the bar.
also check this jsFiddle
https://jsfiddle.net/ArunKumarUmma/21wm5hf5/6/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [ {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name1",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name2",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name3",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name4",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name5",
"value":"148773.88",
"value1":"60794.55"
}],
"type": "serial",
"theme": "light",
"categoryField": "name",
"rotate": true,
"startDuration": 1,
"startEffect":"easeOutSine",
"columnSpacing": 0,
"autoMargins": false,
"marginBottom": 0,
"pullOutRadius": 0,
"categoryAxis": {
"inside": true,
"gridPosition": "start",
"gridAlpha": 0,
"axisAlpha": 0,
"tickPosition": "start",
"tickLength": 0,
"position": "left"
},
"trendLines": [],
"graphs": [
{
"balloonText": " [[name]]: $[[amt]]<br> Index: [[Index]]",
"fillAlphas": 0.8,
"fillColorsField": "color1",
"id": "AmGraph-12",
"lineAlpha": 0.2,
"title": "amt",
"type": "column",
"valueField": "value",
"showHandOnHover":true,
"labelText": "[[Index]]",
"labelPosition": "right",
"fixedColumnWidth": 15
},
{
"balloonText": " [[name]]: $[[amt1]]",
"fillAlphas": 0.8,
"fillColorsField": "color",
"id": "AmGraph-22",
"lineAlpha": 0.2,
"title": "amt",
"type": "column",
"valueField": "value1",
"showHandOnHover":true,
"fixedColumnWidth": 15
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"minimum":0
}
],
"allLabels": [],
"balloon": {
"fillColor": "#000000",
"color": "#ffffff",
"fillAlpha": 1.0,
"offsetX": 0,
"offsetY": 0,
"horizontalPadding":0,
"maxWidth":100
},
"titles": [],
"export": {
"enabled": true
}
} );
Please check the image what i required exactly
You can hide category axis labels by setting labelsEnabled to false in the categoryAxis object.
To remove the value label on the right side of the bar, remove the labelText definition in your graph object.
Updated fiddle
Just add "hideCredits":true in your code.
It will hide the text "JSCharts by Amcharts".
amcharts:any;
this.amcharts = AmCharts.makeChart("chartdiv", {
"type": "serial", "theme": "none",
"hideCredits":true,
"pathToImages": "/lib/3/images/",
"dataProvider": this.myList,
"valueAxes": [{ "id": "v1", "axisAlpha": 0, "position": "left" }, { "id": "v2", "axisAlpha": 0, "position": "right", "unit": "%", "gridAlpha": 0, "maximum": 100 }],
"startDuration": 1,
"graphs": [{ "fillAlphas": 1, "title": "value", "type": "column", "valueField": "value" }, { "valueAxis": "v2", "bullet": "round", "lineThickness": 3, "bulletSize": 7, "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "useLineColorForBulletBorder": true, "fillAlphas": 0, "lineAlpha": 1, "title": "Value", "valueField": "Value" }],
"categoryField": "name",
"categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "tickLength": 2, "labelRotation": 90}
});
In the following example, the value of X=X1+X2+X3, and I want to show negative X3 below the zero axis. Also, when computing the percentage value, it appears that negative value of X3 is not taken into account. For example, for year 2001, percentage values for X1, X2, and X3 are computed as 70, 20, and -10, respectively. However, I want these to be (100*(70/(70+20-10)) % (87.5 %), (100*(20/(70+20-10)) % (25%), and (100*(-10/(70+20-10)) % (-12.5 %), respectively.
example here: https://jsfiddle.net/831g79xp/1/
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight":30,
"legend": {
"equalWidths": false,
"periodValueText": "total: [[value.sum]]",
"valueText": "[[value]] ([[percents]]%)",
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"dataProvider": [
{
"year": 2001,
"X1": 70,
"X2": 20,
"X3": -10,
}, {
"year": 2002,
"X1": 80,
"X2": 15,
"X3": -20,
}, {
"year": 2003,
"X1": 90,
"X2": 20,
"X3": -25,
}],
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"position": "left",
"title": "X Components"
}],
"graphs": [{
"balloonText":"<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X1",
"valueField": "X1"
}, {
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X2",
"valueField": "X2"
}, {
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X3",
"valueField": "X3"
}
],
"plotAreaBorderAlpha": 0,
"marginTop": 10,
"marginLeft": 0,
"marginBottom": 0,
"chartScrollbar": {},
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "year",
"categoryAxis": {
"startOnAxis": true,
"axisColor": "#DADADA",
"gridAlpha": 0.07,
"title": "Year"
},
"export": {
"enabled": true
}
});
I realized an amChart with the online generator.
This is the result:
https://live.amcharts.com/ODVhY/
As you can see, the label with the value is visible only on the red bulled.
How can I extend it to all 5 bullet?
My configuration
{
"type": "radar",
"categoryField": "areas",
"colors": [
"#64cbd5",
"#7cdae3"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"addClassNames": true,
"color": "#EEEEEE",
"fontFamily": "Ubuntu",
"fontSize": 12,
"theme": "dark",
"graphs": [
{
"balloonText": "[[value]] in [[category]]",
"bullet": "round",
"bulletAlpha": 0,
"bulletBorderAlpha": 1,
"bulletSize": 17,
"clustered": false,
"columnWidth": 0,
"connect": false,
"cursorBulletAlpha": 0,
"descriptionField": "score",
"fillAlphas": 0.79,
"fillColors": "#64CBD5",
"gapPeriod": 2,
"id": "AmGraph-1",
"labelAnchor": "middle",
"labelOffset": 10,
"labelPosition": "bottom",
"labelText": "[[score]]",
"legendAlpha": 0,
"lineAlpha": 1,
"lineColor": "#64CBD5",
"lineColorField": "color",
"lineThickness": 0,
"minDistance": 0,
"negativeBase": 2,
"showAllValueLabels": true,
"stackable": false,
"switchable": false,
"title": "[[value]] in [[category]]",
"topRadius": 0,
"valueField": "score",
"visibleInLegend": false
}
],
"guides": [],
"valueAxes": [
{
"axisTitleOffset": 20,
"gridType": "circles",
"id": "ValueAxis-1",
"minimum": 0,
"axisAlpha": 1,
"gridAlpha": 0.35,
"labelOffset": 2,
"labelsEnabled": false,
"tickLength": 3
}
],
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": [
{
"score": 156.9,
"areas": "MEM",
"color": "#22BCA7"
},
{
"score": 131.1,
"areas": "AGI",
"color": "#76C741"
},
{
"score": 115.8,
"areas": "ATN",
"color": "#FC385A"
},
{
"score": 109.9,
"areas": "PRS",
"color": "#AD78AC"
},
{
"score": 108.3,
"areas": "VSP",
"color": "#FC683E"
}
]
}
As #martynasma said in the comments, it was a bug of amcharts.
It is now fixed in the latest version.