I want to know if there is a way to set a default zoom when a amchart graph is generated in AmCharts.
Here is the code:
AmCharts.makeChart("chartdiv", {
type: "serial",
mouseWheelZoomEnabled: true,
fontFamily: "Montserrat",
path: "lib/amcharts/",
theme: "light",
fontSize: 12,
categoryField: "category",
precision: 0,
decimalSeparator: ",",
thousandsSeparator: ".",
plotAreaFillAlphas: 0.11,
plotAreaFillColors: "#61a1e6",
zoomOutButtonColor: "#D6E7F9",
sequencedAnimation: true,
startDuration: 1,
startEffect: "easeOutSine",
balloonText: "[[title]] [[category]]:[[value]]",
urlTarget: "#drill",
categoryAxis: {
autoRotateAngle: 0,
autoWrap: false,
gridPosition: "start",
axisAlpha: 0.16,
color: "#054bff",
gridAlpha: 0,
title: ""
},
chartScrollbar: {
"enabled": true
},
trendLines: [],
graphs: [
[LEGEND]
],
guides: [],
valueAxes: [{
[STACKED]
id: "ValueAxis-1",
axisAlpha: 0,
axisThickness: 0,
color: "#ff4444",
fillAlpha: 1,
gridAlpha: 0.17,
integersOnly: true,
title: ""
}],
allLabels: [],
balloon: {
fillAlpha: 0.95,
shadowAlpha: 0.11,
borderThickness: 5,
animationDuration: 2,
cornerRadius: 5
},
legend: {
markerBorderThickness: 4,
markerSize: 15,
markerType: "circle",
position: "right",
useGraphSettings: true,
valueText: ""
},
titles: [{
font: "Segoe UI",
bold: true,
color: "#17baef",
id: "Title-1",
size: 25,
text: "[TITLE]"
},
{
color: "#7adaf9",
id: "Title-2",
size: 15,
text: "[SUBTITLE1]"
},
{
color: "#7adaf9",
id: "Title-3",
size: 15,
text: "[SUBTITLE2]"
}
],
export: {
enabled: true,
}
})
You can use a listener such as init to call the chart's zoom methods upon chart initialization. For example, using zoomToIndexes
listeners: [{
event: "init",
method: function(e) {
e.chart.zoomToIndexes(4, 7); //set default zoom
}
}]
Demo:
var data = [
{
"category": "cat-1",
"value3": 4,
"value2": 2,
"value1": 6
},
{
"category": "cat-2",
"value3": 1,
"value2": 3,
"value1": 5
},
{
"category": "cat-3",
"value3": 3,
"value2": 4,
"value1": 6
},
{
"category": "cat-4",
"value3": 1,
"value2": 3,
"value1": 3
},
{
"category": "cat-5",
"value3": 5,
"value2": 4,
"value1": 4
},
{
"category": "cat-6",
"value3": 4,
"value2": 2,
"value1": 6
},
{
"category": "cat-7",
"value3": 4,
"value2": 2,
"value1": 4
},
{
"category": "cat-8",
"value3": 1,
"value2": 4,
"value1": 4
},
{
"category": "cat-9",
"value3": 4,
"value2": 3,
"value1": 6
},
{
"category": "cat-10",
"value3": 3,
"value2": 3,
"value1": 3
}
];
AmCharts.makeChart("chartdiv", {
type: "serial",
dataProvider: data,
mouseWheelZoomEnabled: true,
fontFamily: "Montserrat",
//path: "lib/amcharts/",
theme: "light",
fontSize: 12,
categoryField: "category",
precision: 0,
decimalSeparator: ",",
thousandsSeparator: ".",
plotAreaFillAlphas: 0.11,
plotAreaFillColors: "#61a1e6",
zoomOutButtonColor: "#D6E7F9",
sequencedAnimation: true,
startDuration: 1,
startEffect: "easeOutSine",
balloonText: "[[title]] [[category]]:[[value]]",
urlTarget: "#drill",
categoryAxis: {
autoRotateAngle: 0,
autoWrap: false,
gridPosition: "start",
axisAlpha: 0.16,
color: "#054bff",
gridAlpha: 0,
title: ""
},
chartScrollbar: {
"enabled": true
},
trendLines: [],
graphs: [{
title: "Graph 1",
type: "column",
fillAlphas: .8,
valueField: "value1"
},
{
title: "Graph 2",
type: "column",
fillAlphas: .8,
valueField: "value2"
},
{
title: "Graph 3",
type: "column",
fillAlphas: .8,
valueField: "value3"
}
],
guides: [],
valueAxes: [{
stackType: "stacked",
id: "ValueAxis-1",
axisAlpha: 0,
axisThickness: 0,
color: "#ff4444",
fillAlpha: 1,
gridAlpha: 0.17,
integersOnly: true,
title: ""
}],
allLabels: [],
balloon: {
fillAlpha: 0.95,
shadowAlpha: 0.11,
borderThickness: 5,
animationDuration: 2,
cornerRadius: 5
},
legend: {
markerBorderThickness: 4,
markerSize: 15,
markerType: "circle",
position: "right",
useGraphSettings: true,
valueText: ""
},
titles: [{
font: "Segoe UI",
bold: true,
color: "#17baef",
id: "Title-1",
size: 25,
text: "[TITLE]"
},
{
color: "#7adaf9",
id: "Title-2",
size: 15,
text: "[SUBTITLE1]"
},
{
color: "#7adaf9",
id: "Title-3",
size: 15,
text: "[SUBTITLE2]"
}
],
export: {
enabled: true,
},
listeners: [{
event: "init",
method: function(e) {
e.chart.zoomToIndexes(4, 7); //set default zoom
}
}]
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
Related
I created a time series line chart using the echarts, it works fine when zoomed out completely, but when I start to zoom in, the lines disappear at certain places. I could see the data is getting plotted on hover.
Adding the filterMode as mentioned by some folks didn't help.
Here are the options I am passing to the echarts:
{
xAxis: {
type: "time",
nameLocation: "center",
nameGap: 20,
interval: 420000,
min: 1625741884000,
max: 1625749084000,
axisLabel: {
rotate: 0
},
boundaryGap: ["0%", "0%"]
},
yAxis: [
{
type: "value",
nameLocation: "center",
nameGap: 8,
interval: 0.33,
min: 1,
max: 5.33,
axisLabel: {
margin: 24,
rotate: 0
}
}
],
series: [
{
id: "test",
name: "Average Time",
yAxisIndex: 0,
data: [
{
value: [1625741884000, 1]
},
{
value: [1625741885000, 1]
},
.....
],
subSeries: [],
invert: false,
type: "line",
symbol: "emptyCircle",
showSymbol: false,
symbolSize: 10,
smooth: false,
color: "#4da6e8",
lineStyle: {}
}
],
tooltip: {
trigger: "axis",
showCross: true,
axisPointer: {
type: "cross",
label: {}
},
appendToBody: true,
textStyle: {
fontSize: 12
}
},
dataZoom: [
{
type: "slider",
orient: "horizontal",
startValue: 1625743801612,
endValue: 1625746325168,
filterMode: "none"
},
{
type: "inside",
orient: "horizontal",
startValue: 1625743801612,
endValue: 1625746325168,
filterMode: "none"
}
],
animation: false,
visualMap: [
{
dimension: 0,
seriesIndex: 0,
pieces: [],
inRange: {
opacity: 0.3
},
type: "piecewise",
show: false,
outOfRange: {}
}
],
grid: {
top: 5,
right: 50,
left: 20,
bottom: 45,
containLabel: true
}
}
If you want to see the exact data being passed, here is the sandbox with the issue reproduced: https://codesandbox.io/s/echart-line-vanilla-6yx5s?file=/src/index.js
Try zooming in/out on the chart, you'll the lines disappear at some places.
I could not figure out the reason behind this behaviour/issue.
echarts v4.7.0
It happens because of the visualMap. I also had this bug in my project. I solve it by removing the maximum number limit.
This is the old visualMap code:
"visualMap": {
"show": false,
"dimension": 0,
"pieces": [
{
"max": 183,
"color": 'rgba(58,77,233,0.7)',
},
{
"min": 183,
"max": 365,
"color": 'rgba(255, 16, 230, 1)',
},
],
},
This is the new visualMap code:
"visualMap": {
"show": false,
"dimension": 0,
"pieces": [
{
"min": 0,
"max": 183,
"color": "rgba(58,77,233,0.7)"
},
{
"min": 183,
"color": "rgba(255, 16, 230, 1)"
}
],
},
So without the maximum limit the visual map can`t go out of the range and the zoom will work correctly.
Is it possible in Plotly.js to place tick marks between the bars? Here i'd like the ticks to represent cut points in a continuous distribution and the bars to represent counts within the intervals between. An alternative is to make the axis labels ranges, e.g. "5-<10", "10-<25", "25-<50", etc. but it seems cleaner to show the breaks.
Below is a mockup in Paintbrush showing the desired effect, here i added tick marks and moved the number labels by dragging. Also is a Codepen link to toy data: https://codepen.io/proto/pen/bKGOXg
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
width: 500,
height: 360,
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);
So I checked the plotly documentation, please checkout the documentation available here
We have a property under the bar chart object called offset. Plotly describes this property as.
offset (number or array of numbers)
Shifts the position where the bar is drawn (in position axis units).
In "group" barmode, traces that set "offset" will be excluded and
drawn in "overlay" mode instead.
When I set the property to 0.1, I am getting the expected result. Please checkout the below example and let me know if this solves your issue!
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
offset: 0.1,
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
colorway: [
"#3399CC",
"#99BB66",
"#2266AA",
"#FFCC00",
"#888888",
"#FFAA00",
"#800080"
],
color: "purple",
plotlyType: "bar",
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
ticks: "outside",
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
transposeData: false,
showOverall: false,
width: 500,
height: 360,
showLegend: true,
reverse: {},
titles: {},
swapCategoryAndLegend: false
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
Which JS library is best to do the above type of chart ?
I want to combine clustered column chart with line chart as shown in the picture above.
My requirement is each column should have a low and high value set
Please use highcharts for this.
please refer JSFiddle for the code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
plotOptions: {
series: {
pointWidth: 25
},
line: {
marker: {
type: 'dot'
}
}
},
title: {
text: null
},
series: [{ "name": "india", "data": [{ y: 1, color: 'red' }, { y: 3, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 2, color: '#965129' }] },
{"name": "usa", "data": [0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 1, color: '#965129' }] },
{ "name": "china", "data": [0, 0, 0, 0, 0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3.1, color: '#f1da37' }, { y: 1.9, color: '#965129' }]}, { "name": "target", "data": [3, 1, 3, 2, 2, 1, 1.9, 2.4, 2.8, 1.9, 2.9, 1.6], yAxis: 1, type: 'line' },
{ "name": "baseline", "data": [1.3, .1, 1.3, 0, 1.2, .5, 1.2, .2, .5, 1.2, 2.1, .2], yAxis: 1, type: 'line' }],
xAxis: {
categories: [{ "name": "india", "categories": ["june 2016", "july 2016", "august 2016", "september 2016"] }, { "name": "usa", "categories": ["may 2017", "june 2016", "july 2016", "august 2016"] }, { "name": "china", "categories": ["may 2017", "june 2017", "july 2017", "august 2017"] }]
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
}
}, ,
labels: {
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
}],
});
});
I have a problem using dynamic div id in directive template to rendering graph. The error that I get is
Cannot set property 'innerHTML' of null
My template.html
<div id="{{title}}" style="height: 40vh;"></div>
The directive is simply rendering graph on given div id
link: function (scope, element, attrs) {
let chart = AmCharts.makeChart(scope.title, {
type: "stock",
theme: "light",
dataSets: [scope.data.dataset],
panels: [{
showCategoryAxis: false,
recalculateToPercents: "never",
title: scope.data.title,
valueAxes: [{
title: scope.data.type,
titleFontSize: 10,
titleBold: false
}],
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
bullet: "round",
bulletBorderColor: "#FFFFFF",
bulletBorderAlpha: 1,
balloonText: "[[title]]: <b>[[value]]</b>",
compareGraphBalloonText: "[[title]]: <b>[[value]]</b>",
compareGraphBullet: "round",
compareGraphBulletBorderColor: "#FFFFFF",
compareGraphBulletBorderAlpha: 1
}],
stockLegend: {
periodValueTextRegular: "[[value.close]]"
},
}],
panelsSettings: {
mouseWheelZoomEnabled: true,
marginLeft: 60
},
valueAxesSettings: {
axisAlpha: 1,
gridThickness: 0,
axisThickness: 1,
inside: false
},
categoryAxesSettings: {
minPeriod: "ss"
},
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
updateOnReleaseOnly: false
},
chartCursorSettings: {
cursorPosition: "mouse"
},
periodSelector: {
dateFormat: "YYYY-MM-DD JJ:NN:SS",
periods: [{
period: "hh",
count: 1,
label: "1 hour"
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hour"
}, {
period: "hh",
count: 12,
label: "12 hours"
}, {
period: "MAX",
label: "MAX"
}]
}
});
}
Anybody have an idea how to get around this problem, thanks in advance.
Try setting the ID on the div by using ng-attr-. For example: <div ng-attr-id="title" style="height: 40vh;"></div>
I am making stock charts with amcharts library . Here is what I have achieved
And here is what I want
You can compare both picture and see I have cylindrical and moving avg graph (dashed lines) but I am not able to add spikes which are showing at the bottom of graph in original one. (Pink and orange color). I don't know how to add those spikes in stock graph .
My data is dynamic so I can't create a js fiddle but I can provide my function here-
function load_stock_graph(graph_type, history, title, aggregate){
// DEFINE CHART PLUGINS
AmCharts.averageGraphs = 0;
AmCharts.addMovingAverage = function (dataSet, panel, field, aggregate, col ,graph) {
// update dataset
var avgField = "avg"+AmCharts.averageGraphs;
dataSet.fieldMappings.push({
fromField: avgField,
toField: avgField});
// calculate moving average
var fc = 0;
var sum = 0;
for (var i = 0; i < dataSet.dataProvider.length; i++) {
// console.log(aggregate[i].ema_0008)
var dp = dataSet.dataProvider[i];
if (dp[field] !== undefined) {
sum += dp[field];
fc++;
if (aggregate[i] !== undefined){
if(col == '08'){
dp[avgField] = aggregate[i].ema_0008;
}else if(col == '15'){
dp[avgField] = aggregate[i].ema_0015;
}else if(col == '20'){
dp[avgField] = aggregate[i].ema_0020;
}
}
}
}
// create a graph
graph.valueField = avgField;
panel.stockGraphs.push(graph);
// increment average graph count
AmCharts.averageGraphs++;
}
// CHART DATA
var chartData = [];
var chartData1 = [];
generateChartData(history);
function generateChartData(history) {
var firstDate = new Date();
firstDate.setHours(0, 0, 0, 0);
firstDate.setDate(firstDate.getDate() - 2000);
for (var i = 0; i < history.length; i++) {
var date = new Date(history[i].date);
var val = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
date: date,
open: history[i].open,
close: history[i].close,
high: history[i].high,
low: history[i].low,
volume: history[i].volume,
value: val
});
}
}
// CHART CONFIG
var chartConfig = {
type: "stock",
pathToImages : "/static/img/amcharts/",
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "val"
}],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date",
compared: false,
},
{
fieldMappings: [{
fromField: "value",
toField: "value"
}],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date"
},
],
panels: [{
title: "Value",
percentHeight: 70,
stockGraphs: [{type: graph_type,
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: 40,
marginTop: 1,
columnWidth: 0.6,
showCategoryAxis: false,
valueAxes: [{
usePrefixes: true
}],
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]]"
}
}
],
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"
},
balloon: {
textAlign: "left",
offsetY: 10
},
periodSelector: {
position: "bottom",
periods: [ {
period: "DD",
count: 10,
label: "10D"
}, {
period: "MM",
count: 1,
label: "1M"
}, {
period: "MM",
count: 6,
selected: true,
label: "6M"
}, {
period: "YYYY",
count: 1,
label: "1Y"
}, {
period: "YYYY",
count: 2,
label: "2Y"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
} ]
},
"export": {
"enabled": true,
"backgroundColor": "#fff",
"dataDateFormat": "YYYY-MM-DD"
}
}
// ADD INDICATORS
// ema_0008
AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '08', {
useDataSetColors: false,
color: "#ccffcc",
lineColor: "#F4F009",
title: "aggregate ema 0008",
dashLength: 3
});
// ema_0015
AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '15',{
useDataSetColors: false,
color: "#ccffcc",
lineColor: "#2C7F1D",
title: "aggregate ema 0015",
dashLength: 3
});
// ema_0020
AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '20',{
useDataSetColors: false,
color: "#ccffcc",
lineColor: "#A109E8",
title: "aggregate ema 0020",
dashLength: 3
});
// Empty chart instance so that chart loaded via ajax can work correctly
AmCharts.charts = [];
// CREATE CHART
var chart = AmCharts.makeChart("chartdiv", chartConfig);
}
Sounds like you just need to add another line graph in a separate panel.
Here's how to do it:
1) Add additional field in your data. You currently have open, high, low, close field. Let's add another one, say, "pink".
2) Update Data Set's fieldMappings property, to accommodate for the change:
[{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "val"
}, {
fromField: "pink",
toField: "pink"
}]
3) Add additional stock panel and a graph that will use the newly added data field:
{
percentHeight: 20,
showCategoryAxis: false,
stockGraphs: [{
valueField: "pink",
showBalloon: false,
lineColor: "#fb02fe",
lineThickness: 2,
useDataSetColors: false
}]
}
If you would have wanted to add the indicator to some existing panel, you would just need to define the graph in it's stockGraphs array. I.e.:
{
percentHeight: 20,
showCategoryAxis: false,
stockGraphs: [{
valueField: "pink",
showBalloon: false,
lineColor: "#fb02fe",
lineThickness: 2,
useDataSetColors: false
}, {
valueField: "red",
showBalloon: false,
lineColor: "#cc0000",
lineThickness: 2,
useDataSetColors: false
}]
}
Use this process to add as many indicators as you need.
Here's a working demo (with random values)
http://codepen.io/amcharts/pen/938b09efeabca4596c0a2cdaea60a269