|
|
| Line 1: |
Line 1: |
| | {{SMMU-China}} | | {{SMMU-China}} |
| | <html> | | <html> |
| − |
| |
| | <link rel="stylesheet" href="https://2018.igem.org/Template:SMMU-China/CSS_main?action=raw&ctype=text/css" type="text/css"> | | <link rel="stylesheet" href="https://2018.igem.org/Template:SMMU-China/CSS_main?action=raw&ctype=text/css" type="text/css"> |
| | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_ToTheTop&action=raw&ctype=text/css" /> | | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_ToTheTop&action=raw&ctype=text/css" /> |
| − | <link rel="stylesheet" href="https://2018.igem.org/Template:SMMU-China/CSS_ui?action=raw&ctype=text/css" type="text/css">
| |
| − |
| |
| − | <style type="text/css">
| |
| − | .AAV-chat{width: 40%; margin: 30px 0 30px 3%; float: left;}
| |
| − | #canvas-aav-chat {width: 100%; height: 400px!important;}
| |
| − | .AAV-timeline{width: 40%; margin: 30px 0 30px 3%; float: left;}
| |
| − | #canvas-aav-timeline {width: 100%; height: 400px!important;}
| |
| − | .AAV-chat img {width: 100%;}
| |
| − |
| |
| − | #wrapper{width: 85%; float: left;}
| |
| − | #pRyR-slider{width: 300px; float: left;}
| |
| − |
| |
| − |
| |
| − |
| |
| − | .ui-controlgroup-vertical {
| |
| − | width: 14%;
| |
| − | float: left;
| |
| − | }
| |
| − | .ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
| |
| − | .ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
| |
| − | text-align: center;
| |
| − | }
| |
| − | #car-type-button {
| |
| − | width: 120px;
| |
| − | }
| |
| − | .ui-controlgroup-horizontal .ui-spinner-input {
| |
| − | width: 20px;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| | <div id="page-wrapper"> | | <div id="page-wrapper"> |
| | <!-- Header --> | | <!-- Header --> |
| Line 108: |
Line 76: |
| | <section id="main"> | | <section id="main"> |
| | <div class="container"> | | <div class="container"> |
| | + | |
| | <!-- Content --> | | <!-- Content --> |
| | <article class="box post"> | | <article class="box post"> |
| | <header> | | <header> |
| − | <h2 style="text-align: center">Software</h2> | + | <h2 class="inner-h">Instruction</h2> |
| | </header> | | </header> |
| − | <div id="AAV" style="width: 100%">
| |
| − |
| |
| − | <fieldset>
| |
| − | <div class="controlgroup-vertical" width="250px">
| |
| − | <legend style="font-size:20px; font-weight: bold; text-align:center; margin-bottom: 15px;" > AAV serotypes</legend>
| |
| − | <label for="optAAV1">AAV1</label>
| |
| − | <input type="radio" name="AAV" id="optAAV1" value="1">
| |
| − | <label for="optAAV2">AAV2</label>
| |
| − | <input type="radio" name="AAV" id="optAAV2" value="2">
| |
| − | <label for="optAAV3">AAV3</label>
| |
| − | <input type="radio" name="AAV" id="optAAV3" value="3">
| |
| − | <label for="optAAV4">AAV4</label>
| |
| − | <input type="radio" name="AAV" id="optAAV4" value="4">
| |
| − | <label for="optAAV5">AAV5</label>
| |
| − | <input type="radio" name="AAV" id="optAAV5" value="5">
| |
| − | <label for="optAAV6">AAV6</label>
| |
| − | <input type="radio" name="AAV" id="optAAV6" value="6">
| |
| − | <label for="optAAV7">AAV7</label>
| |
| − | <input type="radio" name="AAV" id="optAAV7" value="7">
| |
| − | <label for="optAAV8">AAV8</label>
| |
| − | <input type="radio" name="AAV" id="optAAV8" value="8">
| |
| − | <label for="optAAV9">AAV9</label>
| |
| − | <input type="radio" name="AAV" id="optAAV9" value="9">
| |
| − | <a href="http://www.sciencedirect.com/science/article/pii/S1525001616317324" target="view_window">Download Article</a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="AAV-chat" >
| |
| − | <canvas id="canvas-aav-chat"></canvas>
| |
| − | <img src="img\package-of-AAV.PNG"></img>
| |
| − | </div>
| |
| − |
| |
| − | <div class="AAV-timeline" >
| |
| − | <canvas id="canvas-aav-timeline"></canvas>
| |
| − | <img src="img\AAV-vector-genome.PNG"></img>
| |
| − |
| |
| − | </div>
| |
| − | </fieldset>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div id="Graphic" class="col-6 col-12-small">
| |
| − | <div style="text-align:center; font-size:16px;">
| |
| − | <div style="position:absolute; top:24%; left: 20%;">Phosphorylation ratio of RyR2:
| |
| − | <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:30px">%
| |
| − | </div>
| |
| − | <div style="position:absolute; top:26%; left:18.5%"><div id="pRyR-slider" style="height:15px;"></div></div>
| |
| − | <div style="position:absolute; top:28%; left:22%"><input type="button" value="Calculate Ca leak" id="simplify" /></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-6 col-12-small">
| |
| − | <div id="wrapper" style="text-align: center;">
| |
| − | <div id="result" ></div><br>
| |
| − | f(x) = <input id="inputSomeThing" oninput="getInput(this.value)" value="(x+4)^2*(x-6)+sinx"></input><br><br>
| |
| − | f(x) = <input type="text" value="(x+4)^2*(x-6)+sinx" id="input"/>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <header>
| |
| − | <h3>One</h3>
| |
| − | </header>
| |
| − |
| |
| − | <p>
| |
| − | Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
| |
| − | hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
| |
| − | Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
| |
| − | Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
| |
| − | Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
| |
| − | hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
| |
| − | Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
| |
| − | </p>
| |
| − | <div style="text-align: center">
| |
| − | <img alt="" src="https://static.igem.org/mediawiki/2018/3/30/T--SMMU-China--banner_replace.jpg" style="width:80%;margin: 0 auto;" >
| |
| − | <p><strong>Figure 1: </strong>Overall scheme of our project. </p>
| |
| − | </div>
| |
| − |
| |
| | | | |
| − | <p>
| |
| − | Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
| |
| − | a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
| |
| − | placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
| |
| − | eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
| |
| − | elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
| |
| − | </p>
| |
| | <section> | | <section> |
| − | <header> | + | <h3 class="inner-h">Objective</h3> |
| − | <h3>Two</h3> | + | |
| − | </header> | + | <p class="inner-text"> |
| | + | To provide a guiding dosage of composite AAV that carries functional intrabody sequencing according to advanced set-up mathematical modeling and data. |
| | + | </p> |
| | + | |
| | + | |
| | + | <h3 class="inner-h">Content</h3> |
| | + | |
| | + | |
| | + | <h4 class="inner-h">1. Calcium leakage trending module</h4> |
| | + | <p class="inner-text"> |
| | + | Based on the parameters of calcium iron (number of calcium sparkles, calcium stored in SR, the extent of calcium transient) to predict the trending of calcium leakage over time. |
| | + | </p> |
| | + | |
| | + | <h4 class="inner-h">2. Treatment plan assisting module</h4> |
| | + | |
| | + | <p class="inner-text"> |
| | + | Provide different treatment plans (titer of AAV, promoter, treatment time) for different objectives of therapeutic effect (such as reducing 90 percent calcium leakage, or 60 percent, etc.). |
| | + | </p> |
| | + | |
| | + | <h4 class="inner-h">3. The custom setting assessment module</h4> |
| | + | |
| | + | <p class="inner-text"> |
| | + | Evaluate the therapeutic effect according to the severity of disease and the selection of treatment plans. |
| | | | |
| − | <p>
| |
| − | Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
| |
| − | placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
| |
| − | eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
| |
| − | elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
| |
| − | sit amet nullam consequat feugiat dolore tempus.
| |
| − | Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
| |
| − | placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
| |
| − | eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
| |
| − | elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
| |
| | </p> | | </p> |
| − | <table>
| + | |
| − | <tr>
| + | <h3 class="inner-h">Guilding</h3> |
| − | <th width="300px">Do</th>
| + | |
| − | <th width="250px">Don't</th>
| + | <h4 class="inner-h">1. Calcium leakage trending module</h4> |
| − | <th width="410px">Why?</th>
| + | |
| − | </tr>
| + | <p class="inner-text"> |
| − | <tr>
| + | a) Input: calcium iron parameters: including intervals between onset of heart failure and detection, the number of calcium sparkles, calcium storage of SR and the extent of calcium transient. |
| − | <td>Make sure all wiki content is hosted on <b>2018.igem.org</b>. (This includes text, files, HTML, CSS, Javascript, and other scripts.)</td>
| + | <br> |
| − | <td>Don't host your wiki or parts of your wiki elsewhere. Don't include scripts or stylesheets from other servers. </td>
| + | b) At least three groups data required. |
| − | <td>iGEM content is preserved on our servers so future teams can learn from what you've done. When content is stored on other sites/servers, links may become broken, sites may go down, and <b>information will be lost.</b></td>
| + | <br> |
| − | </tr>
| + | c) Calculation: based on the calcium leakage predicting model, it could calculate the expectation of calcium leakage in a few days. |
| − | <tr>
| + | <br> |
| − | <td>Work on your wiki throughout the year and <b>save small edits for last</b></td>
| + | d) Output: provide a trend graph from attacking of heart failure. |
| − | <td>Don't wait to add/edit large portions of wiki content the day of the <b>Wiki Freeze</b></td>
| + | |
| − | <td>Just before the Wiki Freeze, iGEM websites experience <b>increased traffic and server loads.</b> This can be a difficult time to make larger changes or additions to your wiki. Don't wait till the last minute!</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>Name uploaded files clearly and uniquely (T--TeamName--Filename.png)</td>
| + | |
| − | <td>Don't use generic names for you files (Header.png)</td>
| + | |
| − | <td>Using <b>unique names</b> makes searching/identification of uploaded files easier.</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>Load your CSS and Javascript into the wiki, either directly into your page or using templates.</td>
| + | |
| − | <td>Don't try to host your CSS and Javascript on a third party server</td>
| + | |
| − | <td>You are required to host all content on the iGEM servers (see above)</td>
| + | |
| − | </tr>
| + | |
| − | </table>
| + | |
| − | <p style="text-align: center"><strong>Table 1: </strong>Overall scheme of our project. </p>
| + | |
| − | <p>
| + | |
| − | Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
| + | |
| − | eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
| + | |
| − | elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
| + | |
| − | sit amet nullam consequat feugiat dolore tempus.
| + | |
| | </p> | | </p> |
| − | </section>
| + | |
| − | <section>
| + | <center><img src="https://static.igem.org/mediawiki/2018/5/5e/T--SMMU-China--b1.png"></center> |
| − | <header> | + | |
| − | <h3>Three</h3>
| + | <center><img src="https://static.igem.org/mediawiki/2018/5/58/T--SMMU-China--b2.png"></center> |
| − | </header> | + | |
| − | <p> | + | <h4 class="inner-h">2. Treatment plan assisting module</h4> |
| − | Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc, | + | |
| − | eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean | + | <p class="inner-text"> |
| − | elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor | + | a) Input: select the target value of reducing calcium leakage; |
| − | sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
| + | <br> |
| − | Maecenas sagittis convallis justo vel mattis.
| + | b) output: based on your combination of virus serotype, promoter, and serum BNP value to calculate the titer of the therapeutic virus required for treatment and second injection time. |
| | + | |
| | </p> | | </p> |
| | + | |
| | + | <center><img src="https://static.igem.org/mediawiki/2018/f/f9/T--SMMU-China--b3.png"></center> |
| | + | |
| | + | <h4 class="inner-h">3. The custom setting assessment module </h4> |
| | + | |
| | + | <p class="inner-text"> |
| | + | a) Input: user can select serotype of virus and promoter, etc. |
| | + | <br> |
| | + | b) Calculation: based on the custom setting above, this function could calculate the expectation of reduced calcium leakage fitting the model built before. |
| | + | <br> |
| | + | c) Output: the expectation of calcium leakage reduction. |
| | + | </p> |
| | + | |
| | + | |
| | </section> | | </section> |
| | + | |
| | </article> | | </article> |
| | + | |
| | | | |
| | </div> | | </div> |
| Line 294: |
Line 188: |
| | </section> | | </section> |
| | </div> | | </div> |
| | + | |
| | <div class="col-5 col-12-medium"> | | <div class="col-5 col-12-medium"> |
| | <section> | | <section> |
| Line 359: |
Line 254: |
| | }); | | }); |
| | </script> | | </script> |
| − |
| |
| − |
| |
| − | <script src="https://2018.igem.org/Template:SMMU-China/JS_Chart?action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2018.igem.org/Template:SMMU-China/JS_jquery?action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2018.igem.org/Template:SMMU-China/JS_ui?action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2018.igem.org/Template:SMMU-China/JS_xcalc?action=raw&ctype=text/javascript"></script>
| |
| − |
| |
| − | <script>
| |
| − | function getInput(something){
| |
| − | string = something;
| |
| − | var c=document.getElementById("input");
| |
| − |
| |
| − | $( "#input" ).val( $( "#inputSomeThing" ).val() + "*" +$( "#amount" ).val() );
| |
| − | }
| |
| − |
| |
| − | $( function() {
| |
| − | $( "#pRyR-slider" ).slider({
| |
| − | // orientation: "vertical",
| |
| − | range: "min",
| |
| − | min: 0,
| |
| − | max: 100,
| |
| − | value: 60,
| |
| − | slide: function( event, ui ) {
| |
| − | $( "#amount" ).val( ui.value );
| |
| − | $( "#input" ).val( $( "#inputSomeThing" ).val() + "*" +$( "#amount" ).val() );
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
| |
| − | } );
| |
| − |
| |
| − | var barChartData = new Array(); //����һ��������
| |
| − |
| |
| − | barChartData[1] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 99, 132, 0.2)",
| |
| − | strokeColor: "rgba(255, 99, 132, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − |
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − |
| |
| − | barChartData[2] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(54, 162, 235, 0.2)",
| |
| − | strokeColor: "rgba(54, 162, 235, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[3] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 206, 86, 0.2)",
| |
| − | strokeColor: "rgba(255, 206, 86,1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[4] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(54, 162, 235, 0.2)",
| |
| − | strokeColor: "rgba(54, 162, 235, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[5] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 206, 86, 0.2)",
| |
| − | strokeColor: "rgba(255, 206, 86, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[6] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(75, 192, 192, 0.2)",
| |
| − | strokeColor: "rgba(75, 192, 192, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[7] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(153, 102, 255, 0.2)",
| |
| − | strokeColor: "rgba(153, 102, 255, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[8] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 159, 64, 0.2)",
| |
| − | strokeColor: "rgba(255, 159, 64, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | barChartData[9] = {
| |
| − | labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(220,220,220,0.2)",
| |
| − | strokeColor: "rgba(220,220,220,1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | //------aav timeline data array
| |
| − | var lineChartData = new Array();
| |
| − |
| |
| − | lineChartData[1] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 99, 132,0.2)",
| |
| − | strokeColor: "rgba(255, 99, 132, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[2] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(54, 162, 235, 0.2)",
| |
| − | strokeColor: "rgba(54, 162, 235, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[3] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 206, 86, 0.2)",
| |
| − | strokeColor: "rgba(255, 206, 86,1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[4] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(54, 162, 235, 0.2)",
| |
| − | strokeColor: "rgba(54, 162, 235, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[5] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 206, 86, 0.2)",
| |
| − | strokeColor: "rgba(255, 206, 86, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[6] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(75, 192, 192, 0.2)",
| |
| − | strokeColor: "rgba(75, 192, 192, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[7] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(153, 102, 255, 0.2)",
| |
| − | strokeColor: "rgba(153, 102, 255, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[8] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(255, 159, 64, 0.2)",
| |
| − | strokeColor: "rgba(255, 159, 64, 1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − | lineChartData[9] = {
| |
| − | labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
| |
| − | datasets: [
| |
| − | {
| |
| − | fillColor: "rgba(220,220,220,0.2)",
| |
| − | strokeColor: "rgba(220,220,220,1)",
| |
| − | data: [28, 48, 40, 19, 96, 27, 100]
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − |
| |
| − |
| |
| − | var options = {
| |
| − | //Boolean - If we show the scale above the chart data
| |
| − | //�Ƿ���ʾ��״ͼ���������
| |
| − | scaleOverlay: true,
| |
| − |
| |
| − | //Boolean - If we want to override with a hard coded scale
| |
| − | scaleOverride: false,
| |
| − |
| |
| − | //** Required if scaleOverride is true **
| |
| − | //Number - The number of steps in a hard coded scale
| |
| − | scaleSteps: null,
| |
| − | //Number - The value jump in the hard coded scale
| |
| − | scaleStepWidth: 50,
| |
| − | //Number - The scale starting value
| |
| − | scaleStartValue: null,
| |
| − |
| |
| − | //String - Colour of the scale line
| |
| − | //x/y�������ߵ���ɫ
| |
| − | scaleLineColor: "rgba(0,0,0,.1)",
| |
| − |
| |
| − | //Number - Pixel width of the scale line
| |
| − | //�����ߵĿ��
| |
| − | scaleLineWidth: null,
| |
| − |
| |
| − | //Boolean - Whether to show labels on the scale
| |
| − | //�Ƿ���ʾlabelֵ
| |
| − | scaleShowLabels: true,
| |
| − |
| |
| − | //Interpolated JS string - can access value
| |
| − | scaleLabel: "<%=value%>",
| |
| − |
| |
| − | //String - Scale label font declaration for the scale label
| |
| − | //����Family
| |
| − | scaleFontFamily: "'Arial'",
| |
| − |
| |
| − | //Number - Scale label font size in pixels
| |
| − | //�����С
| |
| − | scaleFontSize: 14,
| |
| − |
| |
| − | //String - Scale label font weight style
| |
| − | //������ʽ
| |
| − | scaleFontStyle: "normal",
| |
| − |
| |
| − | //String - Scale label font colour
| |
| − | //������ɫ
| |
| − | scaleFontColor: "#666",
| |
| − |
| |
| − | ///Boolean - Whether grid lines are shown across the chart
| |
| − | scaleShowGridLines: true,
| |
| − |
| |
| − | //String - Colour of the grid lines
| |
| − | //��������ɫ
| |
| − | scaleGridLineColor: "rgba(0,0,0,.05)",
| |
| − |
| |
| − | //Number - Width of the grid lines
| |
| − | scaleGridLineWidth: 1,
| |
| − |
| |
| − | //Boolean - If there is a stroke on each bar
| |
| − | barShowStroke: true,
| |
| − |
| |
| − | //Number - Pixel width of the bar stroke
| |
| − | barStrokeWidth: 2,
| |
| − |
| |
| − | //Number - Spacing between each of the X value sets
| |
| − | // ��״����xֵ���γɵ��ߣ��磺x=20�����ߣ�֮��ľ���
| |
| − | barValueSpacing: 5,
| |
| − |
| |
| − | //Number - Spacing between data sets within X values
| |
| − | // ��ͬһxֵ�ڵ���״��֮��ļ��
| |
| − | barDatasetSpacing: 1,
| |
| − |
| |
| − | //Boolean - Whether to animate the chart
| |
| − | animation: true,
| |
| − |
| |
| − | //Number - Number of animation steps
| |
| − | animationSteps: 100,
| |
| − |
| |
| − | //String - Animation easing effect
| |
| − | animationEasing: "easeOutQuart",
| |
| − |
| |
| − | bezierCurve : false,
| |
| − |
| |
| − | //Function - Fires when the animation is complete
| |
| − | onAnimationComplete: function () {
| |
| − | var strHtml = "";
| |
| − | for (var i = 0; i < this.datasets.length; i++) {
| |
| − | strHtml += "<li><div><span style='background-color:" + this.datasets[i].fillColor + ";'></span><label>" + this.datasets[i].label + "</label></div><div style='clear:both;'></div></li>";
| |
| − | }
| |
| − | $("#ul_type").html(strHtml);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function Barclick( aavType ){
| |
| − | var ctx = document.getElementById("canvas-aav-chat").getContext("2d");
| |
| − | var myNewChart = new Chart(ctx);
| |
| − | myNewChart.Bar(barChartData [aavType], options);
| |
| − |
| |
| − | var ctx2 = document.getElementById("canvas-aav-timeline").getContext("2d");
| |
| − | var myNewChart2 = new Chart(ctx2);
| |
| − | myNewChart2.Line(lineChartData [aavType], options);
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <script>
| |
| − | $( function() {
| |
| − | $( ".controlgroup-vertical" ).controlgroup({ "direction": "vertical" });
| |
| − |
| |
| − | } );
| |
| − | </script>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(function(){
| |
| − | $(":radio").click(function(){
| |
| − |
| |
| − | Barclick($(this).val());
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| | | | |
| | <p id="last_p_label"> | | <p id="last_p_label"> |
| | </html> | | </html> |
