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".
Related
I am using amcharts, where in there are two line getting drawn. In case if the first line goes down to the second line, I need to make that part of line - bold with red color.
AmCharts.makeChart("chartdiv", {
"backgroundColor": 'blue',
"theme": "light",
"type": "serial",
"zoomOutText": '',
"color": "black",
"dataDateFormat": "HH:NN",
"legend": {
"useGraphSettings": true
},
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"position": "left",
"axisColor": "#472F52",
"title": "Time of the Day",
"type": "date",
"axisThickness": 2,
"markPeriodChange": false,
"autoGridCount": false,
"minimumDate": "00:00",
"maximumDate": "23:00",
"gridCount": 20,
"minPeriod": "ss",
}
],
"startDuration": 1,
"graphs": [{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"bullet": "round",
"lineColor": "#0D338C",
"bulletBorderColor": "#0D338C",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "expectedEndTime",
"title": "Expected End Time",
"dateFormat": "HH:NN",
"labelPosition": "top",
"labelColor": "red",
"valueAxis": "v1",
"labelText": "[[labelExpected]]",
"balloonText": "Estimated End Time : <b>[[value]]</b>"
},
{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"lineColor": "#C63F05",
"bullet": "round",
"bulletBorderColor": "#C63F05",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "actualEndTime",
"title": "Actual End Time",
"dateFormat": "HH:NN",
"labelPosition": "bottom",
"labelColor": "blue",
"valueAxis": "v1",
"labelText": "[[labelActual]]",
"balloonText": "Actual End Time : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "batchName",
"categoryAxis": {
"gridPosition": "start",
"axisThickness": 2,
"axisColor": "#472F52",
"autoGridCount": false,
"gridCount": 1000,
"title": "Batches",
"labelRotation": 30
},
"export": {
"enabled": true,
"borderRadius": "10px",
"text-align": "center",
"pdfMake": {
"content": ["'<Name of the Metric to be displayed dynamically>'",
" ", "from <startDate> To <endDate>", {
"image": "reference", //exported image
"fit": [523.28, 769.89]
}
]
},
"legend": {
"position": "bottom", // or "right", "bottom" and "left" are possible
"width": 200, // optional
"height": 200 // optional
}
}
});
there are two line getting drawn. In case if the first line goes down to the second line, I need to make that part of line - bold with red color.
Here is My JsFiddle
Any suggestions is deeply appreciated!
By adding fillAlphas on 2 graphs, it will fill the area between the graph and the top of the chart with lighter color.
graphs: [
{
...,
fillAlphas: .5
},
{
...,
fillAlphas: .5
}
]
The area with 2 colors overlapped are unnecessary but I don't know if there is a way to get rid of it easily. The lighter blue areas are the ones when the first line goes under the second line.
Would this be good enough?
fiddle: https://jsfiddle.net/davidliang2008/mze52096/
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 am trying to generate an amchart (https://www.amcharts.com/demos/bullet-chart/) bullet chart in a new window. When I run the code inline from a HTML doc it runs fine but when I try to generate the chart in a new window (see below) after the user hits submit, nothing happens i.e. no warnings or errors in the console. Here is my code:
var OpenWindow4 = window.open("", "newin4", "width=1000,height=600,toolbar=no,scrollbars=" + scroll + ",menubar=no");
OpenWindow4.document.write('<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>Features</title><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/themes/none.js"></script><div class="chart-block"><div id="chartdiv1" style="width:100%; height:220px;"></div></div><script type="text/javascript"> (function () { var chart = AmCharts.makeChart("chartdiv1", { "type": "serial", "theme": "none", "autoMargins": false, "marginTop": 30, "marginLeft": 80, "marginBottom": 30, "marginRight": 50, "dataProvider": [{ "category": "Evaluation", "excelent": 20, "good": 20, "average": 20, "poor": 20, "bad": 20, "limit": 78, "full": 100, "bullet": 65 }], "valueAxes": [{ "maximum": 100, "stackType": "regular", "gridAlpha": 0 }], "startDuration": 1, "graphs": [{ "fillAlphas": 0.8, "lineColor": "#19d228", "showBalloon": false, "type": "column", "valueField": "excelent" }, { "fillAlphas": 0.8, "lineColor": "#b4dd1e", "showBalloon": false, "type": "column", "valueField": "good" }, { "fillAlphas": 0.8, "lineColor": "#f4fb16", "showBalloon": false, "type": "column", "valueField": "average" }, { "fillAlphas": 0.8, "lineColor": "#f6d32b", "showBalloon": false, "type": "column", "valueField": "poor" }, { "fillAlphas": 0.8, "lineColor": "#fb7116", "showBalloon": false, "type": "column", "valueField": "bad" }, { "clustered": false, "columnWidth": 0.3, "fillAlphas": 1, "lineColor": "#000000", "stackable": false, "type": "column", "valueField": "bullet" },{ "columnWidth": 0.5, "lineColor": "#000000", "lineThickness": 3, "noStepRisers": true, "stackable": false, "type": "step", "valueField": "limit" }], "rotate": true, "columnWidth": 1, "categoryField": "category", "categoryAxis": { "gridAlpha": 0, "position": "left" } });})();</script> </head> </html>');
}
It seems that when you create a window like that DOM ready events are not being fired properly, so the chart does not even start to initialize.
To force the drawing of the chart add the following at the end of your chart code:
chart.write( "chartdiv1" );
That should do the trick.
I am trying to replicate the following chart
The problem I have is how to make the legend in the left and in the middle of every box that stacks (Series word in each box). I have searched amCharts but no luck. Is there a way to do it or how to override or extend amCharts in order to achieve this behavior?
Thanks a lot.
For displaying value labels, use labelText proeprty.
Just set it to "[[value]]" in your graphs. I.e.:
"graphs": [{
...
"labelText": "[[value]]"
}]
For the "legend" on the left, you will need to use guides. It allows placing lines (optional) and labels at some preset values. You will need to pre-calculate the values at which to place them, though.
Here's a complete working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": [{
"year": 2011,
"value1": 13,
"value2": 5,
"value3": 4
}, {
"year": 2012,
"value1": 22,
"value2": 4,
"value3": 5
}, {
"year": 2013,
"value1": 35,
"value2": 7,
"value3": 4
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"tickLength": 0,
"totalText": "[[total]]",
"guides": [{
"value": 6.5,
"label": "Series #1",
"fontSize": 15
}, {
"value": 15.5,
"label": "Series #2",
"fontSize": 15
}, {
"value": 20,
"label": "Series #3",
"fontSize": 15
}]
}],
"graphs": [{
"fillAlphas": 1,
"fillColors": "#a0b1cf",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value1"
}, {
"fillAlphas": 1,
"fillColors": "#c5cde0",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value2"
}, {
"fillAlphas": 1,
"fillColors": "#dde6eb",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value3"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
});
#chartdiv {
width: 400px;
height: 400px;
}
<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>
While plotting some historical data on a chart I stumbled on this annoying grey box that I can't get rid of.
Basically I started with this example: http://www.amcharts.com/demos/date-based-data/ and did some slight modifications (removed chartScrollbar).
The chart is using type: serial with theme: light.
Still haven't found anything in the documentation http://docs.amcharts.com/3/javascriptcharts/ that resembles this.
I've tried 'guides', 'graphs', 'chartScrollBar' but nothing seems to work.
Appreciate any help in this.
Chart with grey header-box:
AmCharts conf:
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 0,
"marginRight": 0,
"autoMarginOffset": 0,
"path": "http://www.amcharts.com/lib/3/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"chartScrollbar": {
"enabled": false
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "bottom"
},
"export": {
"enabled": false
},
"dataProvider": chartData
});
The "grey box" is chart scrollbar. By default chart does not display the scrollbar. So to remove it simply remove it from your chart config altogether:
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 0,
"marginRight": 0,
"autoMarginOffset": 0,
"path": "http://www.amcharts.com/lib/3/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "bottom"
},
"export": {
"enabled": false
},
"dataProvider": chartData
});