function make_chart_svg(plot) {
  var section = d3.select("#"+plot)

  var chart_width = parseNumber(charts_config.svg.width)
  var chart_height = parseNumber(charts_config.svg.height)

  var chart_width_string, chart_height_string
  if (typeofNumber(chart_width) == "float") {
    chart_width_string = (chart_width * section.node().clientWidth ) + "px"
  } else {
    chart_width_string = chart_width + "px"
  }

  if (typeofNumber(chart_height) == "float") {
    chart_height_string = (chart_height * section.node().clientHeight ) + "px"
  } else {
    chart_height_string = chart_height + "px"
  }

  var svg
  if (section.select("#" +  plot + "_svg").empty()) {
    svg = section.append("svg")
  } else {
    svg = section.select("#" +  plot + "_svg")
  }
  svg.attr("perserveAspectRatio", "xMinYMid meet")
         .classed("svg-content-responsive", true)
         .attr("id", plot + "_svg")
         .attr("width", chart_width_string)
         .attr("height", chart_height_string)
  return svg
}


function update_chart_svg(plot) {
  var section = document.getElementById(plot + "_chart")
  var svg = d3.select("svg#" + plot + "_svg")

  var chart_width = parseNumber(charts_config.svg.width)
  var chart_height = parseNumber(charts_config.svg.height)

  var chart_width_string, chart_height_string
  if (typeofNumber(chart_width) == "float") {
    chart_width_string = (chart_width * section.clientWidth ) + "px"
  } else {
    chart_width_string = chart_width + "px"
  }

  if (typeofNumber(chart_height) == "float") {
    chart_height_string = (chart_height * section.clientHeight ) + "px"
  } else {
    chart_height_string = chart_height + "px"
  }


  return svg
}