Related
I am trying to make a amcharts graph with columns linked to custom urls and want the urls to open in a new tab/window. I tried adding this code to the graph object but it does not work, it is opening link in same tab/window -
"listeners": [{
"event": "clickItem",
"method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
}
}],
Please tell what I am doing wrong. I do not want to use Jquery and I am new to javascript.
This is my snippet -
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"country": "USA",
"visits": 2025,
"url": "https://en.wikipedia.org/wiki/United_States"
}, {
"country": "China",
"visits": 1882,
"url": "https://en.wikipedia.org/wiki/China"
}, {
"country": "Japan",
"visits": 1809,
"url": "https://en.wikipedia.org/wiki/Japan"
}, {
"country": "Germany",
"visits": 1322,
"url": "https://en.wikipedia.org/wiki/Germany"
}, {
"country": "France",
"visits": 1114,
"url": "https://en.wikipedia.org/wiki/France"
}, {
"country": "India",
"visits": 984,
"url": "https://en.wikipedia.org/wiki/India"
}, {
"country": "Spain",
"visits": 711,
"url": "https://en.wikipedia.org/wiki/Spain"
}],
"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",
"listeners": [{
"event": "clickItem",
"method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
}
}],
"urlField": "url"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
}
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can use urlTarget such as:
var chart = AmCharts.makeChart("chartdiv", {
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"urlField": "url",
"urlTarget": "_blank"
}],
...
};
Change
"listeners": [{
"event": "clickItem",
"method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
}
}],
to
listeners:[{
event:'clickItem',
method:function(event){
open(event.item.url, '_blank');
}
}]
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 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...