Convert this canvasjs chart to chart.js chart

Question

im new in javascript programming and still learning, in few days im creating this canvasjs chart and it's works,

but lately I notice canvasjs is not free and it create watermark below the chart.

and i found chart.js which free (i think) and the chart style are more pretty

can someone please help me to convert this canvasjs chart to chart.js chart?

$(function () {
    var DATA1 = []
    var DATA2 = []

    $.ajax({
        type : 'GET',
        url : "https://api.myjson.com/bins/14edgx",
        dataType : 'json',
        success : function (field) {
            field = field.data;
            for (var i = 0; i < field.length; i++) {
                DATA1.push({
                    x : new Date(field[i].day),
                    y : parseInt(field[i].money)
                });
                DATA2.push({
                    x : new Date(field[i].day),
                    y : parseInt(field[i].impressions)
                });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                    animationEnabled : true,
                    backgroundColor : "#FFF",
                    title : {},
                    axisY : [{
                            title : "Impression",
                            lineColor : "#369EAD",

                        }
                    ],
                    axisY2 : [{
                            title : "Money",
                            lineColor : "#C0504E",
                            valueFormatString : "$#,###,#0",

                        }
                    ],
                    axisX : {
                        valueFormatString : "DD-MMM",
                        labelAngle : -50,
                        interlacedColor : "#F0F8FF"
                    },
                    data : [{
                            type : "splineArea",
                            fillOpacity : .9,
                            color : "#C0504E",
                            axisYType : "primary",
                            axisYIndex : 0,
                            name : "line1",
                            toolTipContent : "{x}<br/>Views: {y}",

                            showInLegend : true,
                            legendText : "Impression",
                            dataPoints : DATA2

                        }, {
                            type : "splineArea",
                            fillOpacity : .2,
                            color : "#6599FF",
                            axisYType : "secondary",
                            axisYIndex : 1,
                            name : "Visits",
                            toolTipContent : "{x}<br/>Money: ${y}",
                            showInLegend : true,
                            legendText : "Money",
                            dataPoints : DATA1
                        }]
                });

            chart.render();

        }
    });
});

Thank you

Answer 1

Here is a translation from canvas.js to chart.js:

var DATA1 = [];
var DATA2 = [];

$.ajax({
  type: 'GET',
  url: "https://api.myjson.com/bins/14edgx",
  dataType: 'json',
  success: function(field) {
    field = field.data;
    for (var i = 0; i < field.length; i++) {

      DATA1.push({
        x: new Date(field[i].day),
        y: parseInt(field[i].money)
      });
      DATA2.push({
        x: new Date(field[i].day),
        y: parseInt(field[i].impressions)
      });
    }
    createChart();
    console.log(DATA1, DATA2);
  }
});

function createChart() {
  var ctx = document.getElementById("myChart").getContext("2d");
  ctx.canvas.width = 1000;
  ctx.canvas.height = 600;
  var cfg = {
    type: 'bar',
    data: {
      datasets: [{
        label: "DATA1",
        data: DATA1,
        type: 'line',
        pointRadius: 1,
        fill: true,
        borderColor: 'red',
        lineTension: 0,
        borderWidth: 2,
        yAxisID: 'A',
      },
      {
        label: "DATA2",
        data: DATA2,
        type: 'line',
        pointRadius: 1,
        fill: true,
        borderColor: 'blue',
        lineTension: 0,
        borderWidth: 2,
        yAxisID: 'B',
      }]
    },
    options: {
      legend: {
        display: false
      },
      tooltips: {
        mode: 'nearest',
        intersect: false,
        callbacks: {
          title: function(tooltipItem, data) {
            console.log('title',tooltipItem, data);
            var date = moment(tooltipItem[0]['xLabel']).format('DD.MM.YYYY');
            return date;
          },
          label: function(tooltipItem, data) {
            console.log('label',tooltipItem, data);
            return data.datasets[0].label+": "+tooltipItem['yLabel'];
          }
        },
      },
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'linear',
          time: {
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
              'day': 'DD-MM-YY'
            }
          }
        }],
        yAxes: [{
          id: 'A',
			scaleLabel: {
            display: true,
            labelString: 'money'
          },
          position: 'left',
        }, {
          id: 'B',
          type: 'linear',
			scaleLabel: {
            display: true,
            labelString: 'impressions'
          },
          position: 'right',
        }]
      }
    }
  };
  var chart = new Chart(ctx, cfg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

<canvas id="myChart" width="400" height="200"></canvas>