Ik heb een javascript om een staafdiagram te maken. In het diagram staan reeds getallen, maar ik wil die vervangen door een waarde uit een mysql database. hoe doe ik dat? simpel vervangen door $x en dan die de waarde geven mag niet. dit is het scriptje:
de getalletjes bij de y wil ik dus afhankelijk maken van een veldje in de database
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("schoothond", {
title:{
text:"Verkiezing van de Republikein van het Jaar 2016"
},
animationEnabled: true,
axisX:{
interval: 1,
gridThickness: 0,
labelFontSize: 10,
labelFontStyle: "normal",
labelFontWeight: "normal",
labelFontFamily: "Lucida Sans Unicode"
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)"
},
data: [
{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{y: 5, label: "Sweden" },
{y: 6, label: "Taiwan" },
{y: 7, label: "Russia" },
{y: 8, label: "Spain" },
{y: 8, label: "Brazil" },
{y: 8, label: "India" },
{y: 9, label: "Italy" },
{y: 9, label: "Australia" },
{y: 12, label: "Canada" },
{y: 13, label: "South Korea" },
{y: 13, label: "Netherlands" },
{y: 15, label: "Switzerland" },
{y: 28, label: "Britain" },
{y: 32, label: "Germany" },
{y: 32, label: "France" },
{y: 68, label: "Japan" },
{y: 73, label: "China"},
{y: 132, label: "US" }
]
}
]
});
chart.render();
}
</script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text:"Verkiezing van het schoothondje van Oranje 2016"
},
animationEnabled: true,
axisX:{
interval: 1,
gridThickness: 0,
labelFontSize: 10,
labelFontStyle: "normal",
labelFontWeight: "normal",
labelFontFamily: "Lucida Sans Unicode"
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)"
},
data: [
{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{y: 80, label: "Sweden" },
{y: 6, label: "Taiwan" },
{y: 7, label: "Russia" },
{y: 8, label: "Spain" },
{y: 8, label: "Brazil" },
{y: 8, label: "India" },
{y: 9, label: "Italy" },
{y: 9, label: "Australia" },
{y: 12, label: "Canada" },
{y: 13, label: "South Korea" },
{y: 13, label: "Netherlands" },
{y: 15, label: "Switzerland" },
{y: 28, label: "Britain" },
{y: 32, label: "Germany" },
{y: 32, label: "France" },
{y: 68, label: "Japan" },
{y: 73, label: "China"},
{y: 132, label: "US" }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
<?php $x=80; ?>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<br><br><br>
<center> <a href="/stemresultaat1.php">bekijk hier de resultaten van de verkiezing van de Republikein van het Jaar 2016</a></center>
</body>
</html>
de getalletjes bij de y wil ik dus afhankelijk maken van een veldje in de database
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("schoothond", {
title:{
text:"Verkiezing van de Republikein van het Jaar 2016"
},
animationEnabled: true,
axisX:{
interval: 1,
gridThickness: 0,
labelFontSize: 10,
labelFontStyle: "normal",
labelFontWeight: "normal",
labelFontFamily: "Lucida Sans Unicode"
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)"
},
data: [
{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{y: 5, label: "Sweden" },
{y: 6, label: "Taiwan" },
{y: 7, label: "Russia" },
{y: 8, label: "Spain" },
{y: 8, label: "Brazil" },
{y: 8, label: "India" },
{y: 9, label: "Italy" },
{y: 9, label: "Australia" },
{y: 12, label: "Canada" },
{y: 13, label: "South Korea" },
{y: 13, label: "Netherlands" },
{y: 15, label: "Switzerland" },
{y: 28, label: "Britain" },
{y: 32, label: "Germany" },
{y: 32, label: "France" },
{y: 68, label: "Japan" },
{y: 73, label: "China"},
{y: 132, label: "US" }
]
}
]
});
chart.render();
}
</script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text:"Verkiezing van het schoothondje van Oranje 2016"
},
animationEnabled: true,
axisX:{
interval: 1,
gridThickness: 0,
labelFontSize: 10,
labelFontStyle: "normal",
labelFontWeight: "normal",
labelFontFamily: "Lucida Sans Unicode"
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)"
},
data: [
{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{y: 80, label: "Sweden" },
{y: 6, label: "Taiwan" },
{y: 7, label: "Russia" },
{y: 8, label: "Spain" },
{y: 8, label: "Brazil" },
{y: 8, label: "India" },
{y: 9, label: "Italy" },
{y: 9, label: "Australia" },
{y: 12, label: "Canada" },
{y: 13, label: "South Korea" },
{y: 13, label: "Netherlands" },
{y: 15, label: "Switzerland" },
{y: 28, label: "Britain" },
{y: 32, label: "Germany" },
{y: 32, label: "France" },
{y: 68, label: "Japan" },
{y: 73, label: "China"},
{y: 132, label: "US" }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
<?php $x=80; ?>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<br><br><br>
<center> <a href="/stemresultaat1.php">bekijk hier de resultaten van de verkiezing van de Republikein van het Jaar 2016</a></center>
</body>
</html>
