Home › Forums › Report Bugs › Created some graphs using canvasjs library

Created some graphs using canvasjs library

Viewing 1 post (of 1 total)

Tagged: ,

  • December 12, 2017 at 9:42 am #17913

    asingh2

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    .graph {
    height: 150px;
    width: 80%;
    }
    </style>
    <script type=”text/javascript”>
    function loadGraph(id, dataPointArray, title, maxY){
    var chart = new CanvasJS.Chart(id,
    {
    theme: “theme2”,
    title:{
    text: title
    },
    animationEnabled: false,
    axisX: {
    valueFormatString: “MMM”,
    interval:1,
    intervalType: “month”
    },
    axisY:{
    maximum: maxY,
    includeZero: true,
    interval:1,
    gridThickness: 1
    },
    data: [
    {
    type: “scatter”,
    lineThickness: 3,
    dataPoints: dataPointArray
    }
    ]
    });
    chart.render();
    }
    function loadGraphADLQOS(id, dataPointArray, title, maxY){
    var chart = new CanvasJS.Chart(id,
    {
    theme: “theme2”,
    title:{
    text: title
    },
    animationEnabled: false,
    axisX: {
    valueFormatString: “MMM”,
    interval:1,
    intervalType: “month”
    },
    axisY:{
    maximum: maxY,
    includeZero: true,
    interval:20,
    gridThickness: 1
    },
    data: [
    {
    type: “line”,
    lineThickness: 3,
    dataPoints: dataPointArray
    }
    ]
    });
    chart.render();
    }
    window.onload = function () {
    var adlData = [ADL_DATA];
    var qolData = [QOL_DATA];
    var dataPointsOne1 = [data1];
    var dataPointsOne2 = [data2];
    var dataPointsOne3 = [data3];
    var dataPointsOne4 = [data4];
    var dataPointsOne5 = [data5];
    loadGraphADLQOS(“chartContainerADL”, adlData, “Trended ADL Scores”, 100);
    loadGraphADLQOS(“chartContainerQOS”, qolData, “Trended QOS Scores”, 100);
    loadGraph(“chartContainerRHPain”, dataPointsOne1, “Trended RH Pain Scores”, 5);
    loadGraph(“chartContainerRKPain”, dataPointsOne2, “Trended RK Pain Scores”, 5);
    loadGraph(“chartContainerLKPain”, dataPointsOne3, “Trended LK Pain Scores”, 5);
    loadGraph(“chartContainerLHPain”, dataPointsOne4, “Trended LH Pain Scores”, 5);
    loadGraph(“chartContainerBackPain”, dataPointsOne5, “Trended Back Pain Scores”, 5);
    }
    </script>
    </head>
    <body>
    <h1>FORCE-TJR OA REPORT</h1>
    <p>ID: [ID]</p>
    <hr>
    <h1>Trend Report</h1>
    <div id=”chartContainerADL” class=”graph”>
    </div>
    <script type=”text/javascript” src=”canvasjs-1.8.0/canvasjs.min.js”></script>
    <div id=”chartContainerQOS” class=”graph”>
    </div>
    <div id=”chartContainerRHPain” class=”graph”>
    </div>
    <div id=”chartContainerRKPain” class=”graph”>
    </div>
    <div id=”chartContainerLKPain” class=”graph”>
    </div>
    <div id=”chartContainerLHPain” class=”graph”>
    </div>
    <div id=”chartContainerBackPain” class=”graph”>
    </div>
    <hr>
    <h1>Latest Measures</h1>
    <p>Survey Date: [SURVEY_DATE]<br /></p>
    <p>BMI: [BMI]</p>
    <p>Smoking: [SMOKING]</p>
    <p>LBP: [LBP]</p>
    <p>Diabetes: [DIABETES]</p>
    <p>Charlson Comorbidity Index: [CCI] [=0, =1, =2-5, > =6]</p>
    </body>
    </html>

Viewing 1 post (of 1 total)

Tagged: ,

You must be logged in to reply to this topic.