Can this script be used to create multiple SVG elements?

76
February 13, 2020, at 01:00 AM

I have the following JavaScript that creates a graph using snap SVG.

However I need to create 4 SVG's in total and I was wondering if I could use only this script for it? And if so, how would I go about adjusting it? Or is it necessary with 4 seperate scripts to create the 4 SVG's?

In short; what's the best way going about this?

Thanks in advance.

The script:

//#SVG
var price = [0,-50, -100, -130, -150, -200];
//CHART VALUES
var chartH = $('#svg').height();
var chartW = $('#svg').width();
// PARSE PRICES TO ALIGN WITH BOTTOM OF OUR SVG
var prices = [];
for (i = 0; i < price.length; i++) {
    prices[i] = price[i] + $('#svg').height();
}
function draw() {
    //DEFINE SNAP SVG AND DETERMINE STEP NO.
    var paper = Snap('#svg');
    var steps = prices.length;
    // EVENLY DISTRIBUTE OUR POINTS ALONG THE X AXIS
    function step(i, chartW) {
        return chartW / prices.length * i;
    }
    var points = [];
    var breakPointsX = [];
    var breakPointsY = [];
    var point = {};
    for (i = 1; i < prices.length; i++) {
        //CALCULATE CURRENT POINT
        var currStep = step(i, chartW);
        var y = prices[i];
        point.x = Math.floor(currStep);
        point.y = y;
        //CALCULATE PREVIOUS POINT
        var prev = i - 1;
        var prevStep = step(prev, chartW);
        var prevY = prices[prev];
        point.prevX = Math.floor(prevStep);
        point.prevY = prevY;
        if (point.prevX === 0 || point.prevY === 0){
          point.prevX = 15;
          point.prevY = chartH - 0
        }
        // SAVE PATH TO ARRAY
        points[i] = " M" + point.prevX + "," + point.prevY + " L" + point.x + "," + point.y;
        // SAVE BREAKPOINTS POSITION
        var r = 30;
        breakPointsX[i] = point.x;
        breakPointsY[i] = point.y;
    }
    // DRAW LINES
    for (i = 0; i < points.length; i++) {
        var myPath = paper.path(points[i]);
        var len = myPath.getTotalLength();
        myPath.attr({
            'stroke-dasharray': len,
                'stroke-dashoffset': len,
                'stroke': '#3f4db3',
                'stroke-linecap': 'round',
                'stroke-width': 6,
                'stroke-linejoin': 'round',
                'id': 'myLine' + i,
                'class': 'line'
        });
    }
    // DRAW BREAKPOINTS
    for (i = 0; i < points.length; i++) {
        var circle = paper.circle(breakPointsX[i], breakPointsY[i], 5);
        circle.attr({
            'fill': '#fff',
                'stroke': '#3f4db3',
                'stroke-width': 3,
                'id': 'myCirc' + i,
                'class':'breakpoint'
        });
    }
  // DRAW COORDINATE SYSTEM
    var xAxis = paper.path('M0,'+chartH+'L'+chartW+","+chartH);
    var yAxis = paper.path('M0,'+chartH+'L0,0');
  var xOff = xAxis.getTotalLength();
  var yOff = yAxis.getTotalLength();
  var start = (prices.length*250+"ms");
  yAxis.attr({
    'stroke':'black',
    'stroke-width':10,
    'stroke-dasharray':yOff,
    'stroke-dashoffset':yOff,
    'id':'yAxis'
  });
  xAxis.attr({
    'stroke':'black',
    'stroke-width':5,
    'stroke-dasharray':xOff,
    'stroke-dashoffset':xOff,
    'id':'xAxis'
  });
  console.log(start);
  $('#yAxis').css({
    '-webkit-transition-delay':start,
    '-webkit-transition':'all 200ms ease-in'
  });
   $('#xAxis').css({
    '-webkit-transition-delay':start,
    '-webkit-transition':'all 200ms ease-in'
  });
  $('#xAxis').animate({
    'stroke-dashoffset':'0'
  });
  $('#yAxis').animate({
    'stroke-dashoffset': '0'
  });
}
function animate(){
  for (i=0;i<prices.length;i++){
    var circ = $('#myCirc'+i);
    var line = $('#myLine'+i);
    circ.css({
      '-webkit-transition':'all 550ms cubic-bezier(.84,0,.2,1)',
      '-webkit-transition-delay':375+(i*125)+"ms"
      });
    line.css({
      '-webkit-transition':'all 250ms cubic-bezier(.84,0,.2,1)',
      '-webkit-transition-delay':i*125+"ms"
      });
    line.animate({
      'stroke-dashoffset':0
    });
    circ.css({
      'transform':'scale(1)'
    });
  }
}
var alreadyPlayed = false;
 $(window).load(function(){
 draw();
 animate();
 });
READ ALSO
Prevent reloading a website after sweetalert

Prevent reloading a website after sweetalert

On a web page there is a table with a few rowsIn each line there is a button that triggers a Javascript function:

77
How to use javascript to put volume to 0 or close current tab for twitch or just mute the chrome tab?

How to use javascript to put volume to 0 or close current tab for twitch or just mute the chrome tab?

i am making a google chrome extension and currently, i want a function that either close the twitchtv tab or put volume of the stream to 0 is it possible or maybe the best way would be to mute the chrome tab

41
How to prevent page refresh on browser back to page generated by ajax call

How to prevent page refresh on browser back to page generated by ajax call

Is there a way to push the ajax call result? I don't understand where the actual state of the result page is storedBecause history

50
Styling issue with React App after refreshing

Styling issue with React App after refreshing

I made a React Color Picker App following React Udemy course by Colt SteeleI am facing some weird issue in my app with styling and I can't figure out what's causing it

39