mason/breeders_toolbox/radargraph.mas

   1 <%args>
   2
   3 </%args>
   4
   5 <style>
   6
   7 .button {
   8   background-color: #4CAF50; /* Green */
   9   border: none;
  10   color: white;
  11   padding: 15px 32px;
  12   text-align: center;
  13   text-decoration: none;
  14   display: inline-block;
  15   font-size: 16px;
  16   margin: 4px 2px;
  17   cursor: pointer;
  18   -webkit-transition-duration: 0.4s; /* Safari */
  19   transition-duration: 0.4s;
  20 }
  21 .button1 {border-radius: 8px;}
  22
  23 .button1:hover {
  24   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  25 }
  26
  27 .text-center {
  28   text-align: center;
  29 }
  30
  31 </style>
  32
  33 <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
  34 <script src="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js"></script>
  35 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  36 <& /page/page_title.mas, title => "Radar Graph" &>
  37
  38 <& /util/import_javascript.mas, classes => [ 'CXGN.BreedersToolbox.HTMLSelect' ] &>
  39
  40 <div id="dataset_select_div">[loading...]</div>
  41
  42
  43 <div class="text-center">
  44 <button class="button button1" id="load_data">Render Graph</button>
  45 </div>
  46 <br></br>
  47
  48 <div id="current_selected_traits"></div>
  49
  50 <canvas id="radar_chart" width="400" height="400"></canvas>
  51
  52
  53 <script>
  54 var ctx = document.getElementById('radar_chart').getContext('2d');
  55 var radar_data = { labels: [], datasets: [] };
  56 var labeled;
  57
  58 var radar_chart = new Chart(ctx, {
  59     type: 'radar',
  60     data: radar_data,
  61     options: {
  62         elements: {
  63             line: {
  64                 borderWidth: 3,
  65             },
  66             point: {
  67                 pointRadius: 8,
  68             },
  69         },
  70         scales: {
  71             r: {
  72                 angleLines: {
  73                     color: 'black'
  74                 },
  75                 grid: {
  76                     color: 'black'
  77                 },
  78                 pointLabels: {
  79                     font: {
  80                         family: 'sans-serif',
  81                         size: 20,
  82                     },
  83                     color: 'black'
  84                 },
  85                 ticks: {
  86                     color: 'black',
  87                     font: {
  88                         family: 'sans-serif',
  89                         size: 15
  90                     }
  91                 }
  92             }
  93         },
  94
  95     },
  96 });
  97
  98 jQuery(window).ready(function () {
  99     get_select_box("datasets", "dataset_select_div", { "checkbox_name": "dataset_select_checkbox" });
 100 });
 101
 102 jQuery('#load_data').click(function () {
 103     labeled = false;
 104     var dataset_ids = get_dataset_id();
 105     radar_chart.data.datasets = [];
 106     radar_chart.data.labels = [];
 107
 108     for (var i = 0; i < dataset_ids.length; i++) {
 109         jQuery.ajax({
 110             url: '/ajax/radargraph?dataset_id=' + dataset_ids[i],
 111             success: function (r) {
 112                 get_labels(r.data);
 113                 format_data(r.data, r.name);
 114             }
 115         })
 116     }
 117 })
 118
 119 /**
 120  * Pushes the input into the dataset as an array of values
 121  * @param {*} input Data from the AJAX request
 122  */
 123 function format_data(input, dataset_name) {
 124     var data = [];
 125     var trait_indices = input[0].indexOf("availableGermplasmSeedlotUniquenames") + 1;
 126
 127     for (var i = trait_indices; i < trait_indices + (input[0].length - trait_indices - 1); i++) {
 128         var temp = [];
 129         for (var j = 1; j < input.length; j++) {
 130             temp.push(input[j][i] / 1.0);
 131         }
 132         data.push(Math.round((get_avg(temp)) * 10) / 10);
 133     }
 134
 135     var rgb_col = colors[Math.floor(Math.random() * colors.length)]
 136     var rgba_col = colors_alpha[colors.indexOf(rgb_col)]
 137
 138
 139     var set = {
 140         label: dataset_name,
 141         data: data,
 142         fill: true,
 143         backgroundColor: rgba_col,
 144         borderColor: rgb_col,
 145         pointHoverRadius: 13,
 146         pointBackgroundColor: rgb_col,
 147         pointBorderColor: '#fff',
 148         pointHoverBackgroundColor: '#fff',
 149         pointHoverBorderColor: rgb_col
 150     }
 151
 152     radar_chart.data.datasets.push(set);
 153     radar_chart.update();
 154 }
 155
 156 /**
 157  * Returns the average of an array
 158  * @param {*} data Array of numbers
 159  * @returns Average value
 160  */
 161 function get_avg(data) {
 162     const total = data.reduce((acc, c) => acc + c, 0);
 163     return total * 1.0 / data.length * 1.0;
 164 }
 165
 166 /**
 167  * Returns the selected dataset ids
 168  * @returns Dataset ids
 169  */
 170
 171 function get_dataset_id() {
 172     var selected_ids = [];
 173     jQuery('input[name="dataset_select_checkbox"]:checked').each(function () {
 174         selected_ids.push(jQuery(this).val());
 175     });
 176     if (selected_ids.length < 1) {
 177         alert('Please select at least one dataset!');
 178         return false;
 179     }
 180     return selected_ids;
 181 }
 182
 183 /**
 184  * If the labels have not been set for the chart,
 185  * this function will push all labels to the chart
 186  * @param {*} input The data returned from the ajax request
 187  */
 188 function get_labels(input) {
 189     if (!labeled) {
 190         var trait_indices = input[0].indexOf("availableGermplasmSeedlotUniquenames") + 1;
 191
 192         for (var i = trait_indices; i < trait_indices + (input[0].length - trait_indices - 1); i++) {
 193             radar_chart.data.labels.push(input[0][i]);
 194         }
 195         radar_chart.update();
 196         labeled = true;
 197     }
 198 }
 199
 200 var colors = ['rgb(0,0,0)','rgb(255, 99, 132)','rgb(34,139,34)','rgb(30,144,255)'];
 201 var colors_alpha = ['rgba(0,0,0,0.2)','rgba(255, 99, 132,0.2)','rgba(34,139,34,0.2)','rgba(30,144,255,0.2)'];
 202 </script>