We have using stacked amChart(serial) for showing graph. We have added a filter functionality for graphs.The user can filter data according to week,month and quarter. We have using bootstrap. The amChart is placed in div having class "col-md-6". When user select week filter the amchart having 52 lables.At that time the bars are very thin. It is very difficult to analyze the data.So we want to increase the label frequency. We have set label frequency into 5 but it is not changing
AmCharts.makeChart("stackedChart", {
"type": "serial",
"theme": "light",
"legend": {
"position": "right",
"useGraphSettings": true,
},
"dataProvider": data,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"position": "left",
"gridCount": 5
}],
"plotAreaFillAlphas": 0.1,
"graphs": graph,
"categoryField": "Period",
"categoryAxis": {
"gridPosition": "start",
"labelFrequency": 5,
},
"export": {
"enabled": true
}
});
labelFrequency is probably not the best way to go about it. It basically means display a label every X'th grid line.
What you are looking for is pre-zooming the chart. For that you can use maxSelectedSeries. I.e.:
AmCharts.makeChart("stackedChart", {
...
"maxSelectedSeries": 5,
...
});
Also, if you are going to have pre-zoomed chart, you will also need the means to scroll it. For that you need to add a scrolbar:
AmCharts.makeChart("stackedChart", {
...
"maxSelectedSeries": 5,
"chartScrollbar": {},
...
});
Here's the whole chart with the above applied:
AmCharts.makeChart( "stackedChart", {
"type": "serial",
"theme": "light",
"maxSelectedSeries": 5,
"chartScrollbar": {},
"legend": {
"position": "right",
"useGraphSettings": true,
},
"dataProvider": data,
"valueAxes": [ {
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"position": "left",
"gridCount": 5
} ],
"plotAreaFillAlphas": 0.1,
"graphs": graph,
"categoryField": "Period",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
} );
Related
I want to show multiple line graphs in stepline amchart. But the issue is
for one response , I need to show one Line graph only, for the same chart for
another response I need to show 2 line graphs.
this.timeChart = this.AmCharts.makeChart("chartdiv2", {
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Response Count",
"autoGridCount": false,
"gridCount": 5,
"gridAlpha": 0
}],
"graphs": [{
"id": "g1",
"balloonText": "[[title]]<br>[[category]]<br><b>[[value]] </b>",
"lineThickness": 1,
"bullet": "square",
"type": "step",
"bulletAlpha": 0,
"bulletSize": 4,
"bulletBorderAlpha": 0,
"valueField": "members",
'lineColor': 'pink',
'title': 'Member Response',
},
After this I want to add another graph object in Update Chart.
How to do that.
Am Chart showing incorrectly, Here is following ajax code, incorrect thumb of chart.
I am using ajax to get the response and initialized the amchart (area)
Ajax json response data
{"success":true,"graph_data":[{"date":"2018-06-21","value":121.65},{"date":"2018-06-20","value":121.65},{"date":"2018-06-19","value":121.5},{"date":"2018-06-18","value":121.3},{"date":"2018-06-17","value":120.55},{"date":"2018-06-16","value":119.84},{"date":"2018-06-14","value":119.88}],"min_period":"DD","message":null}
Here code which I am initializing for amchart
var chart = AmCharts.makeChart( "graph_chart_div", {
"type": "serial",
"theme": "light",
"marginRight": 5,
"marginLeft": 5,
"minPeriod":response.min_period,
"autoMarginOffset": 5,
"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",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"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>"
} ],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45,
"minorGridEnabled": true,
/* ENSURE 2 LINES BELOW ARE ADDED */
"autoGridCount": false,
"gridCount": 12,
"parseDates": true,
"dashLength": 1,
// "minorGridEnabled": true
},
"export": {
"enabled": false
},
// "dataProvider": graph_data
"dataProvider": response.graph_data
} );
This is currently initialized chart
I want to show the following chart for my data
Your date data is out of order. AmCharts requires your date-based data to be in date-ascending order when using parseDates.
Important: If this is set to true, the data points needs to come pre-ordered in ascending order. Data with incorrect order might result in visual and functional glitches on the chart.
Once you fix the sort order, your chart will render correctly.
I have several amCharts charts where I am trying to set up the default zoom. I can get it to work just fine with my code when using dataProvider such as here: http://jsfiddle.net/f2s32ojL/7/
When I try to do it on my own site but using dataLoader from a database, it does not work. It just gives me a default zoom of the entire dataset instead of the timeframe I want to use. Here is the code:
var chart = AmCharts.makeChart("chartdivFC", {
"type": "serial",
"dataLoader": {
"url": "includes/fc-chart-data2.php",
"format": "json"
},
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true,
"guides": [{
"value": 0,
"toValue": "<?=$min_FC?>",
"fillColor": "#CC0000",
"inside": true,
"fillAlpha": 0.1,
"lineAlpha": 0
}]
}],
"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": "FC",
"balloonText": "<span style='font-size:18px;'>[[FC]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 50,
"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
},
"export": {
"enabled": true
},
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}
}]
});
The json of the dataLoader looks like this:
[{"date":"2016-08-04 14:18:49","FC":"9"},{"date":"2016-08-04 14:44:30","FC":"9"},{"date":"2016-08-04 20:33:11","FC":"7.5"},{.....
Does anyone have any ideas how to make this work?
Thank you.
The reason why it doesn't work is because rendered fires before the dataLoader finishes loading your data; rendered fires when the chart area is rendered, regardless of whether data actually exists in the chart, so by the time you see the "Loading data" message pop up, the event has already fired.
You have two options:
1) Use the complete callback in the dataLoader to call the zoom method after the data has been loaded. Note that you have to wrap the zoom in a setTimeout call:
"dataLoader": {
"url": "includes/fc-chart-data2.php",
"complete": function(chart) {
setTimeout(function() {
chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1))
});
}
},
2) Use the dataUpdated event instead. Note that this will fire every time you call validateData, which might not be ideal.
"listeners": [{
"event": "dataUpdated",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}
}]
I'm trying to build a simple graph. X-axis is month, Y-axis is value. Here is the demo of my graph
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataDateFormat": "DD-MM-YYYY",
"graphs": [
{
"id":"g8",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":0,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d1",
"yField":"p1",
"xAxis":"g8",
"balloonText":"<span style='font-size:18px;'>$[[d2]]</span><br>07/1/2017-12/31/2017"
}
],
"valueAxes": [
{
"id": "g8",
"axisAlpha": 1,
"gridAlpha": 1,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"centerLabelOnFullp": true,
"position": "bottom",
"type": "date",
"minp": "DD-MM-YYYY",
"markPeriodChange": false,
}
],
"dataProvider": [
{
"d1":"01/01/2017",
"p1":"5353.9000"
},{
"d1":"02/01/2017",
"p1":"5353.9000"
},{
"d1":"01/02/2017",
"p1":"5288.9500"
},{
"d1":"01/03/2017",
"p1":"6850.9900"
},{
"d1":"01/04/2017",
"p1":"5543.1900"
},{
"d1":"01/05/2017",
"p1":"5519.0100"
},{
"d1":"01/06/2017",
"p1":"6191.7500"
}
]
});
https://jsfiddle.net/noroots/xru967ha/
I don't know why, but X-axis labels missing June and all labels looks like having left offset. How can I move it to the left and show missing month?
You could add data items before and after without drawing points:
"dataProvider": [{
"d1":"01/12/2016"
}, {
"d1":"01/01/2017",
"p1":"5353.9000"
}, ...
Please check the example here: https://jsfiddle.net/xru967ha/5/
Old Answer
Please check the example below. It's using AmSerialChart and then the datePadding plugin to set 15 extra days at the beginning and the end of your data.
"categoryAxis": {
"parseDates": true,
"minPeriod": "MM",
"prependPeriods": 0.5, // add 15 days start
"appendPeriods": 0.5 // add 15 days to end
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 60,
"dataDateFormat": "DD-MM-YYYY",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true,
"dashLength": 5
}],
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor":"#67b7dc",
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "p1",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"categoryField": "d1",
"categoryAxis": {
"parseDates": true,
"minorGridEnabled": true,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"boldPeriodBeginning": false,
"markPeriodChange": false,
"minPeriod": "MM",
"prependPeriods": 0.5,
"appendPeriods": 0.5
},
"export": {
"enabled": true
},
"dataProvider": [
{
"d1":"01/01/2017",
"p1":"5353.9000"
},{
"d1":"02/01/2017",
"p1":"5353.9000"
},{
"d1":"01/02/2017",
"p1":"5288.9500"
},{
"d1":"01/03/2017",
"p1":"6850.9900"
},{
"d1":"01/04/2017",
"p1":"5543.1900"
},{
"d1":"01/05/2017",
"p1":"5519.0100"
},{
"d1":"01/06/2017",
"p1":"6191.7500"
}
]
});
#chartdiv {
width : 800px;
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="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
I've tried to gather information about if it is possible to put a different image located at the bottom of every column in a 100% stacked bar chart.
I've seen that is possible to modify some attributes of category labels and put images just above every bar as http://www.amcharts.com/demos/column-chart-images-top/ but I need just the opposite.
In other words, I want to make the base of the column has an image loaded, replacing x axis and category label.
Thanks in advance.
Unfortunately, Category axis does not allow using images in place of category labels.
There's also no way to make the custom bullets from graphs "trickle" outside plot area.
What you can do is to drop those custom icons right down just above category axis line.
To do that you will need:
1) Add additional fields to your data that would contain all zero values.
2) Add a separate graph that would use those fields and display custom bullets.
3) Make the "bullet graph" non-stackable (stackable: false), not clustered (clustered: false), and generally invisible (visibleInLegend: false, fillAlphas: 0, lineAlpha: 0, showBalloon: false)
Here's a working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"name": "John",
"points": 35022,
"color": "#7F8DA9",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/0.gif"
}, {
"name": "Damon",
"points": 65456,
"color": "#FEC514",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/1.gif"
}, {
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/2.gif"
}, {
"name": "Mark",
"points": 13654,
"color": "#DAF0FD",
"zero": 0,
"bullet": "//www.amcharts.com//lib/3/images/3.gif"
}],
"valueAxes": [{
"maximum": 80000,
"minimum": 0,
"axisAlpha": 0,
"dashLength": 4,
"position": "left"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"type": "column",
"valueField": "points"
}, {
"showBalloon": false,
"bulletOffset": 16,
"bulletSize": 34,
"customBulletField": "bullet",
"fillAlphas": 0,
"lineAlpha": 0,
"type": "column",
"visibleInLegend": false,
"clustered": false,
"stackable": false,
"valueField": "zero"
}],
"categoryField": "name",
"categoryAxis": {
"axisAlpha": 0,
"gridAlpha": 0,
"tickLength": 0
}
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>
Additionally, if you don't need the text labels on the category axis, you can set it's labelsEnabled: false property.