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.
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 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'm trying to create an amCharts chart, based on three values but the result is completely messed up: the chart goes completely to the left, doesn't pin all the node results or shows all the data.
Please Help
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id":"v1",
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Tweets"
},
{
"id": "g2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#00FF00",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "green line",
"useLineColorForBulletBorder": true,
"valueField": "Retweets"
}],
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 30
},
"chartCursor": {
"cursorPosition": "mouse",
"pan": true,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top"
},
exportConfig:{
menuRight: '20px',
menuBottom: '50px',
menuItems: [{
icon: 'http://www.amcharts.com/lib/3/images/export.png',
format: 'png'
}]
},
"dataProvider":
[{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73},{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70}]
}
);
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart(){
//chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
chart.zoomToIndexes(0, 10);
}
http://jsfiddle.net/srp8313j/52/
The order of data points is important. For date-based charts, the data points need to come in ascending order, from oldest to the newest. While in your data they are running backwards. To fix this, simply change the order of the data points:
"dataProvider": [
{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70},
{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},
{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},
{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},
{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},
{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},
{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},
{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},
{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},
{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73}
]
Updated fiddle.
I'm creating a bubble chart using AMCHARTS and would like each bubble to be labeled, but it's seeming like a bit of trouble!
The label's reference point is lost on me (seems to be the top left?) and I can't seem to get it to move to where I want it to.
My javascript is as below, and a wee fiddle is attached.
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataProvider": [{
"y": 10,
"x": 14,
"value": 59
}],
"allLabels": [{
"text": "Label",
"bold": true,
"y": 10,
"x": 14
}],
"graphs": [{
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}],
"marginLeft": 46,
"marginBottom": 35
});
JSFiddle
You are using the global labels. I guess you want to label each bubble.
You have to do this in the "graphs" segment, like this:
"graphs": [{
"labelText": "[[value]]",
"labelPosition": "middle"
}],
See docs here
Reworked JSFiddle