Home › Forums › Chart Support › combining candlestick chart and line chart (moving average line) › Reply To: combining candlestick chart and line chart (moving average line)
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();
}