Support » Plugin: Blazing Charts » How to use

  • Resolved serior63

    (@serior63)


    Hello,
    how can i use this plugin to show a line chart. I have postet the following example code from https://blazingspider.com/wp-demo/187/chart-js-time-scale-sample/#more-187 into a page, but it doesn’t work.

    Can anyone help me?
    Example code from the website:

    
    [BlazingChart charttype="chartjs" source="a Chart Snippet" options="bundle"]
    
    <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>
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Massoud Shakeri

    (@massoudshakeri)

    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 3 years, 2 months ago by serior63.
    Plugin Author Massoud Shakeri

    (@massoudshakeri)

    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 :-).

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to use’ is closed to new replies.