score:0
...
$data = [];
// set all data to d.
foreach ($result as $d) {
$data[] = $d;
}
?>
in chart.js
var jarray = <?php echo implode(',', $data); ?>
score:0
after alot of reasearch of other chart libaries i noticed highcharts used echo join()
and got it to look like this
here is my solution
<div class="row bg-dark">
<div class="col-12 border">
<canvas id="mychart"></canvas>
</div>
</div>
<div class="container">
<div>
<?php
$sth = $db->prepare("select actual from csvhoejde1");
$sth->execute();
/* fetch all of the remaining rows in the result set */
$result = $sth->fetchall(pdo::fetch_column, 0);
// $result = explode("@", implode(",@", $result));
// print_r for at se resultaterne.
echo'<pre>';
print_r($result);
echo'</pre>';
?>
<div>
</div>
<!----------------------mychart---------------------->
<script src="./assets/charts/dist/chart.js"></script>
<script>
var canvas = document.getelementbyid("mychart");
var ctx = canvas.getcontext("2d");
var horizonallineplugin = {
afterdraw: function(chartinstance) {
var yscale = chartinstance.scales["y-axis-0"];
var canvas = chartinstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartinstance.options.horizontalline) {
for (index = 0; index < chartinstance.options.horizontalline.length; index++) {
line = chartinstance.options.horizontalline[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yvalue = yscale.getpixelforvalue(line.y);
} else {
yvalue = 0;
}
ctx.linewidth = 3;
if (yvalue) {
ctx.beginpath();
ctx.moveto(0, yvalue);
ctx.lineto(canvas.width, yvalue);
ctx.strokestyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillstyle = style;
ctx.filltext(line.text, 0, yvalue + ctx.linewidth);
}
}
return;
};
}
};
chart.pluginservice.register(horizonallineplugin);
var data = {
labels: ["1", "2", "3", "4", "5", "6", "7","8", "9", "10", "11", "12", "13", "14","15", "16", "17", "18", "19", "20", "21", "22", "23", "24","25", "26", "27", "28", "29", "30", "31", "32", "33", "31"],
datasets: [{
label: "my first dataset",
fill: false,
linetension: 0,
backgroundcolor: "rgba(75,192,192,0.4)",
bordercolor: "rgba(75,192,192,1)",
bordercapstyle: 'butt',
borderdash: [],
borderdashoffset: 0.0,
borderjoinstyle: 'miter',
pointbordercolor: "rgba(75,192,192,1)",
pointbackgroundcolor: "#fff",
pointborderwidth: 1,
pointhoverradius: 5,
pointhoverbackgroundcolor: "rgba(75,192,192,1)",
pointhoverbordercolor: "rgba(220,220,220,1)",
pointhoverborderwidth: 2,
pointradius: 4,
pointhitradius: 10,
data: [<?php echo join($result, ',') ?>],
}]
};
var mychart = new chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalline": [{
"y": 140,
"style": "rgba(255, 0, 0, .4)",
}, {
"y": 120,
"style": "#00ffff",
}]
}
});
</script>
Source: stackoverflow.com
Related Query
- Chart.js variable data how can i make this work?
- How do I destroy/update Chart Data in this chart.js code example?
- how can I make selected data is highlighted on chart js?
- How can I make two of my lines in Chart JS thicker
- How can I make a stepline or stepped chart in chart.js or D3?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How can I make line on chart thinner?
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How can I make streaming chart with react?
- how labels in chartjs can make data invisible
- How can I pass my sqlite data to django, and make chart?
- How can i display my data in a chart using chart js
- How can make my chart.js dynamic using data from database
- Chart.js How can I embed additional values to each data point in radar chart
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- How can have variable data be from a url in javascript
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- How can I add new data points to an existing chart with chart.js?
- Chart.js how to make chart only show the most recent data
- How can I assign dynamic data from service via subscribe to doughnut chart in angular?
- How to mapping variable data for pie chart (react.js)
- How to make dynamic chart with the next view? What libraries allows to customise exactly this like in my design?
- How can I build some chart with Chart.js and ng2-charts using an array of revenus & budgets per month date as Data source?
- How can I make lines fully connected in a multi-line chart even when one dataset is more sparse than another?
- How can i fix my code so i can read my data
- How can i do this chart in react?
- Cannot make my chart to work with data from mongoDB
- How can I get A radar chart like this by chart.js
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
More Query from same tag
- Ionic: Doughnut Chart's legend occupies complete card in mobile, while on big screen chart and legend looks fine
- update my chartjs form without refreshing page
- How to add images as labels to Canvas Charts using chart.js
- No chart appears - Chart.js
- Polar Area onclick event
- Can't find the chart.js v2 docs
- Limit labesl on chart.js bar chart
- how to display datetime list in graph using chart.js
- Chart.js - Line charts: draw points between grid lines
- Convert a dynamic piechart from CanvasJS to Google Charts?
- Chart.js and Angular - Click Event on Chart
- Why doesn't my donut chart, created with Chart.js, appear?
- Chart.js how to create chart wirhout y-axis for two data sets
- Unable to see the lines in chart.js
- Chart.js How to align two X-axis in bar chart?
- How can I add new data points to an existing chart with chart.js?
- ChartJS horizontal label are 1-2px clipped
- How can I show chartjs datalabels only last bar?
- How do I use NuGet to install ChartJS?
- How to remove strikethrough from label once click on legend
- Chart.js - Show new data on button click
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- how to put "%" in chart pie (chartjs)
- turn off point values in radar chart
- set y-axis scale manually in a bar chart using angular-chart.js
- Chart js 2.x renders the canvas invisible
- How to add padding to the vertical scale (X-axis) in Chart.js?
- Chart JS: All Values Displayed on x-axis After Callback Conversion
- Is there a way to highlight a line on a line graph with hover?
- How to sort stacked bar chart on certain value of bar in charts.js