Home › Forums › Chart Support › combining candlestick chart and line chart (moving average line) › Reply To: combining candlestick chart and line chart (moving average line)
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
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(“skyblueShades”, [//colorSet Array “#2E8B57”, “#669900”, “#1BCDD1”
]); var chart3 = new CanvasJS.Chart(“chartContainerGas”, { theme: “theme3”, colorSet: “greenShades”, 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) { // alert(“Error”); } }); 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
}); //alert(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++) {
}); //alert(numOfDays); } } } }; //// generates first set of dataPoints updateChart3(); $(function () { $(“#<%= sdate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ }); $(“#<%= edate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ }); }); }
Please help..
I followed this example
https://jsfiddle.net/canvasjs/tq339Lm1/
Regards,
Nisha