I created a simple graph with amcharts and set a title.
Is it possible to change its position? In my case I want the title to be on the left of the graph, maybe even in an angle of 90 degree:
This is an extract of the code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
//..
, "titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Sub-Title",
"bold": false
}]
});
Here is a fiddle.
Why don't you just use label functionality instead?
Contrary to titles, labels can be any text placed anywhere in the chart area, rotated, etc.
"allLabels": [{
"text": "My Chart Title",
"bold": true,
"x": 10,
"y": "50%",
"rotation": 270,
"width": "100%",
"align": "middle"
}, {
"text": "My Chart Sub-Title",
"bold": false,
"x": 30,
"y": "50%",
"rotation": 270,
"width": "100%",
"align": "middle"
}]
The only downside is that you will need to manually adjust chart's margins to accommodate for them. The chart does not auto-adjust margins as with titles.
Since you want the labels on the left side, the same as value axis, setting marginLeft will be ignored because the axis will try to auto-calculate the margin needed for the axis' labels. (not counting in the labels)
To fix that set ignoreAxisWidth on the value axis to true.
Here's your Fiddle updated.
As said #Lara_Belle you can modify this with css hack.
You can add css transform for move your text. I used nth-child for assign css on subtitle. Please try below.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}, "titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Sub-Title",
"bold": false
}]
});
#chartdiv {
width: 100%;
height: 500px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}
text{
margin: 50px;
}
.amcharts-title{
transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
transform: translate(134px, 10px)
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.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>
UPADATE
You can just modify the transform property.
ex:
.amcharts-title{
transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
transform: translate(134px, 10px)
}
Please try now
Related
I'm trying to put a image to the beginning of a trend line using the initialImage property of the trendline. But it doesn't come up to the beginning of the trend line.
Here is the code:
"trendLines": [ {
"initialDate": "2017-10-26 18:52:13",
"initialValue": 0,
"lineColor": "#CC0000",
"initialImage": {
"svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
"color": "#050",
"width": 13,
"height": 13,
"rotation": 90,
"offsetX": 4,
"offsetY": -17,
"balloonText": "2017-10-26 11:52:43"
},
"finalDate": "2017-10-26 18:52:13",
"finalValue": 80
}],
Here is the DEMO.
initialImage is placed at the location defined by initialValue and initialDate, so it actually is being placed at the beginning. In your case, the beginning is at the bottom due to your initial values with respect to the final values. If you want it to appear on top of that particular trendline, set it as the finalImage instead.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop": 0,
"marginRight": 80,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"dataProvider": [{
"year": "2017-10-26 18:45:13",
"value": 80
}, {
"year": "2017-10-26 18:46:13",
"value": 2
}, {
"year": "2017-10-26 18:47:13",
"value": 46
}, {
"year": "2017-10-26 18:48:13",
"value": 22
}, {
"year": "2017-10-26 18:49:13",
"value": 50
}, {
"year": "2017-10-26 18:50:13",
"value": 24
}, {
"year": "2017-10-26 18:51:13",
"value": 7
}, {
"year": "2017-10-26 18:52:13",
"value": 5
}, {
"year": "2017-10-26 18:53:13",
"value": 47
}, {
"year": "2017-10-26 18:54:13",
"value": 35
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#888888",
"lineAlpha": 0,
"toValue": 16,
"value": 10
}],
"position": "left",
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"colorField":"color",
"valueField": "value"
}],
"trendLines": [ {
"initialDate": "2017-10-26 18:52:13",
"initialValue": 0,
"lineColor": "#CC0000",
"finalImage": {
"svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
"color": "#050",
"width": 13,
"height": 13,
"rotation": 90,
"offsetX": 4,
"offsetY": -17,
"balloonText": "2017-10-26 11:52:43"
},
"finalDate": "2017-10-26 18:52:13",
"finalValue": 80
}],
"categoryField": "year",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"minorGridAlpha": 0.1,
"minorGridEnabled": true,
"minPeriod": "fff"
}
});
/*
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}*/
#chartdiv {
width : 100%;
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="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 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 have a Funnel chart from https://www.amcharts.com/demos/funnel-chart/?theme=none. It works fine.
I would like to set a fixed height for the segments, but I don't know how.
There isn't a way to set fixed height segments directly in the config, but you can fake it using your data by setting fake values for the area/height of the segments but display the real values in a separate property in your balloonText and labelText, for example:
"dataProvider": [ {
"title": "Website visits",
"areaValue": 30, //value used for segment height/area
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, // ...
],
// ...
"valueField": "areaValue", //use the area value for visual purposes
"balloonText": "[[title]]:<b>[[realValue]]</b>", //reference the actual value through the realValue
"labelText": "[[title]]: [[realValue]]",
Demo below with segments with identical height:
var chart = AmCharts.makeChart("chartdiv", {
"type": "funnel",
"theme": "none",
"dataProvider": [{
"title": "Website visits",
"areaValue": 30,
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, {
"title": "Requested prices",
"areaValue": 30,
"realValue": 98
}, {
"title": "Contacted",
"areaValue": 30,
"realValue": 72
}, {
"title": "Purchased",
"areaValue": 30,
"realValue": 35
}, {
"title": "Asked for support",
"areaValue": 30,
"realValue": 25
}, {
"title": "Purchased more",
"areaValue": 30,
"realValue": 18
}],
"titleField": "title",
"marginRight": 160,
"marginLeft": 15,
"labelPosition": "right",
"funnelAlpha": 0.9,
"valueField": "areaValue",
"balloonText": "[[title]]:<b>[[realValue]]</b>",
"labelText": "[[title]]: [[realValue]]",
"startX": 0,
"neckWidth": "40%",
"startAlpha": 0,
"outlineThickness": 1,
"neckHeight": "30%",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.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/none.js"></script>
<div id="chartdiv"></div>
With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></div>
http://www.amcharts.com/demos/simple-column-chart/#theme-none
I'm following this script
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"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
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
When I remove all data except 2 countries (I mean 2 bars) then the width of bar is increased to the full page size.
<html>
<head>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}],
"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
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
</script>
<style type="text/css">
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
I tried even removing width 100% in css but no success.
I just want if there is one data then print one bar chart of a small(fixed) size. if there are more than 1 then should append autoomaticaally ... (not concerned about space left in right side)
You can easily force all columns at the same constant pixel width using graph.fixedColumnWidth property.
Here's the related documentation:
http://docs.amcharts.com/3/javascriptcharts/AmGraph#fixedColumnWidth
Code:
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"fixedColumnWidth": 50
}],
And working example:
http://jsfiddle.net/amcharts/nctpzzbr/
If you need the chart container to grow/shrink depending on actual number of elements in the chart, it's more complicated but also possible.
For that we will use the "AmCharts.addInitHandler" property to set our own function to execute before the chart is rendered:
// this will get executed BEFORE chart is drawn
// we'll use it to modify the width of the chart area
AmCharts.addInitHandler(function(chart) {
// total offsets reserved for margins
var offsets = 100;
// pixel value reserved for each category
var categoryWidth = 80;
// calculate width
var width = offsets + chart.dataProvider.length * categoryWidth;
// set container width
document.getElementById("chartdiv").style.width = "" + width + "px";
// since the chart is already build for the initial container size we need to
// revalidate it's size. we'll delay a little bit the call to invalidateSize()
// so that the chart elements are created first
setTimeout(function () {
chart.invalidateSize();
document.getElementById("chartdiv").style.display = "block";
}, 1);
}, ['serial']);
And here's a working example with the above code in use:
http://jsfiddle.net/amcharts/tc3uf92e/