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

This topic contains 32 replies, has 4 voices, and was last updated by  Vineet Deodhar 2 weeks, 2 days ago.

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #17558

    I am very much excited by the simplicity of canvasjs.
    Wish to use it for my purpose.
    I need candlestick chart with overlapped moving average lines on same canvas.
    Can it be done?
    Thanks in advance.

    • This topic was modified 5 months, 1 week ago by  Vineet Deodhar. Reason: spelling
    #17580

    Suyash Singh
    Moderator

    Vineet Deodhar,

    Thank you for your interest in CanvasJS.
    Yes, it can be done. You can combine Candlestick chart with Spline chart, where spline represents the moving averages. Please have a look at this jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

    #17581

    Thanks Suyash Singh for your reply.
    Its really great to learn that my need can be satisfied by your library.
    Also, your reply was thorough and even more informative than I asked. (you provided js code for moving averages).
    Thanks for that.

    Furhter, may I ask– 1) what js code would be right for having Exponential Moving Averages instead of SMA.
    2) I need 5 EMAs. So I think I can pass those many json datasets in the way you have specified. Right?

    #17605

    Suyash Singh
    Moderator

    @Vineet Deodhar,

    1) what js code would be right for having Exponential Moving Averages instead of SMA.

    Please have a look at this updated jsfiddle.

    2) I need 5 EMAs. So I think I can pass those many json datasets in the way you have specified. Right?

    Yes, you can add multiple EMA’s to the chart by adding them to data-series array.

    ___
    Suyash Singh
    Team CanvasJS

    #17616

    Thank you very much for your support.

    #18861

    nisha
    Member

    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

    #18862

    nisha
    Member

    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

    #18877

    Suyash Singh
    Moderator

    @nisha,

    Please have a look at this jsfiddle on Column Chart with 7 Day Simple Moving Average. Also kindly have a look at:
    1. Creating charts from database in ASP.NET MVC Application.
    2. ASP.NET Download Samples
    ___
    Suyash Singh
    Team CanvasJS

    #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();

    }

    #18891

    Suyash Singh
    Moderator

    @nisha,

    calculateMovingAverage() should be called before calling chart.render(). Please replace chart3.render(); by

    calculateMovingAverage(chart3);
    chart3.render();

    ___
    Suyash Singh
    Team CanvasJS

    #18976

    nisha
    Member

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

    #18979

    nisha
    Member

    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

    #18980

    nisha
    Member

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

    #18984

    Suyash Singh
    Moderator

    @nisha,

    The functions calculateMovingAverage() and calculateMovingAverageScrap() will generate the same set of dataPoints as essentially they are same. Can you please brief us further about your requirements along with a jsfiddle with your sample data, or pictorial representation, so that we can understand your requirements better and help you out.
    ___
    Suyash Singh
    Team CanvasJS

    #18986

    nisha
    Member

    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..

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.