Hello I did this code using javascript, chart.js and html & css :
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="line-chart" width="800" height="450"></canvas>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id = "Global">
<div id = "right">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id = "left">
<script>
var ctx = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
/* labels: [18.123,46.8603108462,75.5976216923,104.334932538] */
datasets: [{
data: [{'y': 426777.148122,'x': 18.123},
{'y': 258927.721326,'x': 46.8603108462},
{'y': 176174.771954,'x': 75.5976216923},
{'y': 129604.15967,'x': 104.334932538},
{'y': 101328.238625,'x': 133.072243385}],
label: "Model",
borderColor: "#3e95cd",
fill: false
}, {
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328},
{x: 22.0, y: 410452.691467}],
type: 'line'
}]
},
options: {
title:{
display: true,
text:"Tools"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
})
</script>
</div>
</div>
</body>
</html>
Actually when I look at the result in a browser I see the javascript above the <div id = "right"> whereas I would like to have the javascript at the left and the <div id = "right"> at the right.
Here is my css :
#Global
{
width:100%;
}
#Global #left {
float:left;
width:60%;
}
#Global #right {
margin-left:60%
}
I thought It will work but it is not the case.
Thank you for your help !
Aucun commentaire:
Enregistrer un commentaire