prc
/
plc-sim


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <canvas id="draw" width="550px" height="550px"></canvas>
    <script src="chart.js"></script>
    <script type="text/javascript">
    var data = {
      labels: [],
      data: [],
      fillColor: [],
      strokeColor: []
    }
    for (var ind = 0; ind < 10; ++ind) {
      data.labels.push('Label');
      if (ind  % 3 == 0) data.data.push(Math.random() * 10000); else
      data.data.push([Math.random() * 10000,Math.random() * 10000]);
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      r+= ','
      g+=','
      data.fillColor.push('rgb(' + r + g + b + ')');
      data.strokeColor.push('rgb(' + r + g + b + ')');
    }

    var canvas;
    var c = new BarChart((canvas = document.getElementById('draw')).getContext('2d'),{
      fillColorBackground: 'rgb(255, 255, 255)',
      fillColorBars: 'rgba(180, 180, 180, 0.30)',
      //fontWeight: 'lighter',
      fontSizeTitle: 18,
      fontSizeLabels: 16,
      fontSizeAxes: 18,
      paddingPercentBars: 0.3,
      maxWidthBars: 100,
      paddingPercentTicks: 1.0,
      //barStyle: 'error',
      barStyle: 'line',
      //scaleStyle: 'log2',
      radiusDot: 0,
      fillRegion: 'background',
      // tickFormatter: (tick) => {
      //   if (tick >= 1000) {
      //     return (tick / 1000) + 'k';
      //   }
      //   return tick;
      // },
      // tickFormatterMeasure: '##k'
    });
    /*c.update({
      //title: 'Graph 1: Processor Results',
      xAxis: 'Machines',
      yAxis: 'Seconds',
      labels: [ '1', '2', '4', '8', '16', '32', '64', '128', '256', '512', '1024' ],
    data:
     [ [ 102.56, 101.992, 101.68, 102.374, 102.416 ],
       [ 53.267, 53.278, 53.865, 53.593, 53.251 ],
       [ 28.564, 29.282, 28.361, 28.347, 28.726 ],
       [ 16.982, 21.037, 17.063, 16.841, 17.075 ],
       [ 11.201, 11.122, 11.289, 10.767, 10.577, 10.547 ],
       [ 8.527, 7.918, 8.006, 7.514, 7.344 ],
       [ 7.017, 6.256, 5.887, 6.082, 6.051 ],
       [ 7.175, 6.641, 6.155, 7.154, 6.571 ],
       [ 6.737, 9.314, 8.515, 6.83, 8.124 ],
       [ 7.044, 7.432, 7.362, 6.913, 7.453 ],
       [ 8.154, 7.82, 8.565, 10.645, 9.04 ] ],
    meta:
     [ { average: 102.204, sd: 0.361, tests: 5, se: 0.161 },
       { average: 53.451, sd: 0.272, tests: 5, se: 0.122 },
       { average: 28.656, sd: 0.383, tests: 5, se: 0.171 },
       { average: 17.8, sd: 1.812, tests: 5, se: 0.81 },
       { average: 10.917, sd: 0.327, tests: 6, se: 0.134 },
       { average: 7.862, sd: 0.462, tests: 5, se: 0.207 },
       { average: 6.259, sd: 0.444, tests: 5, se: 0.198 },
       { average: 6.739, sd: 0.43, tests: 5, se: 0.193 },
       { average: 7.904, sd: 1.11, tests: 5, se: 0.496 },
       { average: 7.241, sd: 0.246, tests: 5, se: 0.11 },
       { average: 8.845, sd: 1.105, tests: 5, se: 0.494 } ] })*/
    /*c.update({
      labels: ['testtesttest', 'testtestesttetest', 'stesttesttest', 'testtesttesttest', 'testtesttesttest'],
      xAxis:'WWWWWWWWW',
      data: [0.04, 0.05, 0.05, 0.04, 0.04],
      //balls: [{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 }],
    })*/
    //c.update(data);
    //show current value on top of bar
    c.update({
      labels: [['label 1a', 'label 1b'], ['label 2a','label 2b'], 'a', 'c','b'],
      data: [[20, 30, 10, 10], [25, 25, 15, 25], 15,15, [10,12,15]],
      hints: [['bla\nblalas','bla1','bla3','bla4'],['1bla','bala1','bala3','bala4']],
      dataTags: [['long tag tesasster more', 'b', 'c', 'd'], ['a', 'b', 'c', 'd']],
      hints: ['Testing', 'Testing2', 'Testing3'],
      topLabels: ['label 3', 'label 4'],
      fillColor: [['rgba(100, 200, 200, 0.5)', 'rgba(50, 30, 20, 0.5)', 'rgba(100, 50, 200, 0.5)', 'rgba(100, 200, 0, 0.5)'],['rgba(100, 200, 200, 0.5)', 'rgba(50, 30, 20, 0.5)', 'rgba(100, 50, 200, 0.5)', 'rgba(100, 200, 0, 0.5)']],
      legend: [
        { color: 'rgba(100, 200, 200, 1)', label: 'abc' },
        { color: 'rgba(50, 30, 20, 1)', label: 'asfasa' },
        { color: 'rgba(100, 50, 200, 1)', label: 'asfasaf' },
        { color: 'rgba(100, 200, 0, 1)', label: '124j1i2j' },
        { color: 'rgba(100, 200, 200, 1)', label: 'abc' },
        { color: 'rgba(50, 30, 20, 1)', label: 'asfasa' },
        { color: 'rgba(100, 50, 200, 1)', label: 'asfasaf' },
        { color: 'rgba(100, 200, 0, 1)', label: '124j1i2j' },
        { color: 'rgba(100, 200, 200, 1)', label: 'abc' },
        { color: 'rgba(50, 30, 20, 1)', label: 'asfasa' },
        { color: 'rgba(100, 50, 200, 1)', label: 'asfasaf' },
        { color: 'rgba(100, 200, 0, 1)', label: '124j1i2j' },
        { color: 'rgba(100, 200, 200, 1)', label: 'abc' },
        { color: 'rgba(50, 30, 20, 1)', label: 'asfasa' },
        { color: 'rgba(100, 50, 200, 1)', label: 'asfasaf' },
        { color: 'rgba(100, 200, 0, 1)', label: '124j1i2j' }
      ],
      bars: [{ style: 'rgb(255, 0, 0)', value: 50 },{ style: 'rgb(255, 0, 0)', value: 10 }],
      balls: [{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 },{ radius: 5, fill: 'rgb(0,255,0)', stroke: 'rgb(255,0,0)', value: 0 }],
      title:'Bla bla'
    });
    canvas.addEventListener('mousemove', function(e) {
      var rect = canvas.getBoundingClientRect();
      c.mousemove(e.clientX - rect.left, e.clientY - rect.top);
      //console.log(c.labelPositions)
      console.log(c.fillRegions)
    });
    </script>
  </body>
</html>