PHP Chart Js Load Mysql and Interface - javascript

This is My source ViewGraph.php
<?php
$datesGraph = array();
$Moneyss = array();
$SQL = "select right(DateTransaksi,2) as Dates, SUM(AllMoney ) as Money from view_resume_transaksi
where DateTransaksi between '20160401' and '20160420' group by DateTransaksi order by DateTransaksi asc" ;
$hasil=sqlsrv_query($conn, $SQL) or die($SQL . "<br>" .print_r( sqlsrv_errors(), true)) ;
while($row = sqlsrv_fetch_array($hasil)){
$Moneyss[$row[0]] = (int)$row[1];
$datesGraph[]=$row['tgl'];
$Moneyss[]=$row['Money'];
}
?>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : <?=json_encode($datesGraph);?>,
datasets : [
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : <?=json_encode($Moneyss);?>
}
]
}
window.onload = function(){
showGrafik();
}
function showGrafik(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
and i have this in the bottom
<td> <label align="left">Choose Date</label> <input type='text' id='date1_g' name='date1_g' size='12' value="<?php echo date('d-m-Y');?> ">until <input type='text' id='date2_g' name='date2_g' size='12' value="<?php echo date('d-m-Y');?> "> </td>
<div style="width:80%"><canvas id="canvas" height="450" width="600"></canvas>
</div>
this is succesfully load data from mysql...
but I don't know,
if user change date and get date from mysql and view graph.
I mean if proses like this > choose date -> send data using ajax -> viewing graph.
now proses just like this > load .php -> viewing graph (because sql using not get parameters from interface).
please help me, I want to display graph using ajax... Thank's your attention.

Make a function in javascript that would accept dateFromand dateTo as parameters to call in you sql query in php via ajax.
Something like this..
var path_to_php_file = 'getdate.php';
function loadchartbydate(dateFrom,dateTo){
$.ajax(){
url: path_to_php_file,
type: 'POST',
dataType: 'json',
data: {'dateFrom': dateFrom, 'dateTo': dateTo},
success: function(data){
//display data in chart
//add under success callback function
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : <?=json_encode($datesGraph);?>,
datasets : [
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : <?=json_encode($Moneyss);?>
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
},
error: function(err){
console.log(err.responseText);
}
}
}

Related

Can't make chart with Chart.js

I'll add a chart to my site, but if I do that, I've nothing from result. I use ChartJS as external library.
Here is my code:
var randomScalingFactor = function(){
return Math.round(Math.random()*100)
};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/src/Chart.Bar.js" type="application/javascript"></script>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
and a JS Fiddle
What I'm doing wrong?
Here is a working JS Fiddle: https://jsfiddle.net/qb2opyd8/3/
What I´ve done:
Used https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
Changed the JS Fiddle config to No wrap - in <body>

use chart.js on a page that was loaded by ajax

I have gotten a line chart to work on a regular page. I have another page where I am using the same code, except the page is called via ajax. The chart is not appearing on the page that is called by ajax. Here is my code:
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Line(lineChartData, {
responsive: true
});
</script>
How do I get the chart to appear on a page loaded by ajax?
You DOM may not be ready as soon as your AJAX has completed. Try wrapping the Chart initialization in something that checks if the DOM is ready, like so
var interval = setInterval(function(){
var canvas = document.getElementById("canvas");
if (canvas) {
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Line(lineChartData, {
responsive: true
});
clearInterval(interval)
}
}, 100)
Also, you might want to ensure that your ajaxComplete function is actually getting called.

calling php variable in Javascript chart

Hi I am trying to show value from database in a javascript chart.
I tried ecoing the whole script, but it doesnt work.
Here is my code. Any clue on how to do that?
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
</body>
I want to control these values:
labels : ["January","February","March","April","May","June","July"],
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
For this you need to pass JSON string as parameter to JavaScript function which will have associative array like month: scaling factor as key value pair. then in the function you can parse JSON string and fetch required data and pass to chart function.

How to create datasets dynamically for chart.js Line chart?

I want to create a Line chart with multiple datasets dynamically in the chart.js library.
I am able to assign the data dynamically. But I want to create the datasets itself dynamically. I saw the link below:
How to add the elements dynamically from the html table for chart.js
and tried this :
var datasetValue = [];
for (var j = 0; j < count; j++) {
datasetValue[j] = [
{
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)' ,
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}]
}
var mydata = {
datasets : datasetValue
}
Here the count value is 3 and I want to display the 3 lines in the chart and the count value will vary. Even though the chart line color and title will be the same, I want to display the line first and will change the rest once this is solved.
I tried to access the data like so :
alert("Datasets:"+mydata.datasets[0].data);
It should show the data of the first dataset but it's showing undefined.
However in the below case:
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [95,53,99,73,27,82,40],
title : "2014"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [35,43,59,31,50,66,55],
title : "2013"
}
]
}
alert("Datasets:"+mydata1.datasets[0].data);
I am able to get the data of first dataset. Could anyone please give me the solution?
I think you are looking for something like the following solution.
http://jsfiddle.net/5m63232a/
var datasetValue = [];
var count = 10;
for (var j=0; j<count; j++) {
datasetValue[j] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}
}
var mydata = {
datasets : datasetValue
}
alert("Datasets: "+mydata.datasets[0].data);
Create service to fetch json formt like :
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
Then add following javascript code
var j = [];
$.ajax({
type: 'GET',
url: 'http://' + window.location.host.toString() + "/path",
dataType: 'json',
success: function (data) {
j = data;
},
async: false
});
var chartData = {
labels: j.labels,
datasets: j.datasets
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(chartData, {
responsive: true,
animation: true,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>"
});
}

creating a multidimensional array and fill it

I want to draw a graph on my page and would like to use Charts.js. The Documentation on
http://www.chartjs.org/docs/
says that the Chars I want to create needs an Array of Labels like this:
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
Question: How do I create such a Array?
Question: How can I fill this array with the Input of a Textfield?
Thanks!
Jan
A1) The way you have written is the right way to create arrays in javascript
A2) Suppose you have a textfield with id='month'. You can access its value like this:
var month = document.getElementById('month').value
Next you can create an array var label = []; and add the data from the text field by pushing in the array. i.e label.push(month)
Once you have populated the array for label, you can assign this array to property labels of your data object.
Similarly to assign values to data, create an array var values = []; var values2 = []; Now populate the values and values2 array by pushing values into it.
var label = [];
var values = [];
var values2 = [];
var month = document.getElementById('month').value;
//keep on doing this for all input fields
label.push(month)
//similarly push data into values and values2.
//Now build your structure for chart as follows:
var data = {
labels : label,
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : values
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : values2
}
]
}
Here label , values and values2 are the arrays you got from your textfields.
Hope this helps.
define something like this{
data = {
label:""
fields: [],
};
push the value
data.fields.push({
label: "label",
value: "your constructed value"
});

Categories