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.
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/
https://i.stack.imgur.com/9R2Hj.png
Hi,
I'm trying to add a line chart with 3 different graphs. The graph rendering is working just fine but the balloons are very unbalanced (see the picture), thus invalid for production usage. It does not help if I add horizontal or vertical paddings.
I must be doing something wrong here but I cannot figure out what it is. Would anyone figure out the reason for the odd balloon behaviour?
var chart3 = AmCharts.makeChart("chartdiv3", {
"type": "serial",
"theme": "light",
"marginRight": 20,
"marginLeft": 50,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "YYYY-MM-DD",
"chartCursor": {
"fullWidth": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"valueLineAlpha": 0.5,
"cursorAlpha": 0
},
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff",
"horizontalPadding": 20,
"verticalPadding": 20
},
"dashLength": 3,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletSize": 6,
"hideBulletsCount": 100,
"lineThickness": 2,
"title": "received",
"useLineColorForBulletBorder": true,
"valueField": "Value",
"balloonText": "<span style='font-size:16px;'>[[Value]]</span>"
},
{
"id": "g2",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Value2",
"balloonText": "<span style='font-size:12px;'>[[Value2]]</span>"
},
{
"id": "g3",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Value3",
"balloonText": "<span style='font-size:12x;'>[[Value3]]</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"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
},
"categoryField": "Date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"dateFormats":
[
{ period: 'fff', format: 'JJ:NN:SS' },
{period:'ss',format:'JJ:NN:SS'},
{period:'mm',format:'JJ:NN'},
{period:'hh',format:'JJ:NN'},
{period:'DD',format:'MMM DD'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MM'},
{period: 'YYYY', format: 'YYYY' }
]
},
"export": {
"enabled": true
},
"dataProvider": Home.realizedReturnsChartItems
});
}
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.
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
});