Yohan Greenburg Yohan Greenburg - 1 year ago 259
jQuery Question

JavaScript Error - Uncaught SyntaxError: Unexpected number

In my php I am running two different Select statements and passing them to my JQuery arrays

value
and
value1
I have verified that each array holds data, in the proper format, but my issue is that my chart is never created. What I am after is for Set 1 to be a bar and Set 2 to be a line that shows the same data points as Set 1 but is a line. I tried the syntax below, but since no chart is displaying something is incorrect?

<script>
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
data: {
type: 'bar',
labels: labelsarr,
datasets: [{
label: 'Set 1',
data: values,
backgroundColor: 'rgba(0, 119, 204, 0.8)',
}]
}, {
type: 'line',
datasets: [{
label: 'Set 2',
data: values1,
backgroundColor: 'rgba(0,119, 208, 0.8)',
}]
}
options: {
tooltips: { },
legend: {
display: false,
position: 'top',
},
scales: { }
});
<script>


EDIT

I have continued to work with the syntax, and now I get an error of


Uncaught SyntaxError: Unexpected number


This is the full syntax I am utilizing now - what is erring? I think it is something in the JavaScript since the page loads everything except the chart

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
datasets: [{
type: 'bar',
labels: labelsarr,
label: 'Sample 1',
backgroundColor: 'rgba(0, 119, 204, 0.8)',
data: [ values ]
}, {
type: 'line',
label: 'Set 2',
backgroundColor: 'rgba(0,119, 208, 0.8)',
data: [ values 1 ]
},
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
text: 'Sample 2',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
},
plugins: [{
beforeDraw: function (chart) {
var labels = chart.data.labels;
labels.forEach(function (e, i) {
var bar = chart.data.datasets[0]._meta[0].data[i]._model;
var dataPoint = e.split(/\s/)[1];
if (dataPoint === '16')
bar.backgroundColor = 'orange';
else if (dataPoint === '17')
bar.backgroundColor = 'blue';
});
}
}]
}
}]);

Answer Source

Line 13: data: [ values 1 ]

The space between values and 1 shouldn't be there - either get rid of the space altogether, so you have:

data: [values1]

Or

data: [values, 1]

Now, I'm not too sure where you're defining values so that's all I can suggest.

Aswell as this, there were several other syntax errors (e.g missing brackets). Here is the completed code (assuming that you have a Chart object):

var chart = new Chart(ctx, {
			datasets: [{
					type: 'bar',
					labels: labelsarr,
					label: 'Sample 1',
					backgroundColor: 'rgba(0, 119, 204, 0.8)',
					data: [values]
				}, {
					type: 'line', 
					label: 'Set 2',
					backgroundColor: 'rgba(0,119, 208, 0.8)',
					data: [values1]
				}, {
				options: {
					tooltips: {
						callbacks: {
							label: function (t, d) {
								var xLabel = d.datasets[t.datasetIndex].label;
								var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
								return xLabel + ': ' + yLabel;
							}
						}
					},
					legend: {
						display: false,
						position: 'top',
						text: 'Sample 2',
					},
					scales: {
						yAxes: [{
								ticks: {
									beginAtZero: true,
									callback: function (value, index, values) {
										if (parseInt(value) >= 1000) {
											return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
										} else {
											return '$' + value;
										}
									}
								}
							}]
					}
				},
				plugins: [{
						beforeDraw: function (chart) {
							var labels = chart.data.labels;
							labels.forEach(function (e, i) {
								var bar = chart.data.datasets[0]._meta[0].data[i]._model;
								var dataPoint = e.split(/\s/)[1];
								if (dataPoint === '16')
									bar.backgroundColor = 'orange';
								else if (dataPoint === '17')
									bar.backgroundColor = 'blue';
							});
						}
					}]
				}
			}]	
		);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download