Hello Suyash,
Please check following link: 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”, lineColor: “#369EAD”, titleFontColor: “#369EAD”, labelFontColor: “#369EAD” }, { 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..
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..
below code works fine with one moving average.. need another moving average.. please help.
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: “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) { // alert(“Error”); } }); 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
}); //alert(numOfDays); } } } }; //// generates first set of dataPoints updateChart3(); $(function () { $(“#<%= sdate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ }); $(“#<%= edate.ClientID%>”).datepicker({ dateFormat: ‘yy-mm-dd’ }); });
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 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();
}); //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
Thank You so much. I made this graph with your help..
Thank you so much for your kind support.
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();
}
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
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.