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