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.
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
}
});
I'm using AmChart do display my chart with the information from my server.
If you run the code and scroll down and hover the chart it will display (Aug 01, 2012 OR Sep 01, 2012 OR Oct 01, 2012)
I'cant seem to find a way to change the value so it only display the month (Aug OR Sep OR Oct)
Does anyome know how to fix that?
var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 60,
"marginButtom": 70,
"autoMarginOffset": 20,
"dataDateFormat": "YYYY-MM",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"allLabels": [{
"text": "Index / mio",
"bold": true,
"x": 20,
"y": height,
"rotation": "270"
}, {
"text": "Index / mio",
"bold": true,
"x": width / 1.2,
"y": (height * 2) - 20
}],
"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:10px;'>[[value]]</span>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-08",
"value": 13
}, {
"date": "2012-09",
"value": 22
}, {
"date": "2012-10",
"value": 23
}]
});
#chartdiv {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can modify the format string in the chartCursor's categoryBalloonDateFormat property to "MMM" instead of the default "MMM DD, YYYY".
"chartCursor": {
"categoryBalloonDateFormat": "MMM",
// ...
}
Updated demo below:
var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 60,
"marginButtom": 70,
"autoMarginOffset": 20,
"dataDateFormat": "YYYY-MM",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"allLabels": [{
"text": "Index / mio",
"bold": true,
"x": 20,
"y": height,
"rotation": "270"
}, {
"text": "Index / mio",
"bold": true,
"x": width / 1.2,
"y": (height * 2) - 20
}],
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
},
"labelText": "[[category]]",
"labelPosition": "bottom",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:10px;'>[[value]]</span>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"categoryBalloonDateFormat": "MMM"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-08",
"value": 13
}, {
"date": "2012-09",
"value": 22
}, {
"date": "2012-10",
"value": 23
}]
});
#chartdiv {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
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 am trying not to show the labels of x-axis, which in this case are:
"7.5, 8.0, 8.5, 9.0" and so on.
This is what I have tried so far:
<div id="chartdiv"></div>
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"dataProvider": [{
"name": "3s",
"startTime": 8,
"endTime": 11,
"color": "#FF0F00"
}],
"valueAxes": [{
"axisAlpha": 0,
"gridAlpha": 0.1
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]<br>ends at [[endTime]]",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime"
}],
"rotate": true,
"columnWidth": 1,
"categoryField": "name",
});
JSFiddle Demo
Use labelsEnabled on your value axis:
"valueAxes": [{
"axisAlpha": 0,
"gridAlpha": 0.1,
"labelsEnabled": false
}],
Here's the updated fiddle.
labelsEnabled can be used in categoryAxis as well:
"categoryAxis": {
"axisColor": "#555555",
"gridAlpha": 0.1,
"gridColor": "#FFFFFF",
"gridCount": 50,
"labelsEnabled": false
},
Use integersOnly on your valueAxis property:
"valueAxes":[{
"integersOnly": true
}],
Now your value will be displayed like 7, 8, 9...
I would like to draw a chart using this code
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"dataProvider": [
{
"maand": #Model.Maanden[0],
"neerslag": 33,
"temperatuur": 33
},
{
"maand": "Februari",
"neerslag": 33,
"temperatuur": 33
}
],
"valueAxes": [
{
"axisAlpha": 0,
"position": "left"
}
],
"startDuration": 1,
"graphs": [
{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Gemiddelde neerslag",
"type": "column",
"valueField": "neerslag"
}, {
"id": "graph2",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Gemiddelde temperatuur",
"valueField": "temperatuur"
}
],
"categoryField": "maand",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
</script>
when I use "maand": #Model.Maanden[0] instead of a string it doesn't draw a chart but I know I can access the properties in the model what am I doing wrong?
Try use "maand": '#Model.Maanden[0]' because if you dont put the '' the javascript will understand that the value of the "maand" is #Model.Maanden[0] and not the value of #Model.Maanden[0].