Home forums Report Bugs Created some graphs using canvasjs library

Tagged: ,

This topic contains 0 replies, has 1 voice, and was last updated by  asingh2 12 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #17913

    asingh2
    Member

    <!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)

You must be logged in to reply to this topic.