score:1

i figured it out, thanks to a warning so showed in the code examaple.

the problem is that the dates i was passing in were not in iso standard format, and therefore moments() was defaulting to the standard date() which does not work on all browsers.

i changed around the format and it now works fine.

/* build the chart arrays */
var linedatapaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var linedataseo = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];

/* build the chart */
var ctx = document.getelementbyid("roichart").getcontext("2d");
var monthlabels = [];
var dateobj = new date();
dateobj.setdate(1);
var dateyear = dateobj.getfullyear();
var monthyeararray = [];
monthyeararray[0] = "01";
monthyeararray[1] = "02";
monthyeararray[2] = "03";
monthyeararray[3] = "04";
monthyeararray[4] = "05";
monthyeararray[5] = "06";
monthyeararray[6] = "07";
monthyeararray[7] = "08";
monthyeararray[8] = "09";
monthyeararray[9] = "10";
monthyeararray[10] = "11";
monthyeararray[11] = "12";
var dateyearloop = dateyear;
for (i = 0; i < linedataseo.length; i++) {
  if (dateobj.getmonth() == 11) {
    monthlabels[i] = dateyearloop + "-" + monthyeararray[dateobj.getmonth()];
    dateyearloop = dateyearloop + 1;
		dateobj.setmonth(dateobj.getmonth() + 1);
  } else {
    monthlabels[i] = dateyearloop + "-" + monthyeararray[dateobj.getmonth()];
    dateobj.setmonth(dateobj.getmonth() + 1);
  }
}

var chart = new chart(ctx, {
	// the type of chart we want to create
	type: "line",
	// the data for our dataset
	data: {
		labels: monthlabels,
		datasets: [{
			label: "paid leads / traffic",
			backgroundcolor: "rgba(255, 98, 132, 0.5)",
			bordercolor: "rgb(255, 98, 132)",
			data: linedatapaid,
			fill: false,
		}, {
			label: "seo and content",
			backgroundcolor: "rgba(46, 57, 191, 0.5)",
			bordercolor: "rgb(46, 57, 191)",
			data: linedataseo,
			fill: true,
		}]
	},
	// configuration options go here
	options: {
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            label: function(tooltipitems, data) {
              	var text = tooltipitems.datasetindex === 0 ? ' paid leads for $500' : ' seo leads for $500';
                return tooltipitems.ylabel + text;
            }
        }
    },
		legend: {
			labels: {
				fontsize: 14
			}
		},
		responsive: true,
    aspectratio: 1,
    //maintainaspectratio: false,
		scales: {
			xaxes: [{
				display: true,
				scalelabel: {
					display: true,
					labelstring: 'time',
					fontfamily: 'open sans',
					fontcolor: 'rgb(29, 29, 31)',
					fontsize: '14'
				},
				ticks: {
					fontfamily: 'open sans',
					fontcolor: 'rgb(29, 29, 31)',
					fontsize: '14'
				},
				type: "time",
				time: {
					unit: "month",
					displayformats: {
						month: 'mmm yyyy'
					}
				}
			}],
			yaxes: [{
				display: true,
				scalelabel: {
					display: true,
					labelstring: 'leads',
					fontfamily: 'open sans',
					fontcolor: 'rgb(29, 29, 31)',
					fontsize: '14'
				},
				ticks: {
					beginatzero: true,
					max: 100,
					fontfamily: 'open sans',
					fontcolor: 'rgb(29, 29, 31)',
					fontsize: '14'
				}
			}]
		}
	}
});
.chart-container {
  position: relative;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.min.js"></script>

<div class="chart-container">
    <canvas id="roichart"></canvas>
</div>


Related Query

More Query from same tag