hi everyone hi do have a problemi with a chart that just do not appears.
i think the problem is related with the number of colums that i have to show because with a little number of data is working.
than when i put all the data in the chart it stopped working. i do not think is a limit on the amchart itself.
i post here my code
<script>
var chart = AmCharts.makeChart( "confrontogas", {
"type": "serial",
"theme": "light",
"dataProvider": [ {
"offerta": "Energia Italia 150€",
"costo": 150,
"color": "#0C3B54",
"labelcolor": "#FFFFFF"
},{
"offerta": "",
"costo": 229,
"color": "#CACACA",
"labelcolor": "#FFFFFF"
},{
"offerta": "",
"costo": 418,
"color": "#CACACA",
"labelcolor": "#FFFFFF"
},{
"offerta": "",
"costo": 419,
"color": "#CACACA",
"labelcolor": "#FFFFFF"
},{
"offerta": "",
"costo": 420,
"color": "#CACACA",
"labelcolor": "#FFFFFF"
},{
"offerta": "",
"costo": 425,
"color": "#CACACA",
"labelcolor": "#FFFFFF"
},{
"offerta": "",
"costo": 1,460,
"color": "#CACACA",
"labelcolor": "#FFFFFF"
} ],
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0,
"dashLength": 0,
"axisAlpha": 0,
"minimum": 0,
"labelsEnabled": false
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "<b>[[value]]</b> €",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"colorField": "color",
"valueField": "costo"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "offerta",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 0,
"labelRotation": 90,
"autoGridCount": false,
"gridCount": 548,
"equalSpacing": true,
"inside": true,
"labelFrequency": 1,
"labelColorField": "labelcolor",
"forceShowField": "true"
},
"export": {
"enabled": true
}
} );
as you can see
"gridCount": 548,
i posted less data just to keep it easy
Going by your last datapoint in the fiddle, your valueField costo has numeric values with commas, which isn't valid JavaScript:
{
"offerta": "",
"costo": 1,460, //should be 1460 or 1.460 depending on what ',' means in your region
"color": "#CACACA",
"labelcolor": "#FFFFFF"
}
Make sure your numeric data only contains numbers or dots (.) for decimals. AmCharts will automatically use commas for thouand separators and dots for decimals to format your values, but your numeric values must be valid in JavaScript first. If you need to change the separators in the output once your values are valid, use thousandsSeparator and decimalSeparator
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'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.
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
}
} );