10 examples of 'canvasjschart' in JavaScript

Every line of 'canvasjschart' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
14function createChart(canvas, type, options, data) {
15 return new Chart(canvas, {
16 type: type,
17 options: deepClone(options),
18 data: deepClone(data)
19 });
20}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

235function createChart()
236 {
237 //Get the context of the canvas element we want to select
238 var ctx = document.getElementById("brewChart").getContext("2d");
239
240 //Create the data object to pass to the chart
241 var data = {
242 labels : ["Empâtage","60 min","Mash Out","10 min"],
243 datasets : [
244 {
245 fillColor : "rgba(220,220,220,0.5)",
246 strokeColor : "rgba(220,220,220,1)",
247 pointColor : "rgba(220,220,220,1)",
248 pointStrokeColor : "#fff",
249 data : [67,67,75,75]
250 },
251 ]
252 };
253
254 //The options we are going to pass to the chart
255 options = {
256 bezierCurve : false,
257 scaleOverride : true,
258 //Number - The number of steps in a hard coded scale
259 scaleSteps : 12,
260 //Number - The value jump in the hard coded scale
261 scaleStepWidth : 1,
262 //Number - The scale starting value
263 scaleStartValue : 65,
264
265 };
266
267 //Create the chart
268 new Chart(ctx).Line(data, options);
269 }
5function initChart(canvas, width, height) {
6 const chart = echarts.init(canvas, null, {
7 width: width,
8 height: height
9 });
10 canvas.setChart(chart);
11
12 var option = {
13 backgroundColor: "#ffffff",
14 color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
15 series: [{
16 label: {
17 normal: {
18 fontSize: 14
19 }
20 },
21 type: 'pie',
22 center: ['50%', '50%'],
23 radius: [0, '60%'],
24 data: [{
25 value: 55,
26 name: '北京'
27 }, {
28 value: 20,
29 name: '武汉'
30 }, {
31 value: 10,
32 name: '杭州'
33 }, {
34 value: 20,
35 name: '广州'
36 }, {
37 value: 38,
38 name: '上海'
39 },
40 ],
41 itemStyle: {
42 emphasis: {
43 shadowBlur: 10,
44 shadowOffsetX: 0,
45 shadowColor: 'rgba(0, 2, 2, 0.3)'
46 }
47 }
48 }]
49 };
50
51 chart.setOption(option);
52 return chart;
53}
3function initChart(canvas, width, height, F2) {
4 const data = [
5 { year: '2001', population: 41.8 },
6 { year: '2002', population: 25.8 },
7 { year: '2003', population: 31.7 },
8 { year: '2004', population: 46 },
9 { year: '2005', population: 28 }
10 ];
11
12 chart = new F2.Chart({
13 el: canvas,
14 width,
15 height
16 });
17 chart.source(data);
18 chart.coord('polar');
19 chart.legend({
20 position: 'right'
21 });
22 chart.axis(false);
23 chart.interval().position('year*population')
24 .color('year')
25 .style({
26 lineWidth: 1,
27 stroke: '#fff'
28 });
29 chart.render();
30 return chart;
31}
6function drawChart(canvas, width, height) {
7 var Global = F2.Global;
8 var data = [
9 { country: '巴西', population: 18203 },
10 { country: '印尼', population: 23489 },
11 { country: '美国', population: 29034 },
12 { country: '印度', population: 104970 },
13 { country: '中国', population: 131744 }
14 ];
15 var chart = new F2.Chart({
16 el: canvas,
17 width,
18 height
19 });
20
21 chart.source(data, {
22 population: {
23 tickCount: 5
24 }
25 });
26 chart.coord({
27 transposed: true
28 });
29 chart.axis('country', {
30 line: Global._defaultAxis.line,
31 grid: null
32 });
33 chart.axis('population', {
34 line: null,
35 grid: Global._defaultAxis.grid,
36 label: function(text, index, total) {
37 var textCfg = {};
38 if (index === 0) {
39 textCfg.textAlign = 'left';
40 } else if (index === total - 1) {
41 textCfg.textAlign = 'right';
42 }
43 return textCfg;
44 }
45 });
46 chart.interval().position('country*population');
47 chart.render();
48 return chart;
49}
2function generateChart(args) {
3
4 args = args || {};
5 args.data = args.data || [];
6 args.label = args.label || "";
7 args.title = args.title || "";
8
9 var colors = {
10 "blue": "rgb(54, 162, 235)",
11 "red": "rgb(255, 99, 132)",
12 "green": "rgb(75, 192, 192)",
13 "grey": "rgb(201, 203, 207)",
14 "orange": "rgb(255, 159, 64)",
15 "purple": "rgb(153, 102, 255)",
16 "yellow": "rgb(255, 205, 86)"
17 }
18 var colorNames = Object.keys(colors);
19
20 var barChartData = {
21 // labels: ["January", "February", "March", "April", "May", "June", "July"],
22 datasets: [{
23 label: args.label,
24 backgroundColor: colors['red'],
25 borderColor: colors['red'],
26 borderWidth: 1,
27 data: args.data
28 }]
29 }
30
31 var ctx = document.getElementById("canvas").getContext("2d");
32 var chart = new Chart(ctx, {
33 type: 'bar',
34 data: barChartData,
35 options: {
36 responsive: true,
37 legend: {
38 position: 'top',
39 },
40 title: {
41 display: true,
42 text: args.title
43 }
44 }
45 });
46
47 return chart;
48
49}
6function drawChart(canvas, width, height) {
7 var data = [
8 { year: '1951 年', sales: 38 },
9 { year: '1952 年', sales: 52 },
10 { year: '1956 年', sales: 61 },
11 { year: '1957 年', sales: 145 },
12 { year: '1958 年', sales: 48 },
13 { year: '1959 年', sales: 38 },
14 { year: '1960 年', sales: 38 },
15 { year: '1962 年', sales: 38 },
16 ];
17 var chart = new F2.Chart({
18 el: canvas,
19 width,
20 height
21 });
22
23 chart.source(data, {
24 sales: {
25 tickCount: 5
26 }
27 });
28 chart.tooltip({
29 showItemMarker: false,
30 onShow: function(ev) {
31 var items = ev.items;
32 items[0].name = null;
33 items[0].name = items[0].title;
34 items[0].value = '¥ ' + items[0].value;
35 }
36 });
37 chart.interval().position('year*sales');
38 chart.render();
39}
45function drawChart(canvas, width, height) {
46 const data = [
47 {value: 63.4, city: 'New York', date: '2011-10-01'},
48 {value: 62.7, city: 'Alaska', date: '2011-10-01'},
49 {value: 72.2, city: 'Austin', date: '2011-10-01'},
50 {value: 58, city: 'New York', date: '2011-10-02'},
51 {value: 59.9, city: 'Alaska', date: '2011-10-02'},
52 {value: 67.7, city: 'Austin', date: '2011-10-02'},
53 {value: 53.3, city: 'New York', date: '2011-10-03'},
54 {value: 59.1, city: 'Alaska', date: '2011-10-03'},
55 {value: 69.4, city: 'Austin', date: '2011-10-03'},
56 // ...
57 ];
58 chart = new F2.Chart({
59 el: canvas,
60 width,
61 height
62 });
63
64 chart.source(data, {
65 date: {
66 range: [0, 1],
67 type: 'timeCat',
68 mask: 'MM-DD'
69 },
70 value: {
71 max: 300,
72 tickCount: 4
73 }
74 });
75 chart.axis('date', {
76 label(text, index, total) {
77 const textCfg = {};
78 if (index === 0) {
79 textCfg.textAlign = 'left';
80 }
81 if (index === total - 1) {
82 textCfg.textAlign = 'right';
83 }
84 return textCfg;
85 }
86 });
87 chart.area().position('date*value').color('city').adjust('stack');
88 chart.line().position('date*value').color('city').adjust('stack');
89 chart.render();
90 return chart;
91}
6function drawChart(canvas, width, height) {
7 const data = [
8 { year: '1951 年', sales: 38 },
9 { year: '1952 年', sales: 52 },
10 { year: '1956 年', sales: 61 },
11 { year: '1957 年', sales: 145 },
12 { year: '1958 年', sales: 48 },
13 { year: '1959 年', sales: 38 },
14 { year: '1960 年', sales: 38 },
15 { year: '1962 年', sales: 38 },
16 ];
17 chart = new F2.Chart({
18 el: canvas,
19 width,
20 height
21 });
22
23 chart.source(data, {
24 sales: {
25 tickCount: 5
26 }
27 });
28 chart.tooltip({
29 showItemMarker: false,
30 onShow(ev) {
31 const { items } = ev;
32 items[0].name = null;
33 items[0].name = items[0].title;
34 items[0].value = '¥ ' + items[0].value;
35 }
36 });
37 chart.interval().position('year*sales');
38 chart.render();
39
40 return chart;
41}
211function drawChart(labels, data) {
212 var ctx = document.getElementById('statusChart').getContext('2d');
213 var myChart = new Chart(ctx, {
214 type: 'bar',
215 data: {
216 labels: labels,
217 datasets: [{
218 label: '# of Containers',
219 data: data,
220 backgroundColor: [
221 'rgba(120,164,107, .2)',
222 'rgba(199, 192, 40, .2)',
223 'rgba(255, 0, 0, .2)',
224 'rgba(255, 0, 0, .2)',
225 ],
226 borderColor: [
227 'rgba(120,164,107, 1)',
228 'rgba(199, 192, 40, 1)',
229 'rgba(255, 0, 0, 1)',
230 'rgba(255, 0, 0, 1)',
231 ],
232 borderWidth: 1
233 }]
234 },
235 options: {
236 scales: {
237 yAxes: [{
238 ticks: {
239 beginAtZero: true
240 }
241 }]
242 }
243 }
244 });
245}

Related snippets