Related
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>
I am using Kendo charts. I need to show the value of respective stacked bar chart in the below format. Please find the below image and JSfiddle URL for reference.
Sample Code
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
data: [10, 10, 10, 10, 10],
color: "#32CD32",
}, {
name: "BB",
data: [30, 10, 10, 10, 45],
color: "#0000FF",
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
categories: ['A', 'B', 'C', 'D', 'E'],
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
Expected output
You could use data binding and label templates. Bind to:
var data = [
{"Category": "A", "AA": 10, "BB": 30},
{"Category": "B", "AA": 10, "BB": 10},
{"Category": "C", "AA": 10, "BB": 10},
{"Category": "D", "AA": 10, "BB": 10},
{"Category": "E", "AA": 10, "BB": 45}
];
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
DEMO
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>
I am trying to show two graphs in an AmChart stock chart but it is showing the same data in both charts. My Javascript code looks like this:
var chart = AmCharts.makeChart("chartdiv", {
type: "stock", // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock
pathToImages: "http://www.amcharts.com/images/",
dataDateFormat: "YYYY-MM-DD",
dataSets: [{
color: "#b0de09", // bar chart color
// userRegistrations variable is source of user data
dataProvider: userRegistrations,
fieldMappings: [{
fromField: "val",
toField: "value"
}],
categoryField: "date"
},
{
color: "#efefef", // bar chart color
// likes variable is source of data for likes
dataProvider: likes,
fieldMappings: [{
fromField: "val",
toField: "value"
}],
categoryField: "date",
}],
panels: [{
legend: {},
stockGraphs: [{
id: "graph1",
valueField: "value",
type: "column",
title: "User Graph",
fillAlphas: 1,
comparable: true,
compareField: "value",
balloonText: "Users registered: <b>[[val]]</b>",
}]
},
{
legend: {},
stockGraphs: [{
id: "graph2",
valueField: "value",
type: "column",
title: "Watch List Graph",
fillAlphas: 1,
comparable: true,
compareField: "value",
balloonText: "Added to Watch List: <b>[[val]]</b>",
}]
}],
panelsSettings: {
startDuration: 1
},
categoryAxesSettings: {
dashLength: 5
},
valueAxesSettings: {
dashLength: 5
},
chartScrollbarSettings: {
graph: "graph1",
graphType: "line",
position: "top"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1
},
// range selector
periodSelector: {
position: "top",
periods: [{
period: "DD",
count: 1,
label: "1 day"
}, {
period: "DD",
selected: true,
count: 7,
label: "7 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
// ballon on mouse hover
"balloon": {
"adjustBorderColor": true,
"color": "#000000",
// "cornerRadius": 5,
"fillColor": "#FFFFFF"
}
});
// date picker
chart.addListener('rendered', function (event) {
var dataProvider = chart.dataSets[0].dataProvider;
$(".amChartsPeriodSelector .amChartsInputField").datepicker({
dateFormat: "dd-mm-yy",
minDate: dataProvider[0].date,
maxDate: dataProvider[dataProvider.length-1].date,
onClose: function() {
$(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
}
});
});
I have two datasets and two panels. Both panels are showing the same dataset (the one with the userRegistrations dataProvider). I want to show to separate data sets.
I have looked through the AmCharts documentation but cannot work out how to do this.
If I understand it correctly, you want the first panel to display graph generated from first data set, and the second panel to show graph from second data set.
To achieve that you will need to do a couple of things:
1) Make the second data set compared by setting it's compared parameter to true as well as map the value field to a different name than the first data set:
{
color: "#efefef", // bar chart color
// likes variable is source of data for likes
dataProvider: likes,
fieldMappings: [{
fromField: "val",
toField: "value2"
}],
categoryField: "date",
compared: true
}
2) Make the graph on the second panel use "value2" field insteadl of "value".
Here's full code:
var chart = AmCharts.makeChart("chartdiv", {
type: "stock", // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock
pathToImages: "http://www.amcharts.com/images/",
dataDateFormat: "YYYY-MM-DD",
dataSets: [{
color: "#b0de09", // bar chart color
// userRegistrations variable is source of user data
dataProvider: userRegistrations,
fieldMappings: [{
fromField: "val",
toField: "value"
}],
categoryField: "date"
},
{
color: "#efefef", // bar chart color
// likes variable is source of data for likes
dataProvider: likes,
fieldMappings: [{
fromField: "val",
toField: "value2"
}],
categoryField: "date",
compared: true
}],
panels: [{
legend: {},
stockGraphs: [{
id: "graph1",
valueField: "value",
type: "column",
title: "User Graph",
fillAlphas: 1,
comparable: true,
compareField: "value",
balloonText: "Users registered: <b>[[val]]</b>",
}]
},
{
legend: {},
stockGraphs: [{
id: "graph2",
valueField: "value2",
type: "column",
title: "Watch List Graph",
fillAlphas: 1,
comparable: true,
compareField: "value2",
balloonText: "Added to Watch List: <b>[[val]]</b>",
}]
}],
panelsSettings: {
startDuration: 1
},
categoryAxesSettings: {
dashLength: 5
},
valueAxesSettings: {
dashLength: 5
},
chartScrollbarSettings: {
graph: "graph1",
graphType: "line",
position: "top"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1
},
// range selector
periodSelector: {
position: "top",
periods: [{
period: "DD",
count: 1,
label: "1 day"
}, {
period: "DD",
selected: true,
count: 7,
label: "7 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
// ballon on mouse hover
"balloon": {
"adjustBorderColor": true,
"color": "#000000",
// "cornerRadius": 5,
"fillColor": "#FFFFFF"
}
});
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