js_chart_demo.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
    <meta charset="utf-8">    
    <!-- <meta http-equiv="refresh" content="10">  -->
    <title>Embedded Javascript Chart by SpeedBit (c)</title>    
    <style>body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; } </style>  
    <style> td { width: 100%; height: 100%; border: 0px solid black; } </style>
    <style> table { width: 90%; height: 100; border: 2px solid blue; border-spacing: 3px;} </style>
    
    <!-- load script file -->
    <script type="text/javascript" src="js_chart.js"   ></script>
    <script type="text/javascript" src="js_rnd_demo.js"></script>
  </head>  
  
  <script>
    // here we are preparing chart data ...
    var chart_container = "container";
    // here we are preparing chart data value (they can come e.g. from an embedded system)
    //mydata_0= [20, 24, 25,  26, 25, 30, 20, 18, 21,  22, 20,  23,  25,  27,  24, 21,  19,  23,  21,  20,  23,  25,  27, 20];
    //mydata_0= [20.1, 21.3, 20.2,  22.7, 23.2, 20.4, 20.8, 21.6, 21.0, 22, 22.8,  23,  21.1,  21.4,  21.9, 23.1,  21.5,  22.8,  21.1,  20.9,  23.3,  22.6,  21.5, 20.0];
    mydata_1= [ 0,  4,  5,  25, 25, 30, 18, 12, 24,  26,  0, -12, -15, -14, -12, 0,  0,  3,  1,  0,  3,  12,  7, 10];
    mydata_2= [26, -2,  3, -10,  0,  5, -7, -9,  5,  25, 20,  25,  21,   6, 12,  8, 14,  0, -6, -5, -12, -10, 0, 20];
    mydata_3= [ 3,  2,  8,  13,  3, -5, -1, 15,  6, -12, 15,   5,  -5,  16, 12, 28, 18, 20, 16, 25,  16,  -3, 5,  2];
    // here we are preparing chart styles
    mystyle_B1=["type=bar"   , "linecolor=rgba(255,   0,   0, 1  )", "fillcolor=rgba(255,   0,   0, 0.3)", "linewidth=0.5", "beziercurve=true"];
    mystyle_B2=["type=bar"   , "linecolor=rgba(  0, 255,   0, 1  )", "fillcolor=rgba(  0, 255,   0, 0.3)", "linewidth=0.5", "beziercurve=true"];
    mystyle_B3=["type=bar"   , "linecolor=rgba(  0, 150, 255, 1  )", "fillcolor=rgba(  0, 150, 255, 0.3)", "linewidth=0.5", "beziercurve=true"];
    mystyle_A1=["type=area"  , "linecolor=rgba(  0, 255,   0, 1  )", "fillcolor=rgba(  0, 255,   0, 0.2)", "linewidth=0.5", "beziercurve=true"];
    mystyle_A2=["type=area"  , "linecolor=rgba(  0, 150, 255, 1  )", "fillcolor=rgba(  0, 150, 255, 0.2)", "linewidth=0.5", "beziercurve=true"];
    mystyle_A3=["type=area"  , "linecolor=rgba(255,   0,   0, 1  )", "fillcolor=rgba(255,   0,   0, 0.2)", "linewidth=0.5", "beziercurve=true"];
    mystyle_L1=["type=line"  , "linecolor=rgba(  0, 150, 255, 1  )", "fillcolor=rgba(  0,   0, 255, 0.3)", "linewidth=1"  , "beziercurve=true"];
    mystyle_L2=["type=line"  , "linecolor=rgba(255,   0,   0, 1  )", "fillcolor=rgba(255,   0,   0, 0.3)", "linewidth=1"  , "beziercurve=true"];
    mystyle_L3=["type=line"  , "linecolor=rgba(  0, 255,   0, 1  )", "fillcolor=rgba(  0, 255,   0, 0.3)", "linewidth=1"  , "beziercurve=true"];
    mystyle_C1=["type=area"  , "linecolor=rgba(  0, 255,   0, 1  )", "fillcolor=rgba(  0, 255,   0, 0.3)", "linewidth=2"  , "pointsize=3", "beziercurve=true"];
    mystyle_C2=["type=area"  , "linecolor=rgba(  0, 150, 255, 1  )", "fillcolor=rgba(  0, 150, 255, 0.3)", "linewidth=2"  , "pointsize=3", "beziercurve=true"];
    mystyle_C3=["type=area"  , "linecolor=rgba(255,   0,   0, 1  )", "fillcolor=rgba(255,   0,   0, 0.3)", "linewidth=2"  , "pointsize=3", "beziercurve=true"];
    mystyle_D1=["type=bar"   , "linecolor=rgba(255,   0,   0, 1  )", "fillcolor=rgba(255,   0,   0, 0.4)", "linewidth=1"  , "beziercurve=true"];
    mystyle_D2=["type=bar"   , "linecolor=rgba(  0, 255,   0, 1  )", "fillcolor=rgba(  0, 255,   0, 0.4)", "linewidth=1"  , "beziercurve=true"];
    mystyle_D3=["type=bar"   , "linecolor=rgba(  0, 150, 255, 1  )", "fillcolor=rgba(  0, 150, 255, 0.4)", "linewidth=1"  , "beziercurve=true"];
    mystyle_S1=["type=stairs", "linecolor=rgba(  0, 150, 255, 0.7)", "fillcolor=rgba(  0,   0, 255, 0.3)", "linewidth=2"];
    mystyle_S2=["type=stairs", "linecolor=rgba(255,   0,   0, 0.7)", "fillcolor=rgba(255,   0,   0, 0.3)", "linewidth=2"];
    mystyle_S3=["type=stairs", "linecolor=rgba(  0, 255,   0, 0.7)", "fillcolor=rgba(  0, 255,   0, 0.3)", "linewidth=2"];
    // insert data and styles into tables that will be passed to the chart
    style = [mystyle_B1, mystyle_A1, mystyle_L1];
    data  = [mydata_1, mydata_2, mydata_3];
    desc  = ["00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", 
             "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45"];
  </script>

  <body onresize="redrawAll()" >
    <h3><center>js_chart by the SpeedBit</h3>    

    <center><table>
    <tr>
      <td>
     		<div id="chart1a" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Area graph black demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart2a" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Line graph black demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart4a" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Stairs graph black demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart3a" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Bar graph black demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart1" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Area graph soft demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart2" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Line graph soft demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart4" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Stairs graph soft demo
      </td>
    </tr>
    <tr>
      <td>
     		<div id="chart3" style='width: 100%; height: 400px; position: relative'></div> 				
      </td>
    </tr>
    <tr>
      <td>
        <center>Bar graph soft demo
      </td>
    </tr>
    </table>

    <br>


    <script>
      var dr1a= new js_chart('chart1a', [mydata_1, mydata_2, mydata_3], [mystyle_C1, mystyle_C2, mystyle_C3], null, "time", "mA" );
      //var dr1a= new js_chart('chart1a', [mydata_0], [mystyle_C1, mystyle_C2, mystyle_C3], desc_0, "time", "mA" );
      var dr2a= new js_chart('chart2a', [mydata_1, mydata_2, mydata_3], [mystyle_L1, mystyle_L2, mystyle_L3], desc, "t", "mA" );
      var dr3a= new js_chart('chart3a', [mydata_1, mydata_2, mydata_3], [mystyle_D2, mystyle_D3, mystyle_D1], null, "month", "MB" );
      var dr4a= new js_chart('chart4a', [mydata_1, mydata_2, mydata_3], [mystyle_S3, mystyle_S1, mystyle_S2], desc, "ms", "V" );
			
      var dr1 = new js_chart('chart1' , [mydata_1, mydata_2, mydata_3], [mystyle_A1, mystyle_A2, mystyle_A3], null, "day", "$" );
      var dr2 = new js_chart('chart2' , [mydata_1, mydata_2, mydata_3], [mystyle_L1, mystyle_L2, mystyle_L3], desc, "t", "mA" );
      var dr3 = new js_chart('chart3' , [mydata_1, mydata_2, mydata_3], [mystyle_B1, mystyle_B2, mystyle_B3], null, "month", "MB" );
      var dr4 = new js_chart('chart4' , [mydata_1, mydata_2, mydata_3], [mystyle_S3, mystyle_S1, mystyle_S2], null, "ms", "V" );

      dr1.crHint   = false;
      dr1.crYjumpM = false;
      dr1.crYjumpP = false;
      dr1.crXjump  = false;
      dr1.hintwithctrl = false;
			dr1.legframew   =    1;  
		  dr1.legframecol = "rgba(250, 250, 0, 1)"; 
	  	dr1.legfillcol  = "rgba( 50, 250, 50, 0.2)"; 
      dr1.legpx       = 18;                         
      dr1.legtxtcol   = "rgba(  0,   0, 250, 1)";   
      dr1.legtxtcol   = "rgba(0,0,0, 1)"; 
 			//dr1.legend("left", ["First", "Second", "Third"]);
 			dr1.legend("bottom", ["Monitor", "Disk", "Mouse"]);
      dr1.from =  12;
      dr1.to   =  22;
      dr1.zoom = true;
      dr1.draw();
      
      
      dr1a.crHint   = true;
      dr1a.crYjumpM = true;
      dr1a.crYjumpP = true;
      dr1a.crXjump  = true;
      dr1a.canvasbkcol = "rgba(0,0,0,1)";
      dr1a.axcol       = "rgba(255,255,255,1)";
      dr1a.axw     = 1;
      dr1a.marw    = 1;
      dr1a.marsize = 10;
			dr1a.hintfpx = 12;
      dr1a.axdesccol   = "rgba(255,255, 0, 1)";
      dr1a.descol      = "rgba(0,250,250,0.7)";
      dr1a.drwfracol   = "rgba(50,50,50,0.2)";      
      dr1a.drwfilcol   = "rgba(50,50,50, 0.2)"; 
      dr1a.mshcol      = "rgb(100,100,100, 0.7)"; 
      dr1a.crlinecol   = "rgb(255, 255,255)"; 
      dr1a.crlinewidth = 0.5;     
      dr1a.meshlw      = 0.5; 
      dr1a.descfpx     = 12;
      dr1a.hintpointfill   = "rgba(0, 150, 150, 0.3)";
      dr1a.hintlinecol     = "rgba(250, 250, 250, 1)";
      dr1a.hintpointcolfromdraw = false; 
      dr1a.hintpointw     = 4;
      dr1a.hintpointlwdth = 1;
      dr1a.hintselectcol  = "rgba(200, 200, 200, 0.3)";
      dr1a.hintzoomcol    = "rgba(0, 250, 250, 0.3)"; 
      dr1a.hintwithctrl   = false;
      //dr1a.Ymax = 25;
      //dr1a.Ymin = 18;
      dr1a.decimalY = 2;
      dr1a.Yzoom = true;
			dr1a.legend("bottom", ["First", "Second", "Third", "aaa"]);
      dr1a.draw();


      dr2.crHint   = true;
      dr2.crYjumpM = true;
      dr2.crYjumpP = true;
      dr2.crXjump  = true;
      dr2.hintwithctrl = false;
      dr2.draw();
      

      dr2a.drawaxis =false;
      dr2a.margv = 0;
      dr2a.margh = 0;
      dr2a.marsize = 5;
      dr2a.marw = 1.5;
      dr2a.crHint   = true;
      dr2a.crYjumpM = true;
      dr2a.crYjumpP = true;
      dr2a.crXjump  = true;
			dr2a.hintfpx  = 12;
      dr2a.canvasbkcol = "rgba(0,0,0,1)";
      dr2a.axcol       = "rgba(155,155,155,1)";
      dr2a.axdesccol   = "rgba(255,255, 0, 1)";
      dr2a.descol      = "rgba(250,250,0,0.7)";
      dr2a.drwfracol   = "rgba(150,150,150,0.5)";      
      dr2a.drwfilcol   = "rgba(50,50,50, 0.0)"; 
      dr2a.mshcol      = "rgb(200,200,200, 0.5)"; 
      dr2a.crlinecol   = "rgb(255, 255,255)"; 
      dr2a.crlinewidth = 0.5;     
      dr2a.meshlw      = 0.5; 
      dr2a.descfpx     = 12;
      dr2a.crXjump     = false;  
      dr2a.crYjumpM    = false; 
      dr2a.crYjumpP    = false;  
      dr2a.hintpointfill  = "rgba(0, 150, 150, 0.3)";
      dr2a.hintlinecol    = "rgba(250, 250, 250, 1)";
      dr2a.hintpointcolfromdraw = true; // new
      dr2a.hintpointw     = 4;
      dr2a.hintpointlwdth = 1;
      dr2a.hintselectcol  = "rgba(200, 200, 200, 0.3)";
      dr2a.hintzoomcol    = "rgba(0, 250, 250, 0.3)"; 
      dr2a.hintwithctrl   = false;
			dr2a.legend("left", ["First", "Second", "Third"]);
      dr2a.vzonXaxis = true;
      dr2a.from =  5;
      dr2a.to   = 15
      dr2a.zoom = true;
      dr2a.draw();


      dr3.crHint   = true;
      dr3.crYjumpM = false;
      dr3.crYjumpP = false;
      dr3.crXjump  = false;
      dr3.crlinetomouse= true;
      dr3.hintwithctrl = false;
      dr3.hintlinetoMwidth = 1;
      dr3.hintmaxalpha = false;
			dr3.crXYline     = false;
      dr3.draw();


      dr3a.crHint   = true;
      dr3a.canvasbkcol = "rgba(0,0,0,1)";
      dr3a.axcol       = "rgba(155,155,155,1)";
      dr3a.axdesccol   = "rgba(255,255, 0, 1)";
      dr3a.descol      = "rgba(0,250,250,0.7)";
      dr3a.drwfracol   = "rgba(50,50,50,0.2)";      
      dr3a.drwfilcol   = "rgba(50,50,50, 0.2)"; 
      dr3a.mshcol      = "rgb(100,100,100, 0.7)"; 
      dr3a.crlinecol   = "rgb(255, 255,255)"; 
      dr3a.crlinewidth = 0.5;     
      dr3a.meshlw      = 0.5; 
      dr3a.descfpx     = 12;
			dr3a.hintfpx     = 15;
      dr3a.crXjump     = false;  
      dr3a.crYjumpM    = false; 
      dr3a.crYjumpP    = false;  
      dr3a.hintpointfill  = "rgba(0, 150, 150, 0.3)";
      dr3a.hintlinecol    = "rgba(250, 250, 250, 1)";
      dr3a.hintpointcolfromdraw = false; 
      dr3a.hintpointw     = 4;
      dr3a.hintpointlwdth = 1;
      dr3a.hintselectcol  = "rgba(200, 200, 200, 0.3)";
      dr3a.hintzoomcol    = "rgba(0, 250, 250, 0.3)"; 
      dr3a.hintwithctrl = false;
      dr3a.crlinetomouse= true;
      dr3a.hintwithctrl = false;
      dr3a.hintlinetoMwidth = 1;
      dr3a.hintmaxalpha = false;
			dr3a.crXYline     = true;
      dr3a.hintlinetoMcol = "rgba(250, 250, 0, 1)";
			dr3a.legpx       = 18;
			dr3a.legend("top", ["First", "Second", "Third", "aaa"]);
      dr3a.draw();


      dr4a.crHint   = true;
      dr4a.smallhint   = false;
      dr4a.crYjumpM = true;
      dr4a.crYjumpP = true;
      dr4a.crXjump  = true;
      dr4a.canvasbkcol = "rgba(0,0,0,1)";
      dr4a.axcol       = "rgba(155,155,155,1)";
      dr4a.axdesccol   = "rgba(255,255, 0, 1)";
      dr4a.descol      = "rgba(0,250,250,0.7)";
      dr4a.drwfracol   = "rgba(50,50,50,0.2)";      
      dr4a.drwfilcol   = "rgba(50,50,50, 0.2)"; 
      dr4a.mshcol      = "rgb(100,100,100, 0.7)"; 
      dr4a.crlinecol   = "rgb(255, 255,255)"; 
      dr4a.crlinewidth = 0.5;     
      dr4a.meshlw      = 0.5; 
      dr4a.descfpx     = 12;
      dr4a.crXjump     = false;  
      dr4a.crYjumpM    = false; 
      dr4a.crYjumpP    = false;  
			dr4a.hintfpx     = 12;
      dr4a.hintpointfill  = "rgba(0, 150, 150, 0.3)";
      dr4a.hintlinecol    = "rgba(250, 250, 250, 1)";
      dr4a.hintpointcolfromdraw = true; // new
      dr4a.hintpointw     = 4;
      dr4a.hintpointlwdth = 1;
      dr4a.hintselectcol  = "rgba(200, 200, 200, 0.3)";
      dr4a.hintzoomcol    = "rgba(0, 250, 250, 0.3)"; 
      dr4a.hintwithctrl   = true;
			dr4a.legend("right", ["First", "Second", "Third", "aaa"]);
      dr4a.draw();
    
    
      dr4.crHint   = true;
      dr4.crYjumpM = true;
      dr4.crYjumpP = true;
      dr4.crXjump  = true;
      dr4.hintwithctrl = false;
      dr4.draw();
		
      // make container for chart data 
      document.write("<center><div id='" + chart_container + "' style='z-index: 1; width: 90%; height: 80%; position: relative'></div>");
      // do chart
      var dr = new js_chart(chart_container, data, style, desc, "time of day", String.fromCharCode(176)+"C" );
      var maxdrlength = dr.alldatalength;
      dr.descfpx = 15;
      dr.hintfpx = 11;
      dr.decimalY = 1;
      dr.Yzoom = true;
      //dr.Ymax = -12;
      //dr.Ymin = -50;
      
      dr.draw();
      


      function redrawAll() {
        dr1a.draw()
        dr2a.draw()
        dr3a.draw()
        dr4a.draw()
        dr1.draw()
        dr2.draw()
        dr3.draw()
        dr4.draw()
        dr.draw()
      }
        
      function drawFT() {
        from = parseInt(document.getElementById("from").value); 
        to   = parseInt(document.getElementById("to"  ).value);
        if (dr) dr.draw_FromTo(from, to);
      }
      
      function drawFC() {
        from = parseInt(document.getElementById("from2").value); 
        cnt  = parseInt(document.getElementById("size2").value);
        if (dr) dr.draw_FromCount(from, cnt);
      }
      
      function undozoom(){
        if (dr) dr.undozoom();
      }
      
      function left() {
        if (dr) dr.left();
      }
      
      function right() {
        if (dr) dr.right();
      }

      var interval;
      function anim() {
        if ((interval) || (interval != null)) {
          clearInterval(interval);
          interval = null;
          return;
        }
        var dir = true;
        var dirr = true;
        var dirg = true;
        var dirb = true;
        var r = 0;
        var g = 0;
        var b = 0;
        interval= setInterval(function() {
                    if (dir)
                      if (dr.to < dr.alldatalength) dr.right(); else dir = false;
                    else
                      if (dr.from > 0) dr.left();  else dir = true;
                    var fr = Math.random() * 10;
                    var fg = Math.random() * 10;
                    var fb = Math.random() * 10;
                    if (r > 240) dirr = false; 
                    if (g > 240) dirg = false; 
                    if (b > 240) dirb = false; 
                    if (dirr) r = (r + fr) % 255; else r = (r - fr) % 255;
                    if (dirg) g = (g + fg) % 255; else g = (g - fg) % 255; 
                    if (dirb) b = (b + fb) % 255; else b = (b - fb) % 255;
                    if (r < 20) dirr = true;
                    if (g < 20) dirg = true;
                    if (b < 20) dirb = true;
                    dr3.canvasbkcol = "rgba("+r+","+g+","+b+", 0.3)";
                    dr3.hintwithctrl = true;
                    dr3.redraw();
                  }, 250);    
      }

      function random() {
        generate_random_data(); 
        dr.update(demodata, demostyle, null);
      }
      // scroll top...
      document.body.scrollTop = 0;
    </script>	
    <br>
    <p> If is zoom then: <button onclick="left()" > Shift chart to left </button> 
                         <button onclick="right()"> Shift chart to right </button> 
                         <button onclick="anim()" > Animate on/off</button> 
    </p>
    <p> From: <input id = "from" type = "number" value = "0" min = 0 max = "50" size = "2" />  
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        to:    <input id = "to"   type = "number" value = "0" min = 0 max = "50" size = "2"/> 
               <button onclick="drawFT()">Chart: From - To</button> 
    <br>From:  <input id = "from2" type = "number" value = "0" min = 0 max = "50" size = "2" />  
        count: <input id = "size2" type = "number" value = "0" min = 0 max = "50" size = "2"/> 
               <button onclick="drawFC()">Chart: From - Cnt</button> 
    <br>
    <button onclick="undozoom()"> Undo zoom </button>
    </p>
    Make big chaos ;-) 
    <button onclick="random()">Set random data</button> 

    <p><center>Enjoy :-) </p>  
    
  </body>
</html>