Copper Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="copperChartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

if (jQuery('#copperChartContainer').length) { 
  var originalTitle = '';
  var axisXOption = {      
    valueFormatString: "MMM D, YYYY" ,
    labelAngle: -90,
    gridColor: "silver",
    tickColor: "silver",
    tickThickness: 1,
    gridThickness: 1,
    labelFontColor: '#808080',
    titleFontColor: '#808080',
	titleFontFamily: 'acumin-pro-condensed, arial, sans-serif',
	titleFontSize: 23,
    interval: 1,
    intervalType: "month"
  };
  drawchart(1.9,1);
		
  function drawchart(minimum, years) {
    if (years == 0) {
      axisXOption.intervalType = 'year';
      axisXOption.interval = 3;
    } else if (years == 1 || years == 2) {
      axisXOption.intervalType = 'month';
      axisXOption.interval = 1;
    } else if (years == 3) {
      axisXOption.intervalType = "month";
      axisXOption.interval = 3;
    } else if (years == 5) {
      axisXOption.intervalType = "month";
      axisXOption.interval = 6;
    }

   window.chart = new CanvasJS.Chart("copperChartContainer",{
      zoomEnabled: true,
      animationEnabled: true, 
      rangeChanging: dateTimeFormatter,
      axisX: axisXOption,
      axisY:{
        valueFormatString:"0.00",
        prefix: "$",
        // minimum: minimum,
        title: 'Copper COMEX Price ($/lb)',
        titleFontColor: '#FFF',
        titleFontSize: 28,
        color:"#FFF",
        titleFontFamily: 'acumin-pro-condensed, arial, sans-serif',
        titleMargin: 30,
      },
      axisY2:{
        valueFormatString:"0.00",
        prefix: "$",
        minimum: minimum,
        title: 'Copper COMEX Price ($/lb)',
        titleFontSize: 18,
        titleFontFamily: 'acumin-pro-condensed, arial, sans-serif',
        titleMargin: 30,
      },

      data: [{ 
        type: "line",
        yValueFormatString: "$#.000",
        axisYType: "secondary",
        color:"#B5682A",
        dataPoints : getdata(years)
      },{}]
    });
    chart.render();
  } //drawchart()

    function dateTimeFormatter(e) {
      var...