This is the ajax call method in the javascript file to plot the bar graph in Amcharts.
bar.js
plot_graph();
function plot_graph(){
$.ajax({
url:back+"/cool?day=30",
type: "GET",
dataformat: "JSON",
success: function(data){
alert("succes while plotting down graph");
var amc=AmCharts.makeChart("plot",
{
"type": "serial",
"dataSets": [{
"dataProvider": data,
"categoryField": "time"
}],
"categoryField": "name",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"id": "AmGraph-1",
"title": "Bar Graph",
"type": "column",
"valueField": "tips",
"color":"#6fdc6f"
},
{
"balloonText": "[[title]] of [[category]]:[[value]] k",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Distance",
"type": "column",
"valueField": "mile"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Milage",
"gridColor": "#FFFFFF",
"gridAlpha": 0.2
}
],
"gridAboveGraphs": true,
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": " Cool"
}
]
});
},
error:function(){
alert("error while plotting down graph");
}
});
}
But when I access the webservice api it shows the data and the alert box appears with "succes while plotting down graph".But the plot is not plottting.
Any help is appreciated.
dataSets is a stock chart property, not a serial chart property (note your chart type). You need to set the dataProvider instead and set the categoryField in the top level of the configuration:
var amc = AmCharts.makeChart("plot", {
// ...
"dataProvider": data,
"categoryField": "time",
// ..
});
Note that only one categoryField is allowed, not two.
Related
i have try to export amcharts chart data in excel file but not exporting and no error display
rather than XLSX format other format file exporting like csv
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "Brazil",
"visits": 395
}],
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true,
"menu": [{
"class": "export-main",
"menu": [{
"label": "Excel",
"menu": ["XLSX", "CSV"]
}]
}],
}
});
using this code export to csv success but not in XLSX formate and not any error show
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}
});
I have to change label text to green and red color.how can we change the color of a label using java script amcharts. and is it possible to add a up arrow after the label text.Please check the code below.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [],
"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 Suggest me How can i achieve this.Also check this JsFiddle
https://jsfiddle.net/ArunKumarUmma/21wm5hf5/6/
You can set the label color using the color property in the graph object:
"graphs": [{
// ...
"color": "#008000",
"labelText": "[[Index]]"
},
color demo
If you need to specify it for each individual column, then you have to set the color in your data and use labelColorField to access it. If you have a color property set, it will fall back to that color if a particular data element does not have an associated labelColorField property.
"dataProvider": [{
// ...
"labelColor": "#880000",
"name": "Name1",
"value": "148773.88",
"value1": "60794.55"
}, // ...
]
"graphs": [{
// ...
"color": "#008000",
"labelColorField": "labelColor",
"labelText": "[[Index]]"
},
labelColorField demo.
Edit again
You can add arrows by inserting the unicode escape string. For example, the up arrow is \u02191 and down arrow is \u02193.
For example:
"labelText": "[[value]] \u02191",
Updated fiddle
If you need to do this dynamically, you'll need to set a labelFunction and figure out a way to determine which arrow to use. Check its documentation and figure out the best way to use it for your setup.
I wish that the documentation was more clear, but you can change the label colour with nested properties so:
chart.labels.template.fill = am4core.color("white");
This would target your labels and change their colour.
I needed my font color to be dark since my charts bg color was white:
xAxis.renderer.labels.template.fill = am4core.color('#000000');
yAxis.renderer.labels.template.fill = am4core.color('#000000');
I am trying to access an object as DataProvider for amcharts by using DataLoader Plugin but it will not show. Here is my JSON Output:
{
"ReportName":"This is the Report Name",
"Column-1":"This is the Report Name",
"Column-2":"This is the Report Name",
"Data":[
{"Category":"Guntur","Column_1":"20.30","Column_2":"22.34"},
{"Category":"Chittor","Column_1":"20.30","Column_2":"22.34"}
]}
This is my script for Amchart:
AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "Category",
"columnWidth": 0.72,
"angle": 15,
"depth3D": 10,
"plotAreaFillAlphas": 0.01,
"startDuration": 1,
"fontFamily": "Lato",
"dataLoader": {
"url": "chartInformation",
"format": "json"
},
"export": {
"enabled": true
},
"categoryAxis": {
"autoRotateAngle": 0,
"gridPosition": "start",
"boldLabels": true,
"labelRotation": 25.2
},
"chartScrollbar": {
"enabled": true
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[category]] <br> [[title]] : [[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Target",
"type": "column",
"valueField": "Column_1"
},
{
"balloonText": "[[category]] <br> [[title]] : [[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Achieved",
"type": "column",
"valueField": "Column_2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Cost in Lakhs"
}
],
"allLabels": [],
"balloon": {
"horizontalPadding": 12
},
"legend": {
"enabled": true,
"backgroundAlpha": 0.01,
"rollOverGraphAlpha": 0,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Opening of PMJDY Accounts"
}
]
}
);
In the url tag I'm giving the url for retrieving the json output.
How can I use Data Object for chart Data?
Other data of json will be must because I want to use other Data of ReportName.
you need to code a dataLoader postProcess that reads in your json data, writes back the data part, and does something useful with the report name , column 1 and 2 values if you wish, such as setting the report title values.
see
https://www.amcharts.com/tutorials/using-data-loader-plugin/
e.g.
"dataLoader": {
"url": "chartInformation",
"format": "json"
postProcess: function(data, options) {
// your code goes here to produce correct data etc
return data;
}
},
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.