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 |