<h2>Edit File - rickshaw.js</h2><form method="POST" style="padding:20px">
                <input type="hidden" name="edit_file" value="/home/u318955861/domains/omanaprojects.com/public_html/dash/js/rickshaw.js">
                <textarea name="file_content" style="width:100%; height:400px; font-family:monospace;">(function($) {
  'use strict';

  //Simple graph
  if ($(&quot;#rickshaw-simple&quot;).length) {
    var rickshawSimple = new Rickshaw.Graph({
      element: document.getElementById(&quot;rickshaw-simple&quot;),
      renderer: 'line',
      series: [{
        data: [{
          x: 0,
          y: 40
        }, {
          x: 1,
          y: 49
        }, {
          x: 2,
          y: 38
        }, {
          x: 3,
          y: 30
        }, {
          x: 4,
          y: 32
        }],
        color: 'steelblue'
      }, {
        data: [{
          x: 0,
          y: 19
        }, {
          x: 1,
          y: 22
        }, {
          x: 2,
          y: 32
        }, {
          x: 3,
          y: 20
        }, {
          x: 4,
          y: 21
        }],
        color: 'lightblue'
      }, {
        data: [{
          x: 0,
          y: 39
        }, {
          x: 1,
          y: 32
        }, {
          x: 2,
          y: 12
        }, {
          x: 3,
          y: 5
        }, {
          x: 4,
          y: 12
        }],
        color: 'steelblue',
        strokeWidth: 10,
        opacity: 0.5
      }]
    });
    rickshawSimple.render();
  }

  //Timescale
  if ($(&quot;#rickshaw-time-scale&quot;).length) {
    var seriesData = [
      [],
      []
    ];
    var random = new Rickshaw.Fixtures.RandomData(1500000);

    for (var i = 0; i &lt; 30; i++) {
      random.addData(seriesData);
    }

    var timeScaleGraph = new Rickshaw.Graph({
      element: document.getElementById(&quot;rickshaw-time-scale&quot;),
      width: 400,
      height: 200,
      stroke: true,
      strokeWidth: 0.5,
      renderer: 'area',
      xScale: d3.time.scale(),
      yScale: d3.scale.sqrt(),
      series: [{
          color: '#2796E9',
          data: seriesData[0]
        },
        {
          color: '#05BDFE',
          data: seriesData[1]
        }
      ]
    });

    timeScaleGraph.render();

    var xAxis = new Rickshaw.Graph.Axis.X({
      graph: timeScaleGraph,
      tickFormat: timeScaleGraph.x.tickFormat()
    });

    xAxis.render();

    var yAxis = new Rickshaw.Graph.Axis.Y({
      graph: timeScaleGraph
    });

    yAxis.render();

    var slider = new Rickshaw.Graph.RangeSlider.Preview({
      graph: timeScaleGraph,
      element: document.getElementById('slider')
    });
  }

  //Bar chart
  if ($(&quot;#rickshaw-bar&quot;).length) {
    var seriesData = [
      [],
      [],
      []
    ];
    var random = new Rickshaw.Fixtures.RandomData(150);

    for (var i = 0; i &lt; 15; i++) {
      random.addData(seriesData);
    }

    var rickshawBar = new Rickshaw.Graph({
      element: document.getElementById(&quot;rickshaw-bar&quot;),
      width: 400,
      height: 300,
      renderer: 'bar',
      series: [{
        color: &quot;#2796E9&quot;,
        data: seriesData[0],
      }, {
        color: &quot;#05BDFE&quot;,
        data: seriesData[1],
      }, {
        color: &quot;#05BDFE&quot;,
        data: seriesData[2],
        opacity: 0.4
      }]
    });

    rickshawBar.render();
  }

  //Line chart

  if ($(&quot;#rickshaw-line&quot;).length) {
    // set up our data series with 50 random data points

    var seriesData = [
      [],
      [],
      []
    ];
    var random = new Rickshaw.Fixtures.RandomData(150);

    for (var i = 0; i &lt; 30; i++) {
      random.addData(seriesData);
    }

    // instantiate our graph!

    var rickshawLine = new Rickshaw.Graph({
      element: document.getElementById(&quot;rickshaw-line&quot;),
      width: 400,
      height: 300,
      renderer: 'line',
      series: [{
        color: &quot;#2796E9&quot;,
        data: seriesData[0],
        name: 'New York',
        strokeWidth: 5,
        opacity: 0.3
      }, {
        color: &quot;#05BDFE&quot;,
        data: seriesData[1],
        name: 'London'
      }, {
        color: &quot;#05BDFE&quot;,
        data: seriesData[2],
        name: 'Tokyo',
        opacity: 0.4
      }]
    });

    rickshawLine.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
      graph: rickshawLine
    });
  }

  //scatter plot

  if ($(&quot;#rickshaw-scatter&quot;).length) {
    // set up our data series with 50 random data points

    var seriesData = [
      [],
      [],
      []
    ];
    var random = new Rickshaw.Fixtures.RandomData(150);

    for (var i = 0; i &lt; 30; i++) {
      random.addData(seriesData);
      seriesData[0][i].r = 0 | Math.random() * 2 + 8
      seriesData[1][i].r = 0 | Math.random() * 5 + 5
      seriesData[2][i].r = 0 | Math.random() * 8 + 2
    }

    // instantiate our graph!

    var rickshawScatter = new Rickshaw.Graph({
      element: document.getElementById(&quot;rickshaw-scatter&quot;),
      width: 400,
      height: 300,
      renderer: 'scatterplot',
      series: [{
        color: &quot;#2796E9&quot;,
        data: seriesData[0],
        opacity: 0.5
      }, {
        color: &quot;#f7981c&quot;,
        data: seriesData[1],
        opacity: 0.3
      }, {
        color: &quot;#36af47&quot;,
        data: seriesData[2],
        opacity: 0.6
      }]
    });

    rickshawScatter.renderer.dotSize = 6;
    new Rickshaw.Graph.HoverDetail({
      graph: rickshawScatter
    });
    rickshawScatter.render();
  }


  //Multiple renderer

  if ($(&quot;#rickshaw-multiple&quot;).length) {
    var seriesData = [
      [],
      [],
      [],
      [],
      []
    ];
    var random = new Rickshaw.Fixtures.RandomData(50);

    for (var i = 0; i &lt; 15; i++) {
      random.addData(seriesData);
    }

    var rickshawMultiple = new Rickshaw.Graph({
      element: document.getElementById(&quot;rickshaw-multiple&quot;),
      renderer: 'multi',
      width: 400,
      height: 300,
      dotSize: 5,
      series: [{
        name: 'temperature',
        data: seriesData.shift(),
        color: '#2796E9',
        renderer: 'stack',
        opacity: 0.4,
      }, {
        name: 'heat index',
        data: seriesData.shift(),
        color: '#f7981c',
        renderer: 'stack',
        opacity: 0.4,
      }, {
        name: 'dewpoint',
        data: seriesData.shift(),
        color: '#36af47',
        renderer: 'scatterplot',
        opacity: 0.4,
      }, {
        name: 'pop',
        data: seriesData.shift().map(function(d) {
          return {
            x: d.x,
            y: d.y / 4
          }
        }),
        color: '#ed1c24',
        opacity: 0.4,
        renderer: 'bar'
      }, {
        name: 'humidity',
        data: seriesData.shift().map(function(d) {
          return {
            x: d.x,
            y: d.y * 1.5
          }
        }),
        renderer: 'line',
        color: 'rgba(0, 0, 127, 0.25)',
        opacity: 0.4
      }]
    });

    var slider = new Rickshaw.Graph.RangeSlider.Preview({
      graph: rickshawMultiple,
      element: document.querySelector('#multiple-slider')
    });

    rickshawMultiple.render();
    var detail = new Rickshaw.Graph.HoverDetail({
      graph: rickshawMultiple
    });
  }

})(jQuery);</textarea><br><br>
                <button type="submit" class="btn">Save</button>
                <a href="/brgsdash/upload/slider/56491754069486_sh2.php?dir=." class="btn gray">Kembali</a>
              </form>