Related
I use the library amchart to generate a chart with the plugin dataLoader
. But each time there is one day empty at the begin and the end of the chart for no reason. Did someone already get this error?
-- EDIT FIDDLE --
I create a fiddle using the example data from amchart that you can find here. I just change the chart type to "line" and the default period to "10D" and as you can see there is still a space on the right of the chart (if also at left as well if you change the period). Is it possible to erase it?
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "none",
//"color": "#fff",
"dataSets": [ {
"title": "MSFT",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
/**
* data loader for events data
*/
"eventDataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function( data ) {
for ( var x in data ) {
switch ( data[ x ].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[ x ] = {
"type": "pin",
"graph": "g1",
"backgroundColor": color,
"date": data[ x ].Date,
"text": data[ x ].Type,
"description": "<strong>" + data[ x ].Title + "</strong><br />" + data[ x ].Description
};
}
return data;
}
}
}, {
"title": "TXN",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": true,
"categoryField": "Date",
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/TXN.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
} ],
"dataDateFormat": "YYYY-MM-DD",
"panels": [ {
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"type": "line",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
"comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
} ],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
},
{
"title": "Volume",
"percentHeight": 30,
"marginTop": 1,
"columnWidth": 0.6,
"showCategoryAxis": false,
"stockGraphs": [ {
"valueField": "volume",
"openField": "open",
"type": "column",
"showBalloon": false,
"fillAlphas": 1,
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"useDataSetColors": false
} ],
"stockLegend": {
"markerType": "none",
"markerSize": 0,
"labelText": "",
"periodValueTextRegular": "[[value.close]]"
},
"valueAxes": [ {
"usePrefixes": true
} ]
}
],
"panelsSettings": {
// "color": "#fff",
"plotAreaFillColors": "#333",
"plotAreaFillAlphas": 1,
"marginLeft": 60,
"marginTop": 5,
"marginBottom": 5
},
"chartScrollbarSettings": {
"graph": "g1",
"graphType": "line",
"usePeriod": "WW",
"backgroundColor": "#333",
"graphFillColor": "#666",
"graphFillAlpha": 0.5,
"gridColor": "#555",
"gridAlpha": 1,
"selectedBackgroundColor": "#444",
"selectedGraphFillAlpha": 1
},
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 1,
"inside": false,
"showLastLabel": true
},
"chartCursorSettings": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"legendSettings": {
//"color": "#fff"
},
"stockEventsSettings": {
"showAt": "high",
"type": "pin"
},
"balloon": {
"textAlign": "left",
"offsetY": 10
},
"periodSelector": {
"position": "bottom",
"periods": [ {
"period": "DD",
"count": 10,
"label": "10D",
"selected": true
}, {
"period": "MM",
"count": 1,
"label": "1M"
}, {
"period": "MM",
"count": 6,
"label": "6M"
}, {
"period": "YYYY",
"count": 1,
"label": "1Y"
}, {
"period": "YYYY",
"count": 2,
"label": "2Y"
},
/* {
"period": "YTD",
"label": "YTD"
},*/
{
"period": "MAX",
"label": "MAX"
}
]
}
} );
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#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/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.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" />
<div id="chartdiv"></div>
Finally,
in your example in "categoryAxesSettings": change "startOnAxis" to true
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1,
"startOnAxis" : true, // add this line
},
follow this doc: https://docs.amcharts.com/3/javascriptstockchart/CategoryAxis#startOnAxis
I use JS script AMCharts. I output the diagram with the following code:
<div id="chartdiv_refinance"></div>
<script src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://cdn.amcharts.com/lib/3/serial.js"></script>
<script src="http://cdn.amcharts.com/lib/3/pie.js"></script>
<script>
var chart1 = AmCharts.makeChart("chartdiv_refinance", {
"theme": "none",
"type": "serial",
"dataProvider": [{
"type": "text1",
"label1": var1,
"label2": var2
}],
"valueAxes": [{
"unit": "text2",
"position": "left",
"title": "",
}],
"startDuration": 1,
"graphs": [{
"balloonText": "text3",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "text4",
"type": "column",
"valueField": "text5",
}, {
"balloonText": "text6",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "text7",
"type": "column",
"clustered":false,
"columnWidth":0.5,
"valueField": "text8",
}],
"plotAreaFillAlphas": 0.1,
"categoryField": "type",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
});
enter image description here
I need to change the colors of the columns. I tried to specify properties "color" and "background", but it does not work. Can you help me? How to change the colors of the speakers correctly?
You can set the fillColors property in your graphs to change their background colors.
"graphs": [{
"fillColors": "#CCFF00",
// ...
}, {
// ...
"fillColors": "#880000",
// ...
}],
Demo below:
var var1 = 10,
var2 = 20;
var chart1 = AmCharts.makeChart("chartdiv_refinance", {
"theme": "none",
"type": "serial",
"dataProvider": [{
"type": "text1",
"label1": var1,
"label2": var2
}],
"valueAxes": [{
"unit": "text2",
"position": "left",
"title": "",
}],
"startDuration": 1,
"graphs": [{
"balloonText": "text3",
"fillColors": "#CCFF00",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "text4",
"type": "column",
"valueField": "label1",
}, {
"balloonText": "text6",
"fillColors": "#880000",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "text7",
"type": "column",
"clustered": false,
"columnWidth": 0.5,
"valueField": "label2",
}],
"plotAreaFillAlphas": 0.1,
"categoryField": "type",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
});
#chartdiv_refinance {
width: 100%;
height: 300px;
}
<div id="chartdiv_refinance"></div>
<script src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://cdn.amcharts.com/lib/3/serial.js"></script>
<script src="http://cdn.amcharts.com/lib/3/pie.js"></script>
Note that your valueField needs to match your dataProvider properties. I changed "text5" and "text8" to "label1" and "label2".
I'm trying to put a label inside the bars in an AmChart graph. If the label is to long it does not show. Pleas look at the JsFiddle, https://jsfiddle.net/o3518u19/4/,
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"categoryField": "year",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start",
"position": "left"
},
"columnSpacing": 0,
"columnWidth": 0.6,
"graphs": [ {
"balloonText": "Income:[[value]]",
"labelText": "HEJ",
"labelPosition": "inside",
"labelRotation": 270,
"color": "#fff",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income",
"fixedColumnWidth": 25
},
{
"balloonText": "Income:[[value]]",
"labelRotation": 270,
"labelText": "HEJA",
"labelPosition": "inside",
"color": "#fff",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income",
"fixedColumnWidth": 25
}],
"valueAxes": [ {
"stackType": "regular",
"position": "top",
"axisAlpha": 0
} ],
"dataProvider": [ {
"year": 2005,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2006,
"income": 26.2,
"expenses": 22.8
}]
} );
where "HEJ" is shown but not "HEJA". I don't want to make the columns wider than 25.
Use "showAllValueLabels":true, this will show the longer labels and override the checking if they fit.
{
"balloonText": "Income:[[value]]",
"labelRotation": 270,
"labelText": "HEJA",
"showAllValueLabels":true, /// add this line
"labelPosition": "inside",
"color": "#fff",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income",
"fixedColumnWidth": 25
}
Additionaly, you can use "labelOffset" to further adjust the position of the label (in your case verticaly)
I use amCharts but I need to group data results by Date:
Demo example
I have 5 visits by one day and chart need to group results.
My code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"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"
},
"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>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
By documentation I use grouping settings without success.
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
Any Help?
According to the documentation, categoryAxesSettings only applies to stock type charts. You're using a serial here. An alternative option is to translate the data yourself:
function translateData(data){
var newData = [], dates = [];
data.map(function(item){
var index = dates.indexOf(item.date);
if(index > -1){
newData[index].value += item.value;
}else{
newData.push(item);
dates.push(item.date);
}
});
return newData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"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"
},
"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>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": translateData([
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
}
])
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="height: 300px;"></div>
I use the following chart: http://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/#theme-none
Now I want to add html tags to some labels. (not to all.)
Example: (Here I wanna use strong)
"dataProvider": [{
"age": "<strong>85+</strong>",
"male": -0.1,
"female": 0.3
}, {
"age": "80-54",
"male": -0.2,
"female": 0.3
}, ..... ],
Result:
The category axis labels in amCharts are SVG nodes and therefore do not support HTML tags.
What you can do is to target specific labels using CSS.
To do that, you will first need to enable application of CSS classess to chart elements, by setting "addClassNames": true.
Then target labels using CSS. Each category axis label has class "amcharts-axis-label" set. You can target the first one using CSS's nth-child selector:
.amcharts-category-axis .amcharts-axis-label:nth-child(1) tspan {
font-weight: bold;
}
(I also used .amcharts-category-axis selector so that value axis labels are not targeted by this)
Here's the whole working chart with the above working:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"rotate": true,
"addClassNames": true,
"marginBottom": 50,
"dataProvider": [{
"age": "85+",
"male": -0.1,
"female": 0.3
}, {
"age": "80-54",
"male": -0.2,
"female": 0.3
}, {
"age": "75-79",
"male": -0.3,
"female": 0.6
}, {
"age": "70-74",
"male": -0.5,
"female": 0.8
}, {
"age": "65-69",
"male": -0.8,
"female": 1.0
}, {
"age": "60-64",
"male": -1.1,
"female": 1.3
}, {
"age": "55-59",
"male": -1.7,
"female": 1.9
}, {
"age": "50-54",
"male": -2.2,
"female": 2.5
}, {
"age": "45-49",
"male": -2.8,
"female": 3.0
}, {
"age": "40-44",
"male": -3.4,
"female": 3.6
}, {
"age": "35-39",
"male": -4.2,
"female": 4.1
}, {
"age": "30-34",
"male": -5.2,
"female": 4.8
}, {
"age": "25-29",
"male": -5.6,
"female": 5.1
}, {
"age": "20-24",
"male": -5.1,
"female": 5.1
}, {
"age": "15-19",
"male": -3.8,
"female": 3.8
}, {
"age": "10-14",
"male": -3.2,
"female": 3.4
}, {
"age": "5-9",
"male": -4.4,
"female": 4.1
}, {
"age": "0-4",
"male": -5.0,
"female": 4.8
}],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "male",
"title": "Male",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function(item) {
return Math.abs(item.values.value);
},
"balloonFunction": function(item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}, {
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "female",
"title": "Female",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function(item) {
return Math.abs(item.values.value);
},
"balloonFunction": function(item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}],
"categoryField": "age",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0.2,
"axisAlpha": 0
},
"valueAxes": [{
"gridAlpha": 0,
"ignoreAxisWidth": true,
"labelFunction": function(value) {
return Math.abs(value) + '%';
},
"guides": [{
"value": 0,
"lineAlpha": 0.2
}]
}],
"balloon": {
"fixedPosition": true
},
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0.05,
"fullWidth": true
},
"allLabels": [{
"text": "Male",
"x": "28%",
"y": "97%",
"bold": true,
"align": "middle"
}, {
"text": "Female",
"x": "75%",
"y": "97%",
"bold": true,
"align": "middle"
}]
});
#chartdiv {
width: 100%;
height: 500px;
}
.amcharts-category-axis .amcharts-axis-label:nth-child(1) tspan {
font-weight: bold;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>