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>
Source: stackoverflow.com
Related Query
- Chart.js line chart does not render data lines on iOS
- Adding new data to empty Chart.js chart does not render new data correctly
- Chart.js - Line chart does not render all points when using Point[] format
- Angular-chart.js - Make line chart does not curve
- Echars can not render a smooth line when it process alot of data
- Bar Chart of ChartJS does not Render
- Adding object data to data structure of chart.js chart does not show any data
- Chartjs does not render chart when set responsive option to true
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- Charts.js does not render chart until I open the console
- Data not displaying properly in Chart.js line chart
- Chartjs backgroundColor for line chart does not appear in Vue app
- Why ChartJS's Bar Chart does not render bar for a specific value?
- angular 4 line chart data is not showing data from http get
- ChartJs does not render chart when binding canvas id in Angular
- Chart.js Line chart Option does not disable gridlines
- ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line
- Chart.js line chart looking as area chart with smooth lines but not sharp
- React js with react-chart js, does not render doughnut chart
- React-chart does not render the legend for PIE chart
- Chart.js returns a console error and does not display the chart when using variables as data input
- Not all date data shows on x axis line chart
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Edge browser does not render chart using chart js
- Trying to call API and plot a line chart but it does not show
- Line chart not rendering data
- Position of the x-axis labels is not in sync with the line chart data points
- Add data to line chart js dynamically with multiple lines
- The data that is called in chart does not match the database
- ChartJS Line Chart shoud not start at 0 with all Lines
More Query from same tag
- Draw stacked horizontal bar chart with Average line using ChartJS
- ChartJS fails to render horizontal bar chart for timeseries data
- Chart.js How should I do to make vertical dotted line
- Check if element exists before trying to call getContext
- why does my chart.js barograph order by whole numbers and then floats?
- ChartJS: Update tooltip
- Chart.js automatic chosen scale value
- ng2-charts - Angular 4 working example
- Can we show long numbers as 1k, 1M, 1B on axis in charts?
- Using Javascript with MPDF
- Chart.js: Disable Y-Axis, when graph is disabled via Legend
- Weather graph using Angular 2, chart.js and json data
- ChartJs 2.0 How do I obtain point information being clicked upon?
- how to add percentage value to legend field in pie chart using chart.js
- Chart.js How to actualize canvas due to new x-axis range typed by user
- implementing horizontal bar chart
- Ajax call to trigger a controller function
- How do you revert xAxes with Chart.js?
- Using Chart.js onClick function, can you execute code from an undefined or null result?
- Angular Charts.js: Can't refresh chart with data
- Display API data in line charts dynamically
- make chartjs legend labels tabbable
- Chart does not display on webpage in Django app (with Chart.js)
- How to disable converting decimal number to exponential?
- ERROR : syntax error, unexpected '$app' (T_VARIABLE), expecting ')'
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- Combining charting with the map
- Chart.js in Angular Radar Chart
- Laravel displaying a chart from another database connection
- Angular ChartJs colors option not working