var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'CSV data source (datapoint) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'csv',
105 | url: 'sample-datapoint.csv',
106 | delimiter: ',',
107 | rowMapping: 'datapoint',
108 | datapointLabels: true,
109 | datapointLabelMapping: {
110 | _dataset: 'dataset',
111 | _index: 'month',
112 | x: 'month',
113 | y: 'value'
114 | }
115 | }
116 | }
117 | }
118 | };
119 |
120 | window.onload = function() {
121 | var ctx = document.getElementById('myChart').getContext('2d');
122 | window.myChart = new Chart(ctx, config);
123 | };
124 | dataset,month,value 127 | Temperature,January,7 128 | Temperature,February,7 129 | Temperature,March,10 130 | Temperature,April,15 131 | Temperature,May,20 132 | Temperature,June,23 133 | Temperature,July,26 134 | Precipitation,January,8.1 135 | Precipitation,February,14.9 136 | Precipitation,March,41.0 137 | Precipitation,April,31.4 138 | Precipitation,May,42.6 139 | Precipitation,June,57.5 140 | Precipitation,July,36.0141 |
<head> 144 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 145 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 146 | </head> 147 | <body> 148 | <div> 149 | <canvas id="myChart"></canvas> 150 | </div> 151 | </body>152 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'CSV data source (dataset) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'csv',
105 | url: 'sample-dataset.csv',
106 | delimiter: ',',
107 | rowMapping: 'dataset',
108 | datasetLabels: true,
109 | indexLabels: true
110 | }
111 | }
112 | }
113 | };
114 |
115 | window.onload = function() {
116 | var ctx = document.getElementById('myChart').getContext('2d');
117 | window.myChart = new Chart(ctx, config);
118 | };
119 | ,January,February,March,April,May,June,July 122 | Temperature,7,7,10,15,20,23,26 123 | Precipitation,8.1,14.9,41.0,31.4,42.6,57.5,36.0124 |
<head> 127 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 128 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 129 | </head> 130 | <body> 131 | <div> 132 | <canvas id="myChart"></canvas> 133 | </div> 134 | </body>135 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'CSV data source (index) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'csv',
105 | url: 'sample-index.csv',
106 | delimiter: ',',
107 | rowMapping: 'index',
108 | datasetLabels: true,
109 | indexLabels: true
110 | }
111 | }
112 | }
113 | };
114 |
115 | window.onload = function() {
116 | var ctx = document.getElementById('myChart').getContext('2d');
117 | window.myChart = new Chart(ctx, config);
118 | };
119 | ,Temperature,Precipitation 122 | January,7,8.1 123 | February,7,14.9 124 | March,10,41.0 125 | April,15,31.4 126 | May,20,42.6 127 | June,23,57.5 128 | July,26,36.0129 |
<head> 132 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 133 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 134 | </head> 135 | <body> 136 | <div> 137 | <canvas id="myChart"></canvas> 138 | </div> 139 | </body>140 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'JSON data source (datapoint) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'json',
105 | url: 'sample-datapoint.json',
106 | rowMapping: 'datapoint',
107 | datapointLabelMapping: {
108 | _dataset: 'dataset',
109 | _index: 'month',
110 | x: 'month',
111 | y: 'value'
112 | },
113 | data: '*.*'
114 | }
115 | }
116 | }
117 | };
118 |
119 | window.onload = function() {
120 | var ctx = document.getElementById('myChart').getContext('2d');
121 | window.myChart = new Chart(ctx, config);
122 | };
123 | [{
126 | "dataset": "Temperature",
127 | "month": "January",
128 | "value": 7
129 | }, {
130 | "dataset": "Temperature",
131 | "month": "February",
132 | "value": 7
133 | }, {
134 | "dataset": "Temperature",
135 | "month": "March",
136 | "value": 10
137 | }, {
138 | "dataset": "Temperature",
139 | "month": "April",
140 | "value": 15
141 | }, {
142 | "dataset": "Temperature",
143 | "month": "May",
144 | "value": 20
145 | }, {
146 | "dataset": "Temperature",
147 | "month": "June",
148 | "value": 23
149 | }, {
150 | "dataset": "Temperature",
151 | "month": "July",
152 | "value": 26
153 | }, {
154 | "dataset": "Precipitation",
155 | "month": "January",
156 | "value": 8.1
157 | }, {
158 | "dataset": "Precipitation",
159 | "month": "February",
160 | "value": 14.9
161 | }, {
162 | "dataset": "Precipitation",
163 | "month": "March",
164 | "value": 41.0
165 | }, {
166 | "dataset": "Precipitation",
167 | "month": "April",
168 | "value": 31.4
169 | }, {
170 | "dataset": "Precipitation",
171 | "month": "May",
172 | "value": 42.6
173 | }, {
174 | "dataset": "Precipitation",
175 | "month": "June",
176 | "value": 57.5
177 | }, {
178 | "dataset": "Precipitation",
179 | "month": "July",
180 | "value": 36.0
181 | }]
182 | <head> 185 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 186 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 187 | </head> 188 | <body> 189 | <div> 190 | <canvas id="myChart"></canvas> 191 | </div> 192 | </body>193 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'JSON data source (dataset) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'json',
105 | url: 'sample-dataset.json',
106 | rowMapping: 'dataset',
107 | indexLabels: 'labels',
108 | datasetLabels: 'datasets[*].label',
109 | data: 'datasets[*].data'
110 | }
111 | }
112 | }
113 | };
114 |
115 | window.onload = function() {
116 | var ctx = document.getElementById('myChart').getContext('2d');
117 | window.myChart = new Chart(ctx, config);
118 | };
119 | {
122 | "labels": ["January", "February", "March", "April", "May", "June", "July"],
123 | "datasets": [{
124 | "label": "Temperature",
125 | "data": [7, 7, 10, 15, 20, 23, 26]
126 | }, {
127 | "label": "Precipitation",
128 | "data": [8.1, 14.9, 41.0, 31.4, 42.6, 57.5, 36.0]
129 | }]
130 | }
131 | <head> 134 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 135 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 136 | </head> 137 | <body> 138 | <div> 139 | <canvas id="myChart"></canvas> 140 | </div> 141 | </body>142 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'JSON data source (index) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'json',
105 | url: 'sample-index.json',
106 | rowMapping: 'index',
107 | datasetLabels: 'labels',
108 | indexLabels: 'indices[*].label',
109 | data: 'indices[*].data'
110 | }
111 | }
112 | }
113 | };
114 |
115 | window.onload = function() {
116 | var ctx = document.getElementById('myChart').getContext('2d');
117 | window.myChart = new Chart(ctx, config);
118 | };
119 | {
122 | "labels": ["Temperature", "Precipitation"],
123 | "indices": [{
124 | "label": "January",
125 | "data": [7, 8.1]
126 | }, {
127 | "label": "February",
128 | "data": [7, 14.9]
129 | }, {
130 | "label": "March",
131 | "data": [10, 41.0]
132 | }, {
133 | "label": "April",
134 | "data": [15, 31.4]
135 | }, {
136 | "label": "May",
137 | "data": [20, 42.6]
138 | }, {
139 | "label": "June",
140 | "data": [23, 57.5]
141 | }, {
142 | "label": "July",
143 | "data": [26, 36.0]
144 | }]
145 | }
146 | <head> 149 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 150 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 151 | </head> 152 | <body> 153 | <div> 154 | <canvas id="myChart"></canvas> 155 | </div> 156 | </body>157 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'JSON Lines data source (datapoint) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'jsonl',
105 | url: 'sample-datapoint.jsonl',
106 | rowMapping: 'datapoint',
107 | datapointLabelMapping: {
108 | _dataset: 'dataset',
109 | _index: 'month',
110 | x: 'month',
111 | y: 'value'
112 | },
113 | data: '*.*'
114 | }
115 | }
116 | }
117 | };
118 |
119 | window.onload = function() {
120 | var ctx = document.getElementById('myChart').getContext('2d');
121 | window.myChart = new Chart(ctx, config);
122 | };
123 | {"dataset": "Temperature", "month": "January", "value": 7}
126 | {"dataset": "Temperature", "month": "February", "value": 7}
127 | {"dataset": "Temperature", "month": "March", "value": 10}
128 | {"dataset": "Temperature", "month": "April", "value": 15}
129 | {"dataset": "Temperature", "month": "May", "value": 20}
130 | {"dataset": "Temperature", "month": "June", "value": 23}
131 | {"dataset": "Temperature", "month": "July", "value": 26}
132 | {"dataset": "Precipitation", "month": "January", "value": 8.1}
133 | {"dataset": "Precipitation", "month": "February", "value": 14.9}
134 | {"dataset": "Precipitation", "month": "March", "value": 41.0}
135 | {"dataset": "Precipitation", "month": "April", "value": 31.4}
136 | {"dataset": "Precipitation", "month": "May", "value": 42.6}
137 | {"dataset": "Precipitation", "month": "June", "value": 57.5}
138 | {"dataset": "Precipitation", "month": "July", "value": 36.0}
139 | <head> 142 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 143 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 144 | </head> 145 | <body> 146 | <div> 147 | <canvas id="myChart"></canvas> 148 | </div> 149 | </body>150 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'JSON Lines data source (dataset) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'jsonl',
105 | url: 'sample-dataset.jsonl',
106 | rowMapping: 'dataset',
107 | datasetLabels: '*.label',
108 | data: '*.data.*'
109 | }
110 | }
111 | }
112 | };
113 |
114 | window.onload = function() {
115 | var ctx = document.getElementById('myChart').getContext('2d');
116 | window.myChart = new Chart(ctx, config);
117 | };
118 | {"label": "Temperature", "data": {"January": 7, "February": 7, "March": 10, "April": 15, "May": 20, "June": 23, "July": 26}}
121 | {"label": "Precipitation", "data": {"January": 8.1, "February": 14.9, "March": 41.0, "April": 31.4, "May": 42.6, "June": 57.5, "July": 36.0}}
122 | <head> 125 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 126 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 127 | </head> 128 | <body> 129 | <div> 130 | <canvas id="myChart"></canvas> 131 | </div> 132 | </body>133 |
var chartColors = {
46 | red: 'rgb(255, 99, 132)',
47 | blue: 'rgb(54, 162, 235)'
48 | };
49 |
50 | var color = Chart.helpers.color;
51 | var config = {
52 | type: 'bar',
53 | data: {
54 | datasets: [{
55 | type: 'line',
56 | yAxisID: 'temperature',
57 | backgroundColor: 'transparent',
58 | borderColor: chartColors.red,
59 | pointBackgroundColor: chartColors.red,
60 | tension: 0,
61 | fill: false
62 | }, {
63 | yAxisID: 'precipitation',
64 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
65 | borderColor: 'transparent'
66 | }]
67 | },
68 | plugins: [ChartDataSource],
69 | options: {
70 | title: {
71 | display: true,
72 | text: 'JSON Lines data source (index) sample'
73 | },
74 | scales: {
75 | xAxes: [{
76 | scaleLabel: {
77 | display: true,
78 | labelString: 'Month'
79 | }
80 | }],
81 | yAxes: [{
82 | id: 'temperature',
83 | gridLines: {
84 | drawOnChartArea: false
85 | },
86 | scaleLabel: {
87 | display: true,
88 | labelString: 'Temperature (°C)'
89 | }
90 | }, {
91 | id: 'precipitation',
92 | position: 'right',
93 | gridLines: {
94 | drawOnChartArea: false
95 | },
96 | scaleLabel: {
97 | display: true,
98 | labelString: 'Precipitation (mm)'
99 | }
100 | }]
101 | },
102 | plugins: {
103 | datasource: {
104 | type: 'jsonl',
105 | url: 'sample-index.jsonl',
106 | rowMapping: 'index',
107 | indexLabels: '*.label',
108 | data: '*.data.*'
109 | }
110 | }
111 | }
112 | };
113 |
114 | window.onload = function() {
115 | var ctx = document.getElementById('myChart').getContext('2d');
116 | window.myChart = new Chart(ctx, config);
117 | };
118 | {"label": "January", "data": {"Temperature": 7, "Precipitation": 8.1}}
121 | {"label": "February", "data": {"Temperature": 7, "Precipitation": 14.9}}
122 | {"label": "March", "data": {"Temperature": 10, "Precipitation": 41.0}}
123 | {"label": "April", "data": {"Temperature": 15, "Precipitation": 31.4}}
124 | {"label": "May", "data": {"Temperature": 20, "Precipitation": 42.6}}
125 | {"label": "June", "data": {"Temperature": 23, "Precipitation": 57.5}}
126 | {"label": "July", "data": {"Temperature": 26, "Precipitation": 36.0}}
127 | <head> 130 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 131 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 132 | </head> 133 | <body> 134 | <div> 135 | <canvas id="myChart"></canvas> 136 | </div> 137 | </body>138 |
var chartColors = {
54 | red: 'rgb(255, 99, 132)',
55 | blue: 'rgb(54, 162, 235)'
56 | };
57 |
58 | var color = Chart.helpers.color;
59 | var config = {
60 | type: 'bar',
61 | data: {
62 | datasets: [{
63 | type: 'line',
64 | yAxisID: 'temperature',
65 | backgroundColor: 'transparent',
66 | borderColor: chartColors.red,
67 | pointBackgroundColor: chartColors.red,
68 | tension: 0,
69 | fill: false
70 | }, {
71 | yAxisID: 'precipitation',
72 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
73 | borderColor: 'transparent'
74 | }]
75 | },
76 | plugins: [ChartDataSource],
77 | options: {
78 | title: {
79 | display: true,
80 | text: 'Sheet data source (datapoint) sample'
81 | },
82 | scales: {
83 | xAxes: [{
84 | scaleLabel: {
85 | display: true,
86 | labelString: 'Month'
87 | }
88 | }],
89 | yAxes: [{
90 | id: 'temperature',
91 | gridLines: {
92 | drawOnChartArea: false
93 | },
94 | scaleLabel: {
95 | display: true,
96 | labelString: 'Temperature (°C)'
97 | }
98 | }, {
99 | id: 'precipitation',
100 | position: 'right',
101 | gridLines: {
102 | drawOnChartArea: false
103 | },
104 | scaleLabel: {
105 | display: true,
106 | labelString: 'Precipitation (mm)'
107 | }
108 | }]
109 | },
110 | plugins: {
111 | datasource: {
112 | type: 'sheet',
113 | url: 'sample-datapoint.xlsx',
114 | rowMapping: 'datapoint',
115 | datapointLabels: 'Sheet1!A1:C1',
116 | datapointLabelMapping: {
117 | _dataset: 'dataset',
118 | _index: 'month',
119 | x: 'month',
120 | y: 'value'
121 | },
122 | data: 'Sheet1!A2:C15'
123 | }
124 | }
125 | }
126 | };
127 |
128 | window.onload = function() {
129 | var ctx = document.getElementById('myChart').getContext('2d');
130 | window.myChart = new Chart(ctx, config);
131 | };
132 | | 138 | | A | 139 |B | 140 |C | 141 |
|---|---|---|---|
| 1 | 146 |dataset | 147 |month | 148 |value | 149 |
| 2 | 152 |Temperature | 153 |January | 154 |7 | 155 |
| 3 | 158 |Temperature | 159 |February | 160 |7 | 161 |
| 4 | 164 |Temperature | 165 |March | 166 |10 | 167 |
| 5 | 170 |Temperature | 171 |April | 172 |15 | 173 |
| 6 | 176 |Temperature | 177 |May | 178 |20 | 179 |
| 7 | 182 |Temperature | 183 |June | 184 |23 | 185 |
| 8 | 188 |Temperature | 189 |July | 190 |26 | 191 |
| 9 | 194 |Precipitation | 195 |January | 196 |8.1 | 197 |
| 10 | 200 |Precipitation | 201 |February | 202 |14.9 | 203 |
| 11 | 206 |Precipitation | 207 |March | 208 |41.0 | 209 |
| 12 | 212 |Precipitation | 213 |April | 214 |31.4 | 215 |
| 13 | 218 |Precipitation | 219 |May | 220 |42.6 | 221 |
| 14 | 224 |Precipitation | 225 |June | 226 |57.5 | 227 |
| 15 | 230 |Precipitation | 231 |July | 232 |36.0 | 233 |
<head> 239 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 240 | <script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script> 241 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 242 | </head> 243 | <body> 244 | <div> 245 | <canvas id="myChart"></canvas> 246 | </div> 247 | </body>248 |
var chartColors = {
54 | red: 'rgb(255, 99, 132)',
55 | blue: 'rgb(54, 162, 235)'
56 | };
57 |
58 | var color = Chart.helpers.color;
59 | var config = {
60 | type: 'bar',
61 | data: {
62 | datasets: [{
63 | type: 'line',
64 | yAxisID: 'temperature',
65 | backgroundColor: 'transparent',
66 | borderColor: chartColors.red,
67 | pointBackgroundColor: chartColors.red,
68 | tension: 0,
69 | fill: false
70 | }, {
71 | yAxisID: 'precipitation',
72 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
73 | borderColor: 'transparent'
74 | }]
75 | },
76 | plugins: [ChartDataSource],
77 | options: {
78 | title: {
79 | display: true,
80 | text: 'Sheet data source (dataset) sample'
81 | },
82 | scales: {
83 | xAxes: [{
84 | scaleLabel: {
85 | display: true,
86 | labelString: 'Month'
87 | }
88 | }],
89 | yAxes: [{
90 | id: 'temperature',
91 | gridLines: {
92 | drawOnChartArea: false
93 | },
94 | scaleLabel: {
95 | display: true,
96 | labelString: 'Temperature (°C)'
97 | }
98 | }, {
99 | id: 'precipitation',
100 | position: 'right',
101 | gridLines: {
102 | drawOnChartArea: false
103 | },
104 | scaleLabel: {
105 | display: true,
106 | labelString: 'Precipitation (mm)'
107 | }
108 | }]
109 | },
110 | plugins: {
111 | datasource: {
112 | type: 'sheet',
113 | url: 'sample-dataset.xlsx',
114 | rowMapping: 'dataset',
115 | datasetLabels: 'Sheet1!A2:A3',
116 | indexLabels: 'Sheet1!B1:H1',
117 | data: 'Sheet1!B2:H3'
118 | }
119 | }
120 | }
121 | };
122 |
123 | window.onload = function() {
124 | var ctx = document.getElementById('myChart').getContext('2d');
125 | window.myChart = new Chart(ctx, config);
126 | };
127 | | 133 | | A | 134 |B | 135 |C | 136 |D | 137 |E | 138 |F | 139 |G | 140 |H | 141 |
|---|---|---|---|---|---|---|---|---|
| 1 | 146 |147 | | January | 148 |February | 149 |March | 150 |April | 151 |May | 152 |June | 153 |July | 154 |
| 2 | 157 |Temperature | 158 |7 | 159 |7 | 160 |10 | 161 |15 | 162 |20 | 163 |23 | 164 |26 | 165 |
| 3 | 168 |Precipitation | 169 |8.1 | 170 |14.9 | 171 |41.0 | 172 |31.4 | 173 |42.6 | 174 |57.5 | 175 |36.0 | 176 |
<head> 182 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 183 | <script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script> 184 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 185 | </head> 186 | <body> 187 | <div> 188 | <canvas id="myChart"></canvas> 189 | </div> 190 | </body>191 |
var chartColors = {
54 | red: 'rgb(255, 99, 132)',
55 | blue: 'rgb(54, 162, 235)'
56 | };
57 |
58 | var color = Chart.helpers.color;
59 | var config = {
60 | type: 'bar',
61 | data: {
62 | datasets: [{
63 | type: 'line',
64 | yAxisID: 'temperature',
65 | backgroundColor: 'transparent',
66 | borderColor: chartColors.red,
67 | pointBackgroundColor: chartColors.red,
68 | tension: 0,
69 | fill: false
70 | }, {
71 | yAxisID: 'precipitation',
72 | backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
73 | borderColor: 'transparent'
74 | }]
75 | },
76 | plugins: [ChartDataSource],
77 | options: {
78 | title: {
79 | display: true,
80 | text: 'Sheet data source (index) sample'
81 | },
82 | scales: {
83 | xAxes: [{
84 | scaleLabel: {
85 | display: true,
86 | labelString: 'Month'
87 | }
88 | }],
89 | yAxes: [{
90 | id: 'temperature',
91 | gridLines: {
92 | drawOnChartArea: false
93 | },
94 | scaleLabel: {
95 | display: true,
96 | labelString: 'Temperature (°C)'
97 | }
98 | }, {
99 | id: 'precipitation',
100 | position: 'right',
101 | gridLines: {
102 | drawOnChartArea: false
103 | },
104 | scaleLabel: {
105 | display: true,
106 | labelString: 'Precipitation (mm)'
107 | }
108 | }]
109 | },
110 | plugins: {
111 | datasource: {
112 | type: 'sheet',
113 | url: 'sample-index.xlsx',
114 | rowMapping: 'index',
115 | datasetLabels: 'Sheet1!B1:C1',
116 | indexLabels: 'Sheet1!A2:A8',
117 | data: 'Sheet1!B2:C8'
118 | }
119 | }
120 | }
121 | };
122 |
123 | window.onload = function() {
124 | var ctx = document.getElementById('myChart').getContext('2d');
125 | window.myChart = new Chart(ctx, config);
126 | };
127 | | 133 | | A | 134 |B | 135 |C | 136 |
|---|---|---|---|
| 1 | 141 |142 | | Temperature | 143 |Precipitation | 144 |
| 2 | 147 |January | 148 |7 | 149 |8.1 | 150 |
| 3 | 153 |February | 154 |7 | 155 |14.9 | 156 |
| 4 | 159 |March | 160 |10 | 161 |41.0 | 162 |
| 5 | 165 |April | 166 |15 | 167 |31.4 | 168 |
| 6 | 171 |May | 172 |20 | 173 |42.6 | 174 |
| 7 | 177 |June | 178 |23 | 179 |57.5 | 180 |
| 8 | 183 |July | 184 |26 | 185 |36.0 | 186 |
<head> 192 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 193 | <script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script> 194 | <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> 195 | </head> 196 | <body> 197 | <div> 198 | <canvas id="myChart"></canvas> 199 | </div> 200 | </body>201 |