Home forums Using CanvasJS combining candlestick chart and line chart (moving average line) Reply To: combining candlestick chart and line chart (moving average line)

#18879

nisha
Member

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”>
window.onload = function () {

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

var dps3 = []; // dataPoints

CanvasJS.addColorSet(“greenShades”,
[//colorSet Array
“#600080”,
“#669900”

]);
var chart3 = new CanvasJS.Chart(“chartContainerGas”, {
theme: “theme3”,
colorSet: “greenShades”,
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 () {
// alert(window.location.search.slice(1));
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) {
// alert(“Error”);
}
});
chart3.render();
};
//// generates first set of dataPoints
updateChart3();

}