I am using AmCharts of stock type for displaying graph. The problem is that on mobile devices it consumes touch & does not scroll. I have set "panEventsEnabled": false. But it still consumes the touch and on desktop browser I am still able to pan the graph. I don't get why it is not disabling the panEvent.
Below is my chart object. panEventsEnabled=false is set in the end.
var chartObject = {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"minPeriod": "mm",
"maxSeries": 250,
"groupToPeriods": [ "mm", "10mm", "30mm", "hh", "3hh", "DD", "3DD", "WW", "MM", "YYYY"]
},
"dataSets": [ {
"color": "#00e673",
"fieldMappings": [ {
"fromField": "close",
"toField": "value"
}, {
"fromField": "volumeto",
"toField": "volume"
} ],
"categoryField": "time"
}],
"balloon": {},
"panels": [ {
"showCategoryAxis": true,
"categoryBalloonEnabled": false,
"recalculateToPercents": "never",
"title": "Value",
"percentHeight": 60,
"stockGraphs": [ {
"id": "g1",
"title": Value,
"precision": 2,
"valueField": "value",
"type": "line",
"compareable": true,
"lineThickness": 2,
"balloonText": "close: [[value]]",
"fillAlphas": 0.6
} ],
"stockLegend": {
"valueTextRegular": ": [[value]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"precision": 2,
"valueField": "volume",
"type": "column",
"cornerRadiusTop": 2,
"fillAlphas": 1
} ],
"stockLegend": {
"valueTextRegular": "Volume: [[value]]"
}
} ],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "10mm",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorColor": "#ff0000",
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "top",
"dateFormat": "YYYY-MM-DD JJ:NN",
//"periodContainer":{},
"hideOutOfScopePeriods":false,
"inputFieldsEnabled": false,
"inputFieldWidth": 100,
"periods": [ {
"period": "mm", //histomin limit 60
"count": 60,
"minPeriod": "mm",
"label": "1H"
}, {
"period": "mm",//histomin limit 1440 //autogroup
"minPeriod": "mm",
"count": 1440,
"label": "1D"
},{
"period": "DD",//histohour limit 168
"count": 7,
"label": "1W"
}, {
"period": "MM",//histohour limit 744
"count": 1,
"label": "1M"
}, {
"period": "MM",//histoday limit 93
"count": 3,
"label": "3M"
},{
"period": "YYYY",//histoday limit 365
"count": 1,
"label": "1Y"
}, {
"period": "MAX",//histoday all
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": false,
"creditsPosition":"bottom-left",
"panEventsEnabled": false
},
};
Use the responsive plugin instead and override selectWithoutZooming.
"responsive": {
"enabled": true,
"rules": [{
"maxWidth": 800,
"overrides": {
"chartCursorSettings": {
"selectWithoutZooming": true
}
}
}]
}
Check an example here: https://codepen.io/team/amcharts/pen/80a7ccf3fb8d2c04d00ef9121ca0806c?editors=1010
Related
I use the library amchart to generate a chart with the plugin dataLoader
. But each time there is one day empty at the begin and the end of the chart for no reason. Did someone already get this error?
-- EDIT FIDDLE --
I create a fiddle using the example data from amchart that you can find here. I just change the chart type to "line" and the default period to "10D" and as you can see there is still a space on the right of the chart (if also at left as well if you change the period). Is it possible to erase it?
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "none",
//"color": "#fff",
"dataSets": [ {
"title": "MSFT",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
/**
* data loader for events data
*/
"eventDataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function( data ) {
for ( var x in data ) {
switch ( data[ x ].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[ x ] = {
"type": "pin",
"graph": "g1",
"backgroundColor": color,
"date": data[ x ].Date,
"text": data[ x ].Type,
"description": "<strong>" + data[ x ].Title + "</strong><br />" + data[ x ].Description
};
}
return data;
}
}
}, {
"title": "TXN",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": true,
"categoryField": "Date",
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/TXN.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
} ],
"dataDateFormat": "YYYY-MM-DD",
"panels": [ {
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"type": "line",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
"comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
} ],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
},
{
"title": "Volume",
"percentHeight": 30,
"marginTop": 1,
"columnWidth": 0.6,
"showCategoryAxis": false,
"stockGraphs": [ {
"valueField": "volume",
"openField": "open",
"type": "column",
"showBalloon": false,
"fillAlphas": 1,
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"useDataSetColors": false
} ],
"stockLegend": {
"markerType": "none",
"markerSize": 0,
"labelText": "",
"periodValueTextRegular": "[[value.close]]"
},
"valueAxes": [ {
"usePrefixes": true
} ]
}
],
"panelsSettings": {
// "color": "#fff",
"plotAreaFillColors": "#333",
"plotAreaFillAlphas": 1,
"marginLeft": 60,
"marginTop": 5,
"marginBottom": 5
},
"chartScrollbarSettings": {
"graph": "g1",
"graphType": "line",
"usePeriod": "WW",
"backgroundColor": "#333",
"graphFillColor": "#666",
"graphFillAlpha": 0.5,
"gridColor": "#555",
"gridAlpha": 1,
"selectedBackgroundColor": "#444",
"selectedGraphFillAlpha": 1
},
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 1,
"inside": false,
"showLastLabel": true
},
"chartCursorSettings": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"legendSettings": {
//"color": "#fff"
},
"stockEventsSettings": {
"showAt": "high",
"type": "pin"
},
"balloon": {
"textAlign": "left",
"offsetY": 10
},
"periodSelector": {
"position": "bottom",
"periods": [ {
"period": "DD",
"count": 10,
"label": "10D",
"selected": true
}, {
"period": "MM",
"count": 1,
"label": "1M"
}, {
"period": "MM",
"count": 6,
"label": "6M"
}, {
"period": "YYYY",
"count": 1,
"label": "1Y"
}, {
"period": "YYYY",
"count": 2,
"label": "2Y"
},
/* {
"period": "YTD",
"label": "YTD"
},*/
{
"period": "MAX",
"label": "MAX"
}
]
}
} );
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width : 100%;
height : 500px;
}
<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/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.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" />
<div id="chartdiv"></div>
Finally,
in your example in "categoryAxesSettings": change "startOnAxis" to true
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1,
"startOnAxis" : true, // add this line
},
follow this doc: https://docs.amcharts.com/3/javascriptstockchart/CategoryAxis#startOnAxis
Is it possible to enter duration in floats, for example, 0.89
My fiddle - https://jsfiddle.net/sachinpsingh/36xqwskf/1/
I tried but it seems to accept only integer values.
The Code -
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"period": "fff",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"balloonDateFormat": "QQQ",
"columnWidth": 0.5,
"marginBottom": 30,
"valueAxis": {
"type": "date",
"minPeriod": "fff",
"ignoreAxisWidth": true
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[duration]]ms"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01 00:00:00",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
}]
}],
"valueScrollbar": {
"autoGridCount": true
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
}
});
When I define "duration": 4.88, it shows in the chart as "duration": 4 (only integer value).
I want that it should show 4.88 as the size in chart.
I figured out a solution -
just need to replace the "type": "date", to "type": "time",
just as below -
"valueAxis": {
"type": "time",
"minPeriod": "fff",
"ignoreAxisWidth": true
}
It Works!
Is is possible to change color of StockEvent balloon (hint) border? It's always red. I can't find any suitable option. Please see my current solution http://jsfiddle.net/a04j0hqv/4/
There is of course possibility to change AmBalloon border of value hint but it seems to be impossible to change it to StockEvent.
var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];
function parseDate(dateString) {
var dateArray = dateString.split("-");
if(dateArray.lenght < 2) { alert(dateString); }
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
return date;
}
for (var j in amChartsData) {
amChartsData[j].date = parseDate(amChartsData[j].date);
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#006EBE",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
} ],
"dataProvider": amChartsData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date( 2017, 3, 6 ),
"type": "sign",
"rollOverColor": "#EF9463",
"borderColor": "#EF9463",
"backgroundColor": "#ffffff",
"graph": "g1",
"description": "Lorem Ipsum ...",
}]
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"pan": true,
"cursorColor": "#006EBE",
"valueBalloonsEnabled": true,
"valueLineAlpha": 0.5,
},
"balloon": {
"shadowAlpha": 0,
"borderThickness": 1,
"adjustBorderColor": true,
"cornerRadius": 5,
"fillColor": "#FFFFFF"
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 10,
"date": "10 days"
}, {
"period": "MM",
"count": 1,
"date": "1 month"
}, {
"period": "YYYY",
"count": 1,
"date": "1 year"
}, {
"period": "YTD",
"date": "YTD"
}, {
"period": "MAX",
"date": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
}
} );
You can change all stock events' balloon color by setting the balloonColor property in stockEventsSettings:
"stockEventsSettings": {
"balloonColor": "#008800"
}
Unfortunately you can't individually set the border for each different event.
Here's an updated fiddle with the balloon set to green.
I use amCharts but I need to group data results by Date:
Demo example
I have 5 visits by one day and chart need to group results.
My code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</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"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
By documentation I use grouping settings without success.
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
Any Help?
According to the documentation, categoryAxesSettings only applies to stock type charts. You're using a serial here. An alternative option is to translate the data yourself:
function translateData(data){
var newData = [], dates = [];
data.map(function(item){
var index = dates.indexOf(item.date);
if(index > -1){
newData[index].value += item.value;
}else{
newData.push(item);
dates.push(item.date);
}
});
return newData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</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"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": translateData([
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
}
])
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="height: 300px;"></div>
When I add the guides into valueAxesSettings but it doesn't work even I choose valueAxesSettings into valueAxes.
Furthermore, what the difference between valueAxesSettings and valueAxes, as the reference said If you change a property after the chart is initialized, you should call stockChart.validateNow() method in order for it to work.? what does it mean?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<style>
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
</style>
<script type="text/javascript">
AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [ {
"dataProvider": [ {
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
} ],
"fieldMappings": [ {
"fromField": "val",
"toField": "value"
} ],
"categoryField": "date"
} ],
"panels": [ {
"legend": {},
"stockGraphs": [ {
"id": "graph1",
"valueField": "value",
"type": "line",
"title": "MyGraph",
"fillAlphas": 0
} ]
} ],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 13,
"guides": {
"value": 10,
"tovalue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true,
}
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
}
} );
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
valueAxesSettings is a global version of valueAxes - anything you set in valueAxesSettings will be applied to all stock panels' valueAxes objects. If you want to override or set a specific setting in one of your panels' valueAxes, you can set a valueAxes inside the panel:
"panels": [{
"valueAxes":[{
//settings specific to this panel
}],
// ...
}, {
"valueAxes": [{
//settings specific to this panel
}]
}
The guides property is an array. You're setting it as a single object, which is incorrect. Also, the property is called toValue, not "tovalue" - the casing is important. Here's the corrected valueAxesSettings object:
"valueAxesSettings": {
"dashLength": 13,
"guides": [{
"value": 10,
"toValue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true
}]
},
Demo:
AmCharts.makeChart("chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [{
"dataProvider": [{
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
}],
"fieldMappings": [{
"fromField": "val",
"toField": "value"
}],
"categoryField": "date"
}],
"panels": [{
"valueAxes": [{
}],
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "value",
"type": "line",
"title": "MyGraph",
"fillAlphas": 0
}]
}],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 13,
"guides": [{
"value": 10,
"toValue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true
}]
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [{
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
}
});
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
Regarding validateNow, if you change a property in your stock chart object, you need to call validateNow to redraw the chart with your new settings. validateData is primarily used when you make changes to your dataSets/dataProvider.