function drawCharts(data) {
    x = data.R1
    y = data.R2
    z = data.Eff

    var trace = {
      x: x,
      y: y,
      z: z,
      type: 'heatmap',
      colorscale: 'Electric',
    };
    var Data = [trace];
    var layout = {
      title: 'Efficiency @ Desired Vout (%)',
      modebardisplay: false,
      xaxis: {
        title: {
          text: 'R1 (mm)',
        },
      },
      yaxis: {
        title: {
          text: 'R2 (mm)',
        },
      },
    }
    var config = {
      responsive: true,
      displayModeBar: false
    }

    Plotly.newPlot('eff_Plot_1', Data, layout, config);

    x = data.R1
    y = data.R2
    z = data.vibVel

    var trace = {
      x: x,
      y: y,
      z: z,
      type: 'heatmap',
      colorscale: 'Electric',
    };

    var Data = [trace];
    var layout = {
      title: 'Vibration Velcoity @ Desired Vout (m/s)',
      modebardisplay: false,
      xaxis: {
        title: {
          text: 'R1 (mm)',
        },
      },
      yaxis: {
        title: {
          text: 'R2 (mm)',
        },
      },
    }
    var config = {
      responsive: true,
      displayModeBar: false
    }

    Plotly.newPlot('vib_vel_plot', Data, layout, config);

    x = data.R1
    y = data.R2
    z = data.KZVS

    var trace = {
      x: x,
      y: y,
      z: z,
      mode: 'markers',
      type: 'heatmap',
      colorscale: 'Electric',
      type: 'heatmap',
    };

    var Data = [trace];


    var layout = {
      title: 'KZVS @ Desired Vout',
      modebardisplay: false,
      xaxis: {
        title: {
          text: 'R1 (mm)',
        },
      },
      yaxis: {
        title: {
          text: 'R2 (mm)',
        },
      },
    }
    var config = {
      responsive: true,
      displayModeBar: false
    }

    Plotly.newPlot('KZVS_plot', Data, layout, config);

    x = data.R1
    y = data.R2
    z = data.score

    var trace = {
      x: x,
      y: y,
      z: z,
      mode: 'markers',
      type: 'heatmap',
      colorscale: 'Electric',
      type: 'heatmap',
    };

    var Data = [trace];


    var layout = {
      title: 'Optimum Device Score',
      modebardisplay: false,
      xaxis: {
        title: {
          text: 'R1 (mm)',
        },
      },
      yaxis: {
        title: {
          text: 'R2 (mm)',
        },
      }
    }
    var config = {
      responsive: true,
      displayModeBar: false
    }

    Plotly.newPlot('score_plot', Data, layout, config);
  }

  function drawBestChart(data) {
    x = data.time
    y = data.Vcin

    var trace1 = {
      x: x,
      y: y,
      name: 'VCin'
    };

    x = data.time1.slice(0, Math.floor(data.time.length/3))
    y = data.iL1.slice(0, Math.floor(data.time.length/3))

    var trace2 = {
      x: x, 
      y: y,
      name: 'iL1',
      yaxis: 'y2',
    }
    var Data = [trace1, trace2];

    var layout = {
      title: 'Voltage across Cin',
      modebardisplay: false,
      xaxis: {
        title: {
          text: 'Theta (rads)',
        },
      },
      yaxis: {
        title: {
          text: 'VCin (V)',
        },
      },
      yaxis2: {
        title: 'iL1 (A)',
        overlaying: 'y',
        side: 'right'
      },
      legend: {x: 1.05, y: 1.2},
    }
    var config = {
      responsive: true,
      displayModeBar: false
    }

    Plotly.newPlot('Vcin_plot', Data, layout, config);

    x = data.time1
    y = data.Vout

    var trace = {
      x: x,
      y: y,
      name: 'Vout',
    };

    x = data.time1
    y = data.VoutRMS

    var trace2 = {
      x: [x[0], x[x.length - 1] ], 
      y: [y, y],
      name: 'VoutRMS',

    }
    var Data = [trace, trace2];
    var layout = {
      title: 'Output Voltage',
      modebardisplay: false,
      xaxis: {
        title: {
          text: 'time (s)',
        },
      },
      yaxis: {
        title: {
          text: 'Vout (V)',
        },
      },
      legend: {x: 1.05, y: 1.2},
    }
    var config = {
      responsive: true,
      displayModeBar: false
    }

    Plotly.newPlot('Vout_plot', Data, layout, config);


  }