We Keep Coding

How to insert value from MySQL DB through PHP in a .JS file?

I am a beginner as you can see. Would like to learn how to pass value from MySQL database into a Bootstrap chart module. I have basic knowledge in PHP but do not know how to work with PHP in a .JS file. Please refer me to a tutorial or another similar topic with answers. Thank you.
I tried to embed the PHP code section into the part 'data' of variable 'data', as you can see.
(function(window, document, $, undefined) {
'use strict';
$(initFlotLine)
function initFlotLine() {
var data = [{
"label": "Sales",
"color": "#5ab1ef",
"data": <?php echo json_encode($data); ?> // my silly attempt
}, ];
var options = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function(label, x, y) { return x + ' : ' + y; }
},
xaxis: {
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
// position: 'right' or 'left'
tickColor: '#eee'
},
shadowSize: 0
};
var chart = $('.chart-line');
if (chart.length)
$.plot(chart, data, options);
}
})(window, document, window.jQuery);

Angular chart has not clear its old data

I'm having trouble on reload chart with updated details, I'm showing graph based on user activity on daily basis, on initial load with preset values the graph is formed precisely
Here I'm using flot chart library, in that flot chart library I'm using line graph
This is initial graph
But when I use custom values instead of loading a new graph with updated values, the custom values is get appended to the right end of x-axis on the graph.
When I use the custom values, the graph looks like,
In second graph, the included data will added to its old data at right side instead of showing it in correct order
here is my code for first graph, input data in vm.allsessionReport
input data will get by programmatic
vm.allSessionReport = [];
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
vm.allSessionReport = [
["2017-06-30", 0],
["2017-07-01", 0],
["2017-07-02", 0],
["2017-07-03", 0],
["2017-07-04", 17],
["2017-07-05", 0],
["2017-07-06", 0],
["2017-07-07", 0]
]
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
console.log('session data 2nd', vm.sessionData)
vm.sessionOptions = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
position: ($scope.app.layout.isRTL ? 'right' : 'left'),
tickColor: '#eee'
},
shadowSize: 0
};
code for my second graph, input data has changed to
vm.allSessionReport = [];
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
vm.allSessionReport = [
["2017-06-28", 0],
["2017-06-29", 0],
["2017-06-30", 0],
["2017-07-01", 0],
["2017-07-02", 0],
["2017-07-03", 0],
["2017-07-04", 17],
["2017-07-05", 0],
["2017-07-06", 0],
["2017-07-07", 0]
]
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
console.log('session data 2nd', vm.sessionData)
vm.sessionOptions = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
position: ($scope.app.layout.isRTL ? 'right' : 'left'),
tickColor: '#eee'
},
shadowSize: 0
};

How to change the flot bar fill and border color?

I have created a user graph for my codeigniter project. The bar fill is set at the default. But I would like the BARS to change it so it looks like the bars on this image: http://www.riwakawebsitedesigns.com/offsite/images/userchart.PNG
I echo the data from my controller. But just would like to know how to make bars and bar-border look like the image above.
When I add these shadowSize: 0, colors: ['#9FD5F1', '#1065D2'], to the series bar it does not work.
<script type="text/javascript">
$(document).ready(function () {
var data = <?php echo $data;?>;
$.plot($("#chart-user"), [data], {
series: {
bars: {
shadowSize: 0,
show: true,
fill: true,
//fillColor: '#9FD5F1'
},
grid: {
backgroundColor: '#FFFFFF',
hoverable: true
}
}
});
});
</script>

I had to do this below to make it work added color below series
<script type="text/javascript">
$(document).ready(function () {
var data = <?php echo $data;?>;
$.plot($("#chart-user"), [data], {
series: {
color: '#1065D2',
bars: {
shadowSize: 0,
show: true,
fill: true,
},
grid: {
backgroundColor: '#FFFFFF',
hoverable: true
}
}
});
});
</script>

I finally found an answer to this. For Bars you specify the fillColor for each series. Then the global Series Colors. The Bar will be filled with the fillColor and use the Colors for the lines.
The below example is using 2 different data arrays d1 (Absent Time), d2 (Time Worked) and stacks for each bar for different time spans
E.g:
var chartOptions = {
xaxis: {
min: 0,
max: 100,
ticks: [[25, '25%'], [50, '50%'], [75, '75%'], [100, '100%']]
},
yaxis: {
ticks: [[1, 'Today'], [2, 'Yesterday'], [3, 'This Week'],[4, 'Last Week']],
position: 'right',
font: { size: 12 }
},
series: {
stack : true,
bars: {
horizontal: true,
show: true
}
},
colors: ['rgb(52,95,14)', 'rgb(108,105,19)'],
};
$.plot($('#placeHolder'), [{ data:d1, bars:{fillColor: 'rgb(194, 238, 155)', fill: 0.9}}, { data:d2, bars:{fillColor: 'rgb(241, 239, 177)', fill: 0.9}}], chartOptions);
The displayed chart

Flot Strange Line Chart

I have a chart with ordering by date.
My problem is the chart lines joining false from start to end.
My options:
var options =
{
grid:
{
color: "#dedede",
borderWidth: 1,
borderColor: "transparent",
clickable: true,
hoverable: true
},
series: {
grow: {active:false},
lines: {
show: true,
fill: false,
lineWidth: 2,
steps: false
},
points: {
show:true,
radius: 5,
lineWidth: 3,
fill: true,
fillColor: "#000"
}
},
legend: { position: "nw", backgroundColor: null, backgroundOpacity: 0, noColumns: 2 },
yaxis: { tickSize:50 },
xaxis: {
mode: "time",
tickFormatter: function(val, axis) {
var d = new Date(val);
return d.getUTCDate() + "/" + (d.getUTCMonth() + 1);
}
},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
};
Note: I'm not re-ordering any data. Just giving the timestamp with this function:
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
Setting the data like this:
$.each(e.data, function(i, e){
data.push([gd(parseInt(e['year']), parseInt(e['month']), parseInt(e['day'])), parseInt(e['value'])]);
});
var entity = {
label: e.campaign,
data: data,
lines: {fillColor: randomColor},
points: {fillColor: randomColor}
};
entities.push(entity);
Console log:

When creating line charts, flot will connect the data points using the order from the data series, ignoring the actual x-coordinates. That's why data series should be in ascending order.
A minimal example (using your data in ascending order):
var d1 = [
[1401310800000, 275],
[1401397200000, 270],
[1401483600000, 313],
[1401570000000, 279],
[1401656400000, 216],
[1401742800000, 255],
[1401829200000, 244],
[1401915600000, 70]
];
$.plot("#chart", [ d1 ]);
Here is a jsfiddle showing the chart.

Flot chart rendering unexpectedly

I'm trying to display a flot chart with 3 arrays. To make things simple the arrays are all the same:
[[1,1],[2,3],[3,6],[4,10],[5,15],[6,21]]
I create the arrays with the following ruby code:
def flot_chart_series
total=0
foo=[]
(1..6).each do |number|
foo.push [number, total+=number]
end
foo
end
Here is my Erb processed Javascript code:
var fb_shares = <%= flot_chart_series %>;
var twitter_shares = <%= flot_chart_series %>;
var email_shares = <%= flot_chart_series %>;
var plot = $.plot($("#statsChart"),
[ { data: fb_shares, label: "Facebook shares"},
{ data: twitter_shares, label: "Twitter shares" },
{ data: email_shares, label: "Email shares" }], {
series: {
lines: { show: true,
lineWidth: 1,
fill: true,
fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 }, { opacity: 0.15 } ] }
},
points: { show: true,
lineWidth: 2,
radius: 3
},
shadowSize: 0,
stack: true
},
grid: { hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 0
},
legend: {
// show: false
labelBoxBorderColor: "#fff"
},
colors: ["#3071eb", "#30a0eb", "#a7b5c5"],
xaxis: {
ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4,"APR"], [5,"MAY"], [6,"JUN"],
[7,"JUL"], [8,"AUG"], [9,"SEP"], [10,"OCT"], [11,"NOV"], [12,"DEC"]],
font: {
size: 12,
family: "Open Sans, Arial",
variant: "small-caps",
color: "#697695"
}
},
yaxis: {
ticks:3,
tickDecimals: 0,
font: {size:12, color: "#9da3a9"}
}
});
The problem is that the chart doesnt plot 3 of the same lines, it creates lines that are increasing in value. Here is a screen shot of the graph: flot chart screen shot
Any ideas what I'm doing wrong?

As #captain hints at in his comment this is because you are using the stacking plugin with stack: true. This is going to stack the 3 identical lines on top of each other.
Compare these fiddles: stack true and stack false.
If you don't want to stack just get rid of the plugin (less javascript == faster loading) and the stack: true option.