Difference between revisions of "Team:BOKU-Vienna/Model"

Line 105: Line 105:
 
                 <h2>Modeling.</h2>
 
                 <h2>Modeling.</h2>
 
                 <p>Under construction...</p>
 
                 <p>Under construction...</p>
−
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
+
<canvas id="lineChart"></canvas>
−
         
+
var ctxL = document.getElementById("lineChart").getContext('2d');
 +
var myLineChart = new Chart(ctxL, {
 +
    type: 'line',
 +
    data: {
 +
        labels: ["January", "February", "March", "April", "May", "June", "July"],
 +
        datasets: [
 +
            {
 +
                label: "My First dataset",
 +
                fillColor: "rgba(220,220,220,0.2)",
 +
                strokeColor: "rgba(220,220,220,1)",
 +
                pointColor: "rgba(220,220,220,1)",
 +
                pointStrokeColor: "#fff",
 +
                pointHighlightFill: "#fff",
 +
                pointHighlightStroke: "rgba(220,220,220,1)",
 +
                data: [65, 59, 80, 81, 56, 55, 40]
 +
            },
 +
            {
 +
                label: "My Second dataset",
 +
                fillColor: "rgba(151,187,205,0.2)",
 +
                strokeColor: "rgba(151,187,205,1)",
 +
                pointColor: "rgba(151,187,205,1)",
 +
                pointStrokeColor: "#fff",
 +
                pointHighlightFill: "#fff",
 +
                pointHighlightStroke: "rgba(151,187,205,1)",
 +
                data: [28, 48, 40, 19, 86, 27, 90]
 +
            }
 +
        ]
 +
    },
 +
    options: {
 +
        responsive: true
 +
    }   
 +
});
  
 
             </div>
 
             </div>
Line 112: Line 143:
 
     </section>
 
     </section>
  
−
    <title>CanvasJS Chart jQuery Plugin</title>
 
−
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
 
−
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
 
−
<script type="text/javascript">
 
−
window.onload = function () {
 
  
−
//Better to construct options first and then pass it as a parameter
 
−
var options = {
 
−
title: {
 
−
text: "Column Chart using jQuery Plugin"
 
−
},
 
−
                animationEnabled: true,
 
−
data: [
 
−
{
 
−
type: "column", //change it to line, area, bar, pie, etc
 
−
dataPoints: [
 
−
{ x: 10, y: 10 },
 
−
{ x: 20, y: 11 },
 
−
{ x: 30, y: 14 },
 
−
{ x: 40, y: 16 },
 
−
{ x: 50, y: 19 },
 
−
{ x: 60, y: 15 },
 
−
{ x: 70, y: 12 },
 
−
{ x: 80, y: 10 }
 
−
]
 
−
}
 
−
]
 
−
};
 
−
 
−
$("#chartContainer").CanvasJSChart(options);
 
−
 
−
}
 
−
</script>
 
  
 
</html>
 
</html>
  
 
{{BOKU-Vienna-footer}}
 
{{BOKU-Vienna-footer}}

Revision as of 12:49, 22 August 2017

Modeling

V

Modeling.

Under construction...

var ctxL = document.getElementById("lineChart").getContext('2d'); var myLineChart = new Chart(ctxL, { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }, options: { responsive: true } });