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.
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}
});
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.
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 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].