fixed color

heliosmatics.html

@@ -96,7 +96,7 @@
     <th style="width:70px">E<sub>B</sub>[MeV]</th>
     <th style="width:90px">&theta;Lab<sub>B</sub>[deg]</th>
     <th style="width:80px">Z<sub>B0</sub>/2[mm]</th>
-    <th style="width:70px">2*&rho;<sub>B</sub>[mm]</th>
+    <th style="width:70px">2&rho;<sub>B</sub>[mm]</th>
   </tr>
   </tr>
    <td><input type="text" id='Ex1' name="Ex" size="8" value="0"/></td>
@@ -137,18 +137,18 @@
 <table>
  <tr>
   <td style="text-align:right"> &theta;<sub>CM</sub>:</td>
-  <td><Input type="text" size="3" value="0" id='thetaCM'/></td> 
+  <td><Input type="text" size="4" value="0" id='thetaCM'/></td> 
   <td>deg</td>
   <td><Input type="range" min="0" max="50" step="0.1" value="0" style="width:600px" id='thetaCMRange'/> </td>
  </tr>
  <td style="text-align:right"> Array Pos:</td>
-  <td><Input type="text" size="3" value="-100" id='posArray'/></td> 
+  <td><Input type="text" size="4" value="-100" id='posArray'/></td> 
   <td>mm</td>
   <td><Input type="range" min="-500" max="1000" step="1" value="-100" style="width:600px" id='posArrayRange'/> </td>
  </tr>
  <tr>
   <td style="text-align:right"> Recoil Pos:</td>
-  <td><Input type="text" size="3" value="1500" id='posRecoil'/></td> 
+  <td><Input type="text" size="4" value="1500" id='posRecoil'/></td> 
   <td>mm</td>
   <td><Input type="range" min="0" max="2000" step="1" value="1500" style="width:600px" id='posRecoilRange'/> </td>
  </tr>
@@ -156,11 +156,11 @@
 
 <p></p>
 
-<table>
+<table cellspacing="0" cellpadding="0">
   <tr>
    <td></td>
-   <td style="text-align:left"> 
+   <td> 
-     <table>
+     <table style="float : right">
       <tr> 
         <td>zRange(Min):</td>
         <td><Input type="text" size="4" value="-200" id='zRange1'/></td>
@@ -286,6 +286,17 @@ var zList = []; // for R-Z plot
 var rbList = []; // for R-Z plot
 var rBList = []; // for R-Z plot
 
+var color = ['rgb(31,119,180)',  // muted blue
+             'rgb(255,127,14)',  // safety orange
+             'rgb(44,160,44)',  // cooked asparagus green
+             'rgb(214,39,40)',  // brick red
+             'rgb(148,103,189)',  // muted purple
+             'rgb(140,86,75)',  // chestnut brown
+             'rgb(277,119,194)',  // raspberry yogurt pink
+             'rgb(127,127,127)',  // middle gray
+             'rgb(118,189,34)',  // curry yellow-green
+             'rgb(23,190,207)'];  // blue-teal
+
 function GetMassFromSym(AZ, id){
   let str = 'massProxy.py?AZ=' + AZ;  
   
@@ -515,9 +526,15 @@ function PlotEZ(rangeX, rangeY){
   let nEx = xList.length;  
   let data = [];
   
-  for( let i = 0; i < nEx; i++){    
+  for( let i = 0; i < nEx; i++){  
+    let kaka = color[i%10];  
     let newData = {
-      x : xList[i], y : yList[i], mode:"lines", type:"scatter", name:"Ex="+ExList[i]
+      x : xList[i], 
+      y : yList[i], 
+      mode:"lines", 
+      type:"scatter", 
+      name:"Ex="+ExList[i],
+      marker : { color : kaka}
     }
     data.push(newData);
   }
@@ -529,7 +546,7 @@ function PlotEZ(rangeX, rangeY){
     legend: {yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
   };
   
-  Plotly.newPlot( "Plot_EZ", data, layout );
+  Plotly.newPlot( "Plot_EZ", data, layout);
 
   
   PlotThetaCMLine(document.getElementById('thetaCM').value);
@@ -555,7 +572,7 @@ function PlotThetaCMLine(thetaCM){
     eList.push(haha);
   }
   
-  Plotly.addTraces("Plot_EZ", {x : zzList, y: eList, name:"thetaCM=" + thetaCM }, 0);
+  Plotly.addTraces("Plot_EZ", {x : zzList, y: eList, name:"thetaCM=" + thetaCM , marker : { color : 'rgb(100,100,100)'}}, 0);
 }
 
 function PlotBore(){
@@ -569,7 +586,7 @@ function PlotBore(){
     eList.push(haha);
   }
   
-  Plotly.addTraces("Plot_EZ", {x : zzList, y: eList, name:"Bore" }, 0);
+  Plotly.addTraces("Plot_EZ", {x : zzList, y: eList, name:"Bore", marker : { color : 'rgb(200,200, 200)'}  }, 0);
 }
 
 function CalculateRZ(){
@@ -626,16 +643,19 @@ function PlotRZ(){
   let nEx = ExList.length;
   
   for(let i = 0 ; i < nEx; i++ ){
+    let kaka = color[i%10];
     let newData = {
       x : zList,
       y : rBList[i], 
       mode : "lines",
       type : "scatter", 
       name : "Ex="+ExList[i] + ",theta=" + document.getElementById('theta'+(i+1)).value,
+      marker : { color : kaka} 
     }
     data.push(newData);
   }
   for(let i = 0 ; i < nEx; i++ ){
+    let kaka = color[i%10];
     let newData = {
       x : zList,
       y : rbList[i], 
@@ -643,6 +663,7 @@ function PlotRZ(){
       line : {dash : 'dashdot', width : 1 },
       type : "scatter", 
       name : "Ex="+ExList[i] + ",theta=" + document.getElementById('theta'+(i+1)).value,
+      marker : { color : kaka} 
     }
     data.push(newData);
   }
@@ -740,6 +761,7 @@ document.getElementById('thetaCM').addEventListener('keypress',
       CalConstants();
       CalculateEZ();
       CalculateRZ()
+      AdjustRangeEZ(document.getElementById('posArray').value);
     }
   }, false
 );
@@ -749,6 +771,7 @@ document.getElementById('thetaCMRange').oninput = function(){
   CalConstants();
   CalculateEZ();
   CalculateRZ()
+  AdjustRangeEZ(document.getElementById('posArray').value);
 }
 
 function AdjustRangeEZ(value){