Home Forums Chart Support combining candlestick chart and line chart (moving average line)

# combining candlestick chart and line chart (moving average line)

Viewing 15 posts - 1 through 15 (of 33 total)
• #17558

I am very much excited by the simplicity of canvasjs.
Wish to use it for my purpose.
I need candlestick chart with overlapped moving average lines on same canvas.
Can it be done?

• This topic was modified 6 years, 10 months ago by Vineet Deodhar. Reason: spelling
#17580

Thank you for your interest in CanvasJS.
Yes, it can be done. You can combine Candlestick chart with Spline chart, where spline represents the moving averages. You can loop through the candlestick series and use its corresponding dataPoints to dynamically calculate the spline series as shown in the code snippet below –

``````function calculateMovingAverage(chart) {

// return if there are insufficient dataPoints
if(chart.options.data[0].dataPoints.length <= 5) return;
else {
// Add a new line series for  Moving Averages
chart.options.data.push({
type: "spline",
markerSize: 0,
name: "SMA",
dataPoints: []
});
var total;
for(var i = 5; i < chart.options.data[0].dataPoints.length; i++) {
total = 0;
for(var j = (i - 5); j < i; j++) {
total += chart.options.data[0].dataPoints[j].y[3];
}
chart.options.data[1].dataPoints.push({
x: chart.options.data[0].dataPoints[i].x,
y: total / 5
});
}
}
}``````

Please have a look at this JSFiddle for a working example.

___
Suyash Singh
Team CanvasJS

#17581

Its really great to learn that my need can be satisfied by your library.
Thanks for that.

Furhter, may I ask– 1) what js code would be right for having Exponential Moving Averages instead of SMA.
2) I need 5 EMAs. So I think I can pass those many json datasets in the way you have specified. Right?

#17605

1) what js code would be right for having Exponential Moving Averages instead of SMA.

Yes, you can extend the code further to render Exponential Moving Averages. Please check the below code snippet for calculating Exponential Moving Averages –

``````function calculateExponentialMovingAverage(chart, emaPeriod) {
var currentEma = 0, prevEma = 0, temp = 0;

// Return if there are insufficient dataPoints
if(chart.options.data[0].dataPoints.length <= emaPeriod) return;

else {
chart.options.data.push({
type: "spline",
markerSize: 0,
name: "EMA",
yValueFormatString: "#,##0.00",
showInLegend: true,
dataPoints: []
});
for(var i = emaPeriod - 1; i < chart.options.data[0].dataPoints.length; i++) {
if(i === emaPeriod - 1) {
// Calculate Simple average upto emaPeriod
for(var j = 0; j < emaPeriod; j++)
temp += chart.options.data[0].dataPoints[j].y[3];
currentEma = temp / emaPeriod;
} else
currentEma = chart.options.data[0].dataPoints[i].y[3] * 2 / (emaPeriod + 1) + prevEma * (1 - 2 / (emaPeriod + 1));

chart.options.data[chart.options.data.length - 1].dataPoints.push({
x: chart.options.data[0].dataPoints[i].x,
y: currentEma
});
prevEma = currentEma;
}
}
}``````

Also, kindly take a look at this updated JSFiddle.

2) I need 5 EMAs. So I think I can pass those many json datasets in the way you have specified. Right?

Yes, you can add multiple EMA’s to the chart by adding them to data-series array.

___
Suyash Singh
Team CanvasJS

#17616

Thank you very much for your support.

#18861

Hello Suyash Singh,

I need to make moving average for a week with column and bar chart. Data should show in Column chart and moving average of two points for 7 days data should be by line chart on bar chart. Please HELP by giving a example.

Regards

#18862

Hello Suyash Singh,

I need to make moving average for a week with Column and Line charts. Data should show in Column chart for seven days and moving average of two points for 7 days data should be by line chart on bar chart. Please HELP by giving a example.

I am taking data from Database. This is Production numeric value.

Regards

#18877

To calculate 7 days Simple Moving Average you can loop through the column series, then sum up consecutive 7 days y-value and use the same in spline series representing Simple Moving Average as shown in the below code snippet –

``````function calculateMovingAverage(chart) {
var numOfDays = 7;
// return if there are insufficient dataPoints
if(chart.options.data[0].dataPoints.length <= numOfDays) return;
else {
// Add a new line series for  Moving Averages
chart.options.data.push({
type: "spline",
markerSize: 0,
name: "SMA",
yValueFormatString: "#,##0.00",
dataPoints: []
});
var total;
for(var i = numOfDays; i < chart.options.data[0].dataPoints.length; i++) {
total = 0;
for(var j = (i - numOfDays); j < i; j++) {
total += chart.options.data[0].dataPoints[j].y;
}
chart.options.data[1].dataPoints.push({
x: chart.options.data[0].dataPoints[i].x,
y: total / numOfDays
});
}
}
}``````

Please take a look at this JSFiddle on Column Chart with 7 Day Simple Moving Average. Also kindly have a look at:
1. Creating charts from database in ASP.NET MVC Application.

___
Suyash Singh
Team CanvasJS

#18879

Thank you so much Suyash. I will try this example..

I am very new to Canvas JS..

I am making chart with following code..Where should I call moving average function and what should I pass in below code.
If you kindly let me know that will be great help..

<script type=”text/javascript” src=”js/canvasjs.min.js”></script>
<script type=”text/javascript” src=”js/highcharts.js”></script>
<script type=”text/javascript” src=”js/highcharts-more.js”></script>
<script type=”text/javascript” src=”js/exporting.js”></script>
<script type=”text/javascript” src=”js/script.js”></script>
<script type=”text/javascript”>

var xVal1 = 0;
var yVal1 = 100;
var dataLength = 100; // number of dataPoints visible at any pointd
var dataResult = 0;

var dps3 = []; // dataPoints

[//colorSet Array
“#600080”,
“#669900”

]);
var chart3 = new CanvasJS.Chart(“chartContainerGas”, {
theme: “theme3”,
animationEnabled: true,
animationDuration: 2000,
backgroundColor: “transparent”,
title: {
//text: “Variance Report for Gas Production”
},
axisX: {
valueFormatString: “MMM”,
interval: 1,
intervalType: “month”

},
axisY: {
includeZero: false

},
data: [{
type: “line”,
dataPoints: dps3
}]
});
var xVal3 = 0;
var yVal3 = 100;
var month = 0;
var year = 0;
var day = 0;
var dataArray = null;
var dataLength = 100; // number of dataPoints visible at any point
var updateChart3 = function () {
var query = window.location.search.slice(1);
\$.ajax({
url: “GasProductionGraph.aspx/GetGasChartData”,
type: “POST”,
data: “{‘Month’:'” + query + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: false,
context: document.body,
success: function (data3) {
for (var j = 0; j < data3.d.length; j++) {
dataArray = data3.d[j].split(‘-abc-‘);

xVal3 = parseInt(dataArray[0]);
yVal3 = parseInt(dataArray[1]);
month = parseInt(dataArray[2]);
year = parseInt(dataArray[3]);
day = parseInt(dataArray[4]);

dps3.push({
x: new Date(year, month, day),
y: yVal3
});
}
},
error: function (result) {
}
});
chart3.render();
};
//// generates first set of dataPoints
updateChart3();

}

#18891

`calculateMovingAverage()` should be called before calling `chart.render()`. Please replace `chart3.render();` by

``````calculateMovingAverage(chart3);
chart3.render();``````

___
Suyash Singh
Team CanvasJS

#18976

#18979

Hello Sir,

I want to make another moving average line for some other field on the same chart. Currently, I am having Bar for Produced Part and Moving Average for Produced part, Now I want to have another Moving Average for some other Field on the same graph, how should I do? Currently my code is like this… I need to lines on bar graph

var xVal1 = 0;
var yVal1 = 100;
var dataLength = 100; // number of dataPoints visible at any pointd
var dataResult = 0;

var dps3 = []; // dataPoints
[//colorSet Array
“#2E8B57”,
“#669900”,
“#1BCDD1”

]);
var chart3 = new CanvasJS.Chart(“chartContainerGas”, {
theme: “theme3”,
animationEnabled: true,
animationDuration: 2000,
backgroundColor: “transparent”,
title: {
text: “Total Produced Part & Scrap Percentage”
},
axisX: {
title: “Overall Percentage”, labelAngle: 180, labelFontSize: 15, labelWrap: false
},
axisY: {
title: “Produced Parts”
},

data: [{
type: “column”,
//indexLabel: “”,
indexLabelFontColor: “red”, indexLabelFontSize: 30,
dataPoints: dps3
}

]
});
var xVal3 = 0;
var xVal31 = 0;
var indexlabelva = 0;
var yVal3 = 100;
var yVal31 = 100;
var dataLength = 100; // number of dataPoints visible at any point
var updateChart3 = function () {
var query = document.getElementById(‘ctl00_ContentPlaceHolder1_sdate’).value + “—” + document.getElementById(‘ctl00_ContentPlaceHolder1_edate’).value
\$.ajax({
url: “TrendlineChartPreAssembly.aspx/GetGasChartData”,
type: “POST”,
data: “{‘Dates’:'” + query + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: false,
context: document.body,
success: function (data3) {
for (var j = 0; j < data3.d.length; j++) {
xVal3 = parseInt(data3.d[j].split(‘-abc-‘)[0]);
yVal3 = parseInt(data3.d[j].split(‘-abc-‘)[3]);
indexLabel: parseInt(data3.d[j].split(‘-abc-‘)[6]);
dps3.push({
x: xVal3,
y: yVal3, label: (data3.d[j].split(‘-abc-‘)[2]), name: (data3.d[j].split(‘-abc-‘)[4]), indexLabel: (data3.d[j].split(‘-abc-‘)[6]) + ” %”, indexLabelFontColor: “red”

});
}
},
error: function (result) {
}
});
calculateMovingAverage(chart3);
calculateMovingAverageScrap(chart3);
chart3.render();

// Function to calculate n-Day Simple moving average
function calculateMovingAverage(chart) {
var numOfDays = 2;
// return if there are insufficient dataPoints
if (chart.options.data[0].dataPoints.length <= numOfDays) return;
else {
// Add a new line series for Moving Averages
chart.options.data.push({
type: “spline”,
markerSize: 0,
name: “SMA”,
yValueFormatString: “#,##0.00”,
dataPoints: []
});
var total;
for (var i = numOfDays; i < chart.options.data[0].dataPoints.length; i++) {
total = 0;
for (var j = (i – numOfDays) ; j < i; j++) {

total += chart.options.data[0].dataPoints[j].y;

}
chart.options.data[1].dataPoints.push({
x: chart.options.data[0].dataPoints[i].x,
y: total / numOfDays

}
}
}

// Function to calculate n-Day Simple moving average
function calculateMovingAverageScrap(chart) {
var numOfDays = 2;
// return if there are insufficient dataPoints
if (chart.options.data[0].dataPoints.length <= numOfDays) return;
else {
// Add a new line series for Moving Averages
chart.options.data.push({
type: “spline”,
markerSize: 0,
name: “SMA”,
yValueFormatString: “#,##0.00”,
dataPoints: []
});
var total;
for (var i = numOfDays; i < chart.options.data[0].dataPoints.length; i++) {
total = 0;
for (var j = (i – numOfDays) ; j < i; j++) {

total += chart.options.data[0].dataPoints[j].y;

}
chart.options.data[1].dataPoints.push({
x: chart.options.data[0].dataPoints[i].x,
y: total / numOfDays

}
}
}
};
//// generates first set of dataPoints
updateChart3();
\$(function () {
\$(“#<%= sdate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ });
\$(“#<%= edate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ });
});
}

I followed this example

https://jsfiddle.net/canvasjs/tq339Lm1/

Regards,

Nisha

#18980

Hello Sir,

I want to make another moving average line for some other field on the same chart. Currently, I am having Bar for Produced Part and Moving Average for Produced part, Now I want to have another Moving Average for some other Field on the same graph, how should I do? Currently my code is like this… I need to lines on bar graph..

var xVal1 = 0;
var yVal1 = 100;
var dataLength = 100; // number of dataPoints visible at any pointd
var dataResult = 0;

var dps3 = []; // dataPoints
[//colorSet Array
“#2E8B57”,
“#669900”,
“#1BCDD1”

]);
var chart3 = new CanvasJS.Chart(“chartContainerGas”, {
theme: “theme3”,
animationEnabled: true,
animationDuration: 2000,
backgroundColor: “transparent”,
title: {
text: “Total Produced Part & Scrap Percentage”
},
axisX: {
title: “Overall Percentage”, labelAngle: 180, labelFontSize: 15, labelWrap: false
},
axisY: {
title: “Produced Parts”
},

data: [{
type: “column”,
//indexLabel: “”,
indexLabelFontColor: “red”, indexLabelFontSize: 30,
dataPoints: dps3
}

]
});
var xVal3 = 0;
var xVal31 = 0;
var indexlabelva = 0;
var yVal3 = 100;
var yVal31 = 100;
var dataLength = 100; // number of dataPoints visible at any point
var updateChart3 = function () {
var query = document.getElementById(‘ctl00_ContentPlaceHolder1_sdate’).value + “—” + document.getElementById(‘ctl00_ContentPlaceHolder1_edate’).value
\$.ajax({
url: “TrendlineChartTraying.aspx/GetGasChartData”,
type: “POST”,
data: “{‘Dates’:'” + query + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: false,
context: document.body,
success: function (data3) {
for (var j = 0; j < data3.d.length; j++) {
xVal3 = parseInt(data3.d[j].split(‘-abc-‘)[0]);
yVal3 = parseInt(data3.d[j].split(‘-abc-‘)[3]);
indexLabel: parseInt(data3.d[j].split(‘-abc-‘)[6]);
dps3.push({
x: xVal3,
y: yVal3, label: (data3.d[j].split(‘-abc-‘)[2]), name: (data3.d[j].split(‘-abc-‘)[4]), indexLabel: (data3.d[j].split(‘-abc-‘)[6]) + ” %”, indexLabelFontColor: “red”

});
}
},
error: function (result) {
}
});
calculateMovingAverage(chart3);

chart3.render();

// Function to calculate n-Day Simple moving average
function calculateMovingAverage(chart) {
var numOfDays = 2;
// return if there are insufficient dataPoints
if (chart.options.data[0].dataPoints.length <= numOfDays) return;
else {
// Add a new line series for Moving Averages
chart.options.data.push({
type: “spline”,
markerSize: 0,
name: “SMA”,
yValueFormatString: “#,##0.00”,
dataPoints: []
});
var total;
for (var i = numOfDays; i < chart.options.data[0].dataPoints.length; i++) {
total = 0;
for (var j = (i – numOfDays) ; j < i; j++) {

total += chart.options.data[0].dataPoints[j].y;

}
chart.options.data[1].dataPoints.push({
x: chart.options.data[0].dataPoints[i].x,
y: total / numOfDays

}
}
}
};
//// generates first set of dataPoints
updateChart3();
\$(function () {
\$(“#<%= sdate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ });
\$(“#<%= edate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ });
});

#18984

The functions `calculateMovingAverage()` and `calculateMovingAverageScrap()` will generate the same set of dataPoints as essentially they are same. Can you please brief us further about your requirements along with a jsfiddle with your sample data, or pictorial representation, so that we can understand your requirements better and help you out.
___
Suyash Singh
Team CanvasJS

#18986

Hello Suyash,

https://jsfiddle.net/SRDEVELOPER/QwZuf/820/

I need chart like this. One bar and two moving average with different field.

I need moving average of both lines

var chart = new CanvasJS.Chart(“chartContainer”,{
title:{
text: “Multiple Y Axis”
},
axisX:{
valueFormatString: “####”,
interval: 1
},
axisY:[{
title: “Linear Scale”,
},
{
title: “Logarithmic Scale”,
logarithmic: true,
lineColor: “#C24642”,
titleFontColor: “#C24642”,
labelFontColor: “#C24642”
}],
axisY2:[{
title: “Linear Scale”,
lineColor: “#7F6084”,
titleFontColor: “#7F6084”,
labelFontColor: “#7F6084”
},
{
title: “Logarithmic Scale”,
logarithmic: true,
interval: 1,
lineColor: “#86B402”,
titleFontColor: “#86B402”,
labelFontColor: “#86B402”
}],

data: [
{
type: “column”,
showInLegend: true,
name: “Axis Y-1”,
xValueFormatString: “####”,
dataPoints: [
{ x: 2006, y: 6 },
{ x: 2007, y: 2 },
{ x: 2008, y: 5 },
{ x: 2009, y: 7 },
{ x: 2010, y: 1 },
{ x: 2011, y: 5 },
{ x: 2012, y: 5 },
{ x: 2013, y: 2 },
{ x: 2014, y: 2 }
]
},
{
type: “spline”,
showInLegend: true,
axisYIndex: 1, //Defaults to Zero
name: “Axis Y-2”,
xValueFormatString: “####”,
dataPoints: [
{ x: 2006, y: 15 },
{ x: 2007, y: 3 },
{ x: 2008, y: 20 },
{ x: 2009, y: 10 },
{ x: 2010, y: 30 },
{ x: 2011, y: 10 },
{ x: 2012, y: 600 },
{ x: 2013, y: 20 },
{ x: 2014, y: 2 }
]
},
{
type: “spline”,
showInLegend: true,
axisYType: “secondary”,
axisYIndex: 1, //When axisYType is secondary, axisYIndex indexes to secondary Y axis & not to primary Y axis
name: “Axis Y2-2”,
xValueFormatString: “####”,
dataPoints: [
{ x: 2006, y: 86 },
{ x: 2007, y: 15 },
{ x: 2008, y: 27 },
{ x: 2009, y: 78 },
{ x: 2010, y: 46 },
{ x: 2011, y: 70 },
{ x: 2012, y: 50 },
{ x: 2013, y: 60 },
{ x: 2014, y: 50 }
]
}
]
});

chart.render()

Please let me know if anything is clear..

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.