Home forums Using CanvasJS Want range to be set in yAxis using spline chart

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 2 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #12546

    rwt_gaurav
    Member

    Hi,

    I have requirement that have default or let say normal value for specific lab test
    I need to show the line chart with this normal and user value to show its result comparing normal values.
    I am using spline chart

    How to set value of Y-axis in range like T3Normal: “0.92-2.78”, T4Normal: “0.58-140”, TSHNormal: “0.3-4.7”

    If i am setting like this it minus the values and print it.

    I want to show graph to be generate between minimum and maximum value of Y- axis only need to use SPLINE Chart only.

    code like this

    $(‘#HealthProfileChartHeader’).find(‘h3’).text(‘Thyroid’);
    maxEnterValue = 600;
    sampleData.length = 0;
    displayDataArray.length = 0;
    minEnterValue = -50;
    interval = 50
    displayDataArray = [];
    var T3 = { type: “spline”, name: “T3”, color: “#F79647”, showInLegend: true, dataPoints: [] };
    var T3Normal = { type: “spline”, name: “T3Normal”, color: “#5F096D”, showInLegend: true, dataPoints: [] };
    var T4 = { type: “spline”, name: “T4”, color: “#F79647”, showInLegend: true, dataPoints: [] };
    var T4Normal = { type: “spline”, name: “T4Normal”, color: “#5F096D”, showInLegend: true, dataPoints: [] };
    var TSH = { type: “spline”, name: “TSH”, color: “#F79647”, showInLegend: true, dataPoints: [] };
    var TSHNormal = { type: “spline”, name: “TSHNormal”, color: “#5F096D”, showInLegend: true, dataPoints: [] };
    displayDataArray.push(T3, T3Normal, T4, T4Normal, TSH, TSHNormal);
    for (var i = 0; i < data.d.length; i++) {
    displayDataArray[0].dataPoints.push({
    label: data.d[i].Date, y:parseInt(data.d[i].T3==””?0:data.d[i].T3)
    });
    displayDataArray[1].dataPoints.push({
    label: data.d[i].Date, y : 0.43-2.78
    });
    displayDataArray[2].dataPoints.push({
    label: data.d[i].Date, y:parseInt(data.d[i].T4==””?0:data.d[i].T4)
    });
    displayDataArray[3].dataPoints.push({
    label: data.d[i].Date, y: “0.53-140”
    });
    displayDataArray[4].dataPoints.push({
    label: data.d[i].Date, y: parseInt(data.d[i].TSH == “” ? 0 : data.d[i].TSH)
    });
    displayDataArray[5].dataPoints.push({
    label: data.d[i].Date, y:”1.0 – 4.7″
    });

    }
    {
    var chart = new CanvasJS.Chart(“chartContainerBP”,
    {
    title: {

    text: “Graph”,
    margin: 15
    },
    legend: {
    cursor: “pointer”,
    itemclick: function (e) {
    if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart.render();
    }

    },

    axisX:
    {
    valueFormatString: “DD MMM”,
    },
    animationEnabled: true,
    toolTip: {
    shared: “true”
    },
    data: displayDataArray,
    });

    chart.render();
    }

    #12571

    Vishwas R
    Keymaster

    Gaurav,

    You can use rangeSplineArea chart to show the range. If this doesn’t fulfill your requirement, pictorial or jsfiddle will help us understand better.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.