So I've made this chart.js on my website, but one of my users said: The new bars showing the status for run tests is now too narrow, making it almost impossible to identify which one is hovered over.
How can I make it size better to a 3440x1440 screen, zoom at 100% in Chrome?
Thought about making the css size 80% width, and then no height. So it would fit the page, but then is was a veeeery long graph on a 3440x1440 screen.
The chart is this:
.canvasStyle {
height: 400px;
width: 900px;
}
<div class="row justify-content-center">
<div class="canvasStyle">
<canvas id='chart_1' ></canvas>
</div>
</div>
<script>
var TestInformation = <?php echo json_encode($TestInformation); ?>;
var pass = <?php echo json_encode($pass); ?>;
var fail = <?php echo json_encode($fail); ?>;
var error = <?php echo json_encode($error); ?>;
var notrun = <?php echo json_encode($notrun); ?>;
var na = <?php echo json_encode($na); ?>;
var version = <?php echo json_encode($version); ?>;
var title = <?php echo json_encode($title); ?>;
searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na);
</script>
function searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na) {
// Display the array elements
window.onload = function() {
var xValues = TestInformation;
new Chart("chart_1", {
type: 'bar',
data: {
labels: xValues,
datasets: [{
label: 'Passed',
data: pass,
backgroundColor: 'rgb(150,238,144)'
},
{
label: 'Failed',
data: fail,
backgroundColor: 'rgb(204,0,0)'
},
{
label: 'Not Run',
data: notrun,
backgroundColor: 'rgb(0,109,204)'
},
{
label: 'Error',
data: error,
backgroundColor: 'rgb(204,112,0)'
},
{
label: 'NA',
data: na,
backgroundColor: 'rgb(33,33,33)'
}
]
},
options: {
title: {
display: true,
text: title
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
display: false
}
}],
yAxes: [{
stacked: true,
ticks: {
maxTicksLimit: 5,
min: 0,
beginAtZero: true,
userCallback: function(label, index, labels) {
if (Math.floor(label) === label) {
return label;
}
},
}
}]
}
}
});
};
}
Okay there you have it:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive:true,
maintainAspectRatio:false,
scales: {
y: {
beginAtZero: true
}
}
}
});
.overflow-auto-size{
width:400px;
heigth:50px;
overflow:auto;
}
.big{
width:1000px;
heigth:50px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<div class="overflow-auto-size">
<div class="big">
<canvas id="myChart"></canvas>
</div>
</div>
Related
I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.
I want to make image float above bar chart but when I acheived it it's not always show,It display only when mouseover on the bar and error 404 keeps appear on log
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
<script>
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
// data: [25, 59, 80, 76],
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
// layout: {
// padding: {
// top: 30
// }
// },
// legend: {
// display: false
// },
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
}
});
how can I make image always show on bar without mouseover and make error disappeared
I created this piechart using chartsjs. As of now, if you run the snippet, I am able to display my labels the following way:
Uno\Company 1
19
(56%)
However, I would love to display Company text underneath, so that it can be displayed like this:
Uno
Company1
19
(56%)
I tried creating a separate array: label2: ["Company1", "Company2", "Company3"]
Then in the callback, I added a new function, which i thought would give me the other label beneath, but no luck. Here is the code I used for that:
title2: function(tooltipItem, data, label2){
return data['label2'][tooltipItem[0]['index']]
}
Can anyone help me out?
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
label1: ["Uno\\Company1", "Dos\\Company2", "Tres\\Company3"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, data, label1, label2) {
return data ['label1'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: function(tooltipItem, data) {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
return '(' + percent + '%)';
}
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
}
});
<div>
<canvas id="myChart" height="100"></canvas>
<div id="chartjs-tooltip">
<table></table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
</script>
Simply change label1 from an array of strings to an array of arrays:
label1: [["Uno", "Company1"], ["Dos", "Company2"], ["Tres", "Company3"]]
Chart.js will treat separate array items as separate lines.
I am fairly new to Chart.js and I have tried a lot of different ways of doing this but I just can not seem to resolve loading data from JSON in to a bar type chart.
I am trying to display a chart of monthly expenses with latest version of Chart.js.
The JSON string is as follows:
[{"month":"Jan","amount":"0.00"},{"month":"Feb","amount":"0.00"},{"month":"Mar","amount":"100.00"},{"month":"Apr","amount":"0.00"},{"month":"May","amount":"0.00"},{"month":"Jun","amount":"977.00"},{"month":"Jul","amount":"0.00"},{"month":"Aug","amount":"0.00"},{"month":"Sep","amount":"0.00"},{"month":"Oct","amount":"0.00"},{"month":"Nov","amount":"0.00"},{"month":"Dec","amount":"0.00"}]
My code is as follows:
$(function () {
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
if( $("#ChartExpenseBar").length > 0 ){
$.ajax({
type: 'POST',
url: '/expenses/',
data: {'expense_chart': 'monthly'},
success: function(data) {
var months = [];
var amount = [];
for (var i in data) {
months.push(data[i].month);
amount.push(data[i].amount);
}
var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
//labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: months,
datasets: [{
label: 'Monthly expenses',
backgroundColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderWidth: 1,
data: amount
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return "£" + tooltipItem.yLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
// Convert the array to a string and format the output
value = value.join('.');
return '£' + value;
}
}
}]
}
}
});
},
error: function() {
alert("There is a problem with loading the chart!");
}
});
}
});
I can most likely imagine myself doing something very silly that is causing an undefined error, and I would love to see someone help me please.
Much appreciated and thank you.
Your chart does a POST?
Try something along that lines:
$.ajax({
url: '/expenses/',
async: false,
dataType: 'json',
type: "GET",
success: function (d) {
chartData = {
labels: d.AxisLabels,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: d.DataSets[0]
}
]
};
max = Math.max.apply(Math, d.DataSets[0]);
steps = 10;
respondCanvas();
}
});
};
Minimal reproduction of your code seems to indicate that it is working fine, except the 2 options responsive and maintainAspectRatio (they works fine if the chart is contained in a div). Copy and paste as a new html file into your web server to view.
Key changes made from your sample code:
AJAX API call changed to GET from ./
Added fake success data
Note: responsive and maintainAspectRatio seems to cause the chart to "tremble", unless the chart is wrapped in a div
The problem could lie in elsewhere, maybe in your server response?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" integrity="sha256-JG6hsuMjFnQ2spWq0UiaDRJBaarzhFbUxiUTxQDA9Lk=" crossorigin="anonymous"></script>
<div style="width:500px;">
<canvas id="ChartExpenseBar" width="200" height="200"></canvas>
</div>
<script>
$(function () {
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
if( $("#ChartExpenseBar").length > 0 ){
$.ajax({
type: 'GET',
url: './',
data: {'expense_chart': 'monthly'},
success: function(data) {
var months = [];
var amount = [];
// fill with fake data
data = [{"month":"Jan","amount":"0.00"},{"month":"Feb","amount":"0.00"},{"month":"Mar","amount":"100.00"},{"month":"Apr","amount":"0.00"},{"month":"May","amount":"0.00"},{"month":"Jun","amount":"977.00"},{"month":"Jul","amount":"0.00"},{"month":"Aug","amount":"0.00"},{"month":"Sep","amount":"0.00"},{"month":"Oct","amount":"0.00"},{"month":"Nov","amount":"0.00"},{"month":"Dec","amount":"0.00"}];
for (var i in data) {
months.push(data[i].month);
amount.push(data[i].amount);
}
var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
//labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: months,
datasets: [{
label: 'Monthly expenses',
backgroundColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderWidth: 1,
data: amount
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return "£" + tooltipItem.yLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
// Convert the array to a string and format the output
value = value.join('.');
return '£' + value;
}
}
}]
}
}
});
},
error: function() {
alert("There is a problem with loading the chart!");
}
});
}
});
</script>
In case anyone finds themselves in a similar position, I have highlighted the answer to the above problem below - thank you to wp78de and Edwin.
$(function () {
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
if( $("#ChartExpenseBar").length > 0 ){
$.ajax({
type: 'GET',
async: false,
dataType: 'json',
url: '/expenses/',
data: {'expense_chart': 'monthly'},
success: function(data) {
var months = [];
var amount = [];
for (var i in data) {
months.push(data[i].month);
amount.push(data[i].amount);
}
var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: months,
datasets: [{
label: 'Monthly expenses',
backgroundColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderWidth: 1,
data: amount
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return "£" + tooltipItem.yLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
// Convert the array to a string and format the output
value = value.join('.');
return '£' + value;
}
}
}]
}
}
});
},
error: function() {
alert("There is a problem with loading the chart!");
}
});
}
});
I have a pie chart made with chart.js and currently i'm wondering if its possible to only have a border for the outside of the circle / arc like so:
I tried the following configurations but it applies border the to the whole segment.
options: {
elements: {
arc: {
borderWidth: 0
}
}
}
and also:
data: {
datasets: [{
data: [male_data , female_data],
backgroundColor: pieColors1,
borderWidth: [10, 0, 0, 0, 0]
}]
},
but this is what im getting:
I guess you have to create your own color image (Solid color with white strip on top) and pass it in as a canvas image.
Below is a modified example I've made based on the sample given from the chart.js documentation and a random picture found on the net.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var img = new Image();
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg';
img.onload = function() {
var ctx = document.getElementById("myChart").getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 10)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
fillPattern
],
borderColor: [
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var img = new Image();
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg';
img.onload = function() {
var ctx = document.getElementById("myChart").getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 10)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
fillPattern
],
borderColor: [
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>