Forum Replies Created

Viewing 9 posts - 16 through 24 (of 24 total)
  • 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’ });
    });

    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++) {

    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’ });
    });
    }

    Please help..

    I followed this example

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

    Regards,

    Nisha

    Thank You so much. I made this graph with your help..

    in reply to: combining column chart and line chart (moving average) #18880

    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

    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

    in reply to: Average line on line chart #18860

    Hello Sir,

    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

Viewing 9 posts - 16 through 24 (of 24 total)