i have some troubles with displaying data via amcharts when "minPeriod" property is equal to "WW".
My codepen examples:
var data = [];
var date = new Date();
for (var i = 0; i< 10;i++){
data.push({
calcDate: moment(new Date()).startOf('day').add(i, 'days').toDate(),
value: Math.random(100)});}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
"type": "column",
"fillAlphas": 1,
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
"lineColor": "#b6d278",
"valueField": "value"
}],
"chartCursor": {
"cursorAlpha": 0.1,
"cursorColor": "#000000",
},
"categoryAxis": {
"minPeriod": "DD",
"parseDates": true,
"minorGridEnabled": true
},
"export": {
"enabled": true
}});
Days example (how it must look)
var data = [];
var date = new Date();
for (var i = 0; i< 10;i++){
data.push({
calcDate: moment(new Date()).startOf('day').add(7*i, 'days').toDate(),
value: Math.random(100)});}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
"type": "column",
"fillAlphas": 1,
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
"lineColor": "#b6d278",
"valueField": "value"
}],
"chartCursor": {
"cursorAlpha": 0.1,
"cursorColor": "#000000",
},
"categoryAxis": {
"minPeriod": "WW",
"parseDates": true,
"minorGridEnabled": true
},
"export": {
"enabled": true
}
});
Week example (broken).
As you can see, all the last link's labels are aligned to the left and it makes my chart pretty ugly. I think it's happening because of the disconnecting between real values and expected by categoryAxis. Maybe there's a property to fix it, but i could'n find it.
If you've faced the same problem and have some advices to me, please help.
You can set centerLabels to true in your categoryAxis to force the labels to be centered.
Updated codepen
Related
I'm using the Amcharts in a react application using the following lib
amcharts3-react.
This is my Amcharts config:
export const arabicCharts = {
"type": "serial",
"theme": "light",
"autoMarginOffset": 20,
"graphs": [{
"id": "g1",
"balloonText": "[[value]]",
"bullet": "diamond",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "ay",
"lineAlpha": 0.8,
"lineThickness": 2,
"lineColor": "#b0de09",
"fillAlphas": 0,
"useLineColorForBulletBorder": true
}, {
"id": "g2",
"balloonText": "[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "by",
"lineAlpha": 0.8,
"lineThickness": 2,
"lineColor": "#fcd202",
"fillAlphas": 0,
"useLineColorForBulletBorder": true
}],
"chartCursor": {
"limitToGraph": "g1"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"valueAxes": [{
"axisAlpha": 0,
"position": "right",
},{
"axisAlpha": 1,
"position": "bottom",
}],
};
valueAxes is only applied for the Y Axis by adding his title.
Why is not applied for the X Axis? valueAxes second object is not working.
Thanks.
I already answered on Github, but for anyone else that's curious (note that this relates to AmCharts 3):
Serial charts in AmCharts 3 can only have one horizontal/X axis (or Y if rotate: true is set), and that axis must be a category axis, which isn't fully numeric. You can set the second value axis as a second Y axis (position: "left" or position: "right"), but you also need to specify IDs and assign your graphs to them, e.g.
graphs: [{
// ...
"valueAxis": "v1, //use right hand axis
}, {
// ...
valueAxis: "v2" //use left hand axis
}],
// ...
valueAxes: [{
"position": "right",
"id": "v1",
// ...
}, {
"position": "left",
"id": "v2"
}]
If you need both a numeric X and Y axis, consider using v3's XY chart instead.
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'm trying to add a class name to a custom bullet, so I can position it with CSS. I'm also trying to add a value to that custom bullet. I don't think I have it set right in the gauge js:
var chart = AmCharts.makeChart("maint-good", {
"type": "serial",
"rotate": true,
"theme": "light",
"path": "http://www.amcharts.com/lib/3/",
"autoMargins": false,
"marginTop": 80,
"marginLeft": 80,
"marginBottom": 30,
"marginRight": 50,
"addClassNames": true,
"dataProvider": [{
"marginTop": 80,
"category": "",
"excelent": 20,
"good": 20,
"average": 20,
"poor": 20,
"bad": 20,
"limit": 15,
"full": 15,
"bullet": 15,
"icon": "assets/img/icons/maint_good.svg",
"ok": "assets/img/icons/ok.svg"
}],
"valueAxes": [{
"maximum": 20,
"stackType": "regular",
"gridAlpha": 0
}],
"startDuration": 1,
"graphs": [{
"columnWidth": 0.6,
"lineColor": "#2F2F2F",
"lineThickness": 22,
"noStepRisers": true,
"stackable": false,
"type": "step",
"valueField": "limit",
"bulletSize": 95,
"customBulletField": "icon"
}, {
"valueField": "full",
"showBalloon": false,
"type": "column",
"lineAlpha": 0,
"fillAlphas": 0.8,
"fillColors": ["#2F2F2F", "#2F2F2F", "#2F2F2F"],
"gradientOrientation": "horizontal"
}, {
"clustered": false,
"columnWidth": 0.3,
"fillAlphas": 1,
"lineColor": "#8dc53e",
"stackable": false,
"type": "column",
"valueField": "bullet",
"customBulletField": "ok",
"bulletSize": 95,
}],
"columnWidth": 1,
"categoryField": "category",
"categoryAxis": {
"gridAlpha": 0,
"position": "left",
"display": "none"
}
});
The two bullets I'm trying to add a class to are "icon" and "ok". I know there is documentation in amCharts for this, but it does not give any examples. Could someone provide me with an example?
You can use graph's property classNameField to specify which field in data holds a custom class name to be applied for the specific data point.
I.e.:
"graphs": [{
// ... other graph settings
"customBulletField": "icon",
"classNameField": "iconClass"
}, ...
In data:
"dataProvider": [{
// ...
"icon": "assets/img/icons/maint_good.svg",
"iconClass": "icon",
// ...
}]
Now, the chart will apply both the hardcoded class name "amcharts-graph-bullet" and custom class name, such as "icon":
Now you can target this specific bullet using CSS:
.amcharts-graph-bullet.icon image {
/* your css here */
}
Please note, that in order for the above to work, the addClassNames setting needs to be enabled. You already have that set in your code, just though it's worth mentioning for anyone else, looking for similar solution.
I am working with a .ashx data handler that successfully calls and returns a valid JSON formatting (confirmed using http://www.freeformatter.com/json-validator.html).
I want to use that returned data in a amChart. My chart works correctly with hardcoded data. How do I make the chart accept the dynamic ashx JSON data?
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"date": "11/04/2014",
"val1": 125,
"val2": 150
}, {
"date": "11/05/2014",
"val1": 100,
"val2": 130
},
// ETC
]
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors By Date"
}],
"graphs": [{
"id": "val1",
"title": "val1bar",
"valueField": "val1",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
}, {
"id": "val2",
"title": "val2bar",
"valueField": "val2",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
});
</script>
Probably the easiest way for you to utilize JSON output from the ASHX is amChart's own Data Loader plugin.
Basically you would just need to include amcharts/plugins/dataloader/dataloader.min.js, then replace dataProvider with dataLoader info, like this:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataLoader": {
"url": "mydata.ashx"
},
"valueAxes": [ {
"axisAlpha": 0,
"position": "left",
"title": "Visitors By Date"
} ],
"graphs": [ {
"id": "val1",
"title": "val1bar",
"valueField": "val1",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
}, {
"id": "val2",
"title": "val2bar",
"valueField": "val2",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
} ],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
} );
Data Loader expects JSON data by default, so you don't need to set any other options.
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...