How to use

Hi,
I guess you should introduce the right name for the source. You should save that script as a “chart snippet” and use its slug for source, instead of “a Chart Snippet”
That script is working on the demo site, so presumably it should work on your page.

Your answer seem logical:-) . I will test it.

Thank you very much.

It want not work. I’m a absolute newbie perhaps i do something wrong.
I save the below Snippet into the file charts_snippet.js und save it in /wp-content/plugins/blazing-charts/charts_snippet.js

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>
<div style="width:75%;">
	<canvas id="canvas"></canvas>
</div>
<br>
<br>
<button id="randomizeData">Randomize Data</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
	window.onload = function() {
		function randomScalingFactor() {
			return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
		}
		function randomColorFactor() {
			return Math.round(Math.random() * 255);
		}
		function randomColor(opacity) {
			return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
		}
		function newDate(days) {
			return moment().add(days, 'd').toDate();
		}
		function newDateString(days) {
			return moment().add(days, 'd').format();
		}
		var config = {
			type: 'line',
			data: {
				datasets: [{
					label: "Dataset with string point data",
					data: [{
						x: newDateString(0),
						y: randomScalingFactor()
					}, {
						x: newDateString(2),
						y: randomScalingFactor()
					}, {
						x: newDateString(4),
						y: randomScalingFactor()
					}, {
						x: newDateString(5),
						y: randomScalingFactor()
					}],
					fill: false
				}, {
					label: "Dataset with date object point data",
					data: [{
						x: newDate(0),
						y: randomScalingFactor()
					}, {
						x: newDate(2),
						y: randomScalingFactor()
					}, {
						x: newDate(4),
						y: randomScalingFactor()
					}, {
						x: newDate(5),
						y: randomScalingFactor()
					}],
					fill: false
				}]
			},
			options: {
				responsive: true,
	            title:{
	                display:true,
	                text:"Chart.js Time Point Data"
	            },
				scales: {
					xAxes: [{
						type: "time",
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Date'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'value'
						}
					}]
				}
			}
		};
		jQuery.each(config.data.datasets, function(i, dataset) {
			dataset.borderColor = randomColor(0.4);
			dataset.backgroundColor = randomColor(0.5);
			dataset.pointBorderColor = randomColor(0.7);
			dataset.pointBackgroundColor = randomColor(0.5);
			dataset.pointBorderWidth = 1;
		});
		jQuery('#randomizeData').click(function() {
			jQuery.each(config.data.datasets, function(i, dataset) {
				jQuery.each(dataset.data, function(j, dataObj) {
					dataObj.y = randomScalingFactor();
				});
			});
			window.myLine.update();
		});
		jQuery('#addData').click(function() {
			if (config.data.datasets.length > 0) {
				var lastTime = myLine.scales['x-axis-0'].labelMoments[0].length ? myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1] : moment();
				var newTime = lastTime
					.clone()
					.add(1, 'day')
					.format('MM/DD/YYYY HH:mm');
				for (var index = 0; index < config.data.datasets.length; ++index) {
					config.data.datasets[index].data.push({
						x: newTime,
						y: randomScalingFactor()
					});
				}
				window.myLine.update();
			}
		});
		jQuery('#removeData').click(function() {
			config.data.datasets.forEach(function(dataset, datasetIndex) {
				dataset.data.pop();
			});
			window.myLine.update();
		});
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx, config);
	};
</script>

Then i post the follow shortcut into a page:
[BlazingChart charttype="chartjs" source="https://mydomain.com/wp-content/plugins/blazing-charts/charts_snippet.js" options="bundle"]

Does i do something wrong?

Thank you in advance.

• This reply was modified 7 years, 5 months ago by serior63.

Yes, almost everything is wrong.
if you look at screenshots of this plugin, there is an entry in wordpress control panel, named “chart snippets”, as following:
https://ps.w.org/blazing-charts/assets/screenshot-2.jpg?rev=1236567
you should save the script as a chart snippet record in wordpress database, not as a file.
each post, page or “chart snippet has a slug, which is unique. you can introduce that slug as source in the shortcode.

I understand now. It works.
Thank you for your patience. You get from me five stars :-).