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.
Related
I am creating an amCharts3 serial chart to show production hourly, forecast and target levels over a 24 hour period (midnight to midnight). The hourly and forecast data are logged every 30 minutes and this will then be displayed as bullet points on the chart. The target data is static value which is represented by a line across the chart
My code for the chart is,
"type": "serial",
"backgroundAlpha": 1,
"plotAreaFillAlphas": 1,
"autoMargin": true,
"autoMarginOffset": 30,
"autoDisplay": true,
"marginRight": 50,
"color": "#000000",
"plotAreaFillColors": scope.config.plotAreaFillColor,
"creditsPosition": "bottom-right",
"titles": createArrayOfChartTitles(),
"fontSize": 11,
"pathToImages": "Scripts/app/editor/symbols/ext/images/",
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",
"axisAlpha": 1,
"axisColor": "black",
"gridAlpha": 0.1,
"autoWrap": true,
"gridThickness": 2,
"title": "Time, hrs"
},
"chartScrollbar": {
"enabled": false
},
"legend": {
"enabled": true,
"useGraphSettings": true,
"color": "#000000",
"labelText": "[[title]]",
},
"valueAxes": [
{
"title": "Temperature",
"inside": false,
"axisAlpha": 1,
"axisColor": "black",
"fillAlpha": 0.05,
"gridAlpha": 0.1,
"gridThickness": 2
}
],
"graphs": [
{
"id": "g1",
"title": graph1Label,
"type": "line",
"bullet": "square",
"lineThickness": 0,
"bulletColor": "#0094FF",
"balloonColor": "#0094FF",
"balloonText": "[[timestamp]]<br />[[value1]]",
"valueField": "value1"
},
{
"id": "g2",
"title": graph2Label,
"type": "line",
"bullet": "round",
"lineThickness": 0,
"bulletColor": "#FF8000",
"balloonColor": "#FF8000",
"balloonText": "[[timestamp]]<br />[[value2]]",
"valueField": "value2"
},
{
"id": "g3",
"title": graph3Label,
"type": "line",
"lineThickness": 1,
"lineColor": "#FF0000",
"balloonColor": "#FF0000",
"balloonText": "[[timestamp]]<br />[[value3]]",
"valueField": "value3"
}
],
"dataProvider": dataArray,
"categoryField": "timestamp",
"chartCursor": {
"cursorColor": "gray",
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueZoomable": true,
"categoryBalloonDateFormat": "D/MM/YYYY L:NN:SS A"
},
"zoomOutButtonImage": ""
}
The data displays correctly but I am trying to set the x-axis range to a specific start and end point.
I want the chart to show with the x-axis to be set from midnight to midnight. Even if it is 10am I would like the chart to show the entire 24 hour time range.
Currently the chart shows data from midnight up to the current time it is being viewed. For example midnight to 10am.
I have added images for what the display looks like currently and also what the desired outcome is.
Current Display
Desired Display
I was able to solve this by using the date padding plugin provided by amCharts.
Date padding plugin
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 have a chart that shows percentages, so I don't want to go past 100 on the valueAxis. For some reason, valueAxis.maximum isn't working for me. Here's a copy of my chart function. The chart ends up showing with 110 maximum in the valueAxis. Am I missing a property somewhere?
Here's a link to a jsFiddle. Any help is appreciated.
var chart = AmCharts.makeChart(chartDiv, {
"theme": "light",
"type": "serial",
"dataProvider": nflDailyData,
"graphs": [{
"balloonText": "[[value]]% for [[category]]",
"fillAlphas": 0.5,
"lineAlpha": 0.2,
"title": "Percent Accuracy",
"type": "column",
"valueField": "value",
"legendValueText": "",
"fillColorsField": "color"
}],
"titles": [
{
"text": "NFL Daily Past 7-Day Evaluation",
"size": 26,
"color": "#3333cc"
}
],
"startDuration": 1,
"depth3D": 20,
"angle": 30,
"rotate": false,
"categoryField": "category",
"valueAxis": {
"minimum": 0,
"maximum": 100,
"unit": "%",
"unitPosition": "right"
},
"categoryAxis": {
"gridPosition": "start",
"fillAlpha": 0.05,
"position": "left",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
Since the chart supports multiple value axes, there's no single "valueAxis" parameter. It's an array of objects, and it's in plural: valueAxes. So in your chart configuration, you need to specify it as such, event if you have just one value axis:
"valueAxes": [{
"minimum": 0,
"maximum": 100,
"unit": "%",
"unitPosition": "right"
}]
The way you have it now is simply ignored by the chart, hence maximum not being taken into account.