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.
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 am making a chart on fruits eaten in a day, which is working fine in the below example.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"hideCredits": true,
"fixedColumnWidth": '10px',
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [{
"creationDate": "04/09/18",
"Banana": 1,
"Apple": 13,
"Grapes": 24
},
{
"creationDate": "06/09/18",
"Banana": 10,
"Apple": 13,
"Grapes": 24
},
{
"creationDate": "08/09/18",
"Banana": 11,
"Apple": 13,
"Grapes": 24
},
{
"creationDate": "09/09/18",
"Banana": 1,
"Apple": 50,
"Grapes": 24
},
],
//"gridAboveGraphs": true,
"startDuration": 1,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"minimum": 0,
"maximum": 50,
"gridCount": 1
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#47b012",
"lineColor": "#47b012",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Grapes Eaten",
"type": "column",
"color": "#000000",
"valueField": "Grapes",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#fff138",
"lineColor": "#fff138",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Banana Eaten",
"type": "column",
"color": "#000000",
"valueField": "Banana",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#dd111b",
"lineColor": "#dd111b",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Apples Eaten",
"type": "column",
"color": "#000000",
"valueField": "Apple",
"fixedColumnWidth": 25
}],
"categoryField": "creationDate",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"labelRotation": 80,
},
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
But what I need is to show the data for the day when no fruit is eaten like in the screenshot below.
The dates 05-09-2018 and 07-09-2018 data is not in the dataprovider field, so I want it to automatically populate in the graph .
You currently have a regular Category axis which treats dates as strings (categories).
If you want a real date scale, you need to make it a date-base category axis by setting parseDates: true in categoryAxis.
That won't be enough, though.
Since you have your dates as non-standard date format, you will need to instruct amCharts how to parse them. That's where dataDateFormat setting comes in:
dataDateFormat: "DD/MM/YYYY"
Finally, labels follow different rules on a date-based axis. So we'll need to make some adjustments to code so that all of them are displayed:
"categoryAxis": {
// ...
"autoGridCount": false,
"gridCount": 20
},
Here's your chart:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"hideCredits": true,
"fixedColumnWidth": '10px',
"dataDateFormat": "DD/MM/YYYY",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [{
"creationDate": "04/09/18",
"Banana": 1,
"Apple": 13,
"Grapes": 24
},
{
"creationDate": "06/09/18",
"Banana": 10,
"Apple": 13,
"Grapes": 24
},
{
"creationDate": "08/09/18",
"Banana": 11,
"Apple": 13,
"Grapes": 24
},
{
"creationDate": "09/09/18",
"Banana": 1,
"Apple": 50,
"Grapes": 24
},
],
//"gridAboveGraphs": true,
"startDuration": 1,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"minimum": 0,
"maximum": 50,
"gridCount": 1
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#47b012",
"lineColor": "#47b012",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Grapes Eaten",
"type": "column",
"color": "#000000",
"valueField": "Grapes",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#fff138",
"lineColor": "#fff138",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Banana Eaten",
"type": "column",
"color": "#000000",
"valueField": "Banana",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#dd111b",
"lineColor": "#dd111b",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Apples Eaten",
"type": "column",
"color": "#000000",
"valueField": "Apple",
"fixedColumnWidth": 25
}],
"categoryField": "creationDate",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"labelRotation": 80,
"parseDates": true,
"autoGridCount": false,
"gridCount": 20
},
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 using AMCharts and I'm trying to call another function on clickGraphItem event with parameters.
The parameters and their values that I need are:
Year: 2017 (which is my category in the graph)
Gender: Men/Women (which is available in title or valueField. So getting an output from either of them works for me.)
On using event.item.category I do get my desired output but the event.item.valueField and event.item.title gives me undefined. I even tried using all other options but the output I get is undefined. Please suggest a way I can get the output I am looking for?
var chart = AmCharts.makeChart("chartYearlydiv", {
"type": "serial",
"theme": "light",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": chartYearlyData,
"valueAxes": [{
"stackType": "3d",
"position": "left",
//"axisAlpha": 0.3,
//"gridAlpha": 0
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Men",
"type": "column",
"color": "#000000",
"valueField": "Men"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Women",
"type": "column",
"color": "#000000",
"valueField": "Women"
}],
"categoryField": "Year",
"plotAreaFillAlphas": 0.1,
"depth3D": 60,
"angle": 30,
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
alert(event.item.category + event.item.title);
LoadMonthly(event.item.category);
}
}],
"export": {
"enabled": true
}
});
You can get the value in the event by using event.item.values.value. See the docs for graphDataItem which is the object you're pulling your category from in the clickGraphItem event as the values property contains that and more. The clickGraphItem event also gives you access to the graph object the item belongs to, allowing you to pull the title property directly from it through event.graph.title.
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)