This script below is printing out the checkboxes but isn't plotting anything in the graph window.
if (key && allDataSets[key])
data.push(allDataSets[key]);
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="root/include/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="root/include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="root/include/jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Here is an example with real data: military budgets for
various countries in constant (2005) million US dollars (source: SIPRI).</p>
<p>Since all data is available client-side, it's pretty easy to
make the plot interactive. Try turning countries on/off with the
checkboxes below.</p>
<p id="choices">Show:</p>
<script type="text/javascript">
$(function () {
var Test1 = {
"date": {
label: "Date",
data: [[1, 20110122], [2, 20110123], [3, 20110124], [4, 20110125]]
},
"time": {
label: "Time",
data: [[1, 22.12], [2, 22.12], [3, 22.12], [4, 22.12]]
},
"modules": {
label: "Modules",
data: [[1, 22], [2, 22], [3, 22], [4, 22]]
},
"cases": {
label: "Cases",
data: [[1, 1312], [2, 1312], [3, 1312], [4, 1312]]
},
"failed": {
label: "Failed",
data: [[1, 75], [2, 77], [3, 64], [4, 55]]
},
"cover": {
label: "Cover",
data: [[1, 13.55 ], [2, 23.55], [3, 33.55], [4, 43.55]]
}};
var Test2 = {
"date": {
label: "Date",
data: [[1, 20110122], [2, 20110123], [3, 20110124], [4, 20110125]]
},
"time": {
label: "Time",
data: [[1, 22.12], [2, 22.12], [3, 22.12], [4, 22.12]]
},
"modules": {
label: "Modules",
data: [[1, 22], [2, 22], [3, 22], [4, 22]]
},
"cases": {
label: "Cases",
data: [[1, 1312], [2, 1312], [3, 1312], [4, 1312]]
},
"failed": {
label: "Failed",
data: [[1, 75], [2, 77], [3, 64], [4, 55]]
},
"cover": {
label: "Cover",
data: [[1, 13.55 ], [2, 23.55], [3, 33.55], [4, 43.55]]
}};
var Test3 = {
"date": {
label: "Date",
data: [[1, 20110122], [2, 20110123], [3, 20110124], [4, 20110125]]
},
"time": {
label: "Time",
data: [[1, 22.12], [2, 22.12], [3, 22.12], [4, 22.12]]
},
"modules": {
label: "Modules",
data: [[1, 22], [2, 22], [3, 22], [4, 22]]
},
"cases": {
label: "Cases",
data: [[1, 1312], [2, 1312], [3, 1312], [4, 1312]]
},
"failed": {
label: "Failed",
data: [[1, 75], [2, 77], [3, 64], [4, 55]]
},
"cover": {
label: "errover",
data: [[1, 13.55 ], [2, 23.55], [3, 33.55], [4, 43.55]]
}};
var allDataSets = [Test1,Test2,Test3];
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
for(j=0; j<allDataSets.length; j++){//Going through all datasets, are there any other more simple way to do this???
var i = 0;
$.each(allDataSets[j], function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(allDataSets[j], function(key, val) {
choiceContainer.append('<br/><input type="checkbox" name="' + key +
'" checked="checked" id="id' + key + '">' +
'<label for="id' + key + '">'
+ val.label + '</label>');
});
/**************************Here the script stops working???**********************/
choiceContainer.find("input").click(plotAccordingToChoices);
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && allDataSets[j][key])
data.push(allDataSets[j][key]);
});
if (data.length > 0)
$.plot($("#placeholder"), data, {
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 }
});
}
plotAccordingToChoices();
}
});
</script>
</body>
</html>
/***********EDIT****************/
OK so I solved the first issue with was simply replacing allDataSets[key] with allDataSets[j][key]
But as i now uncheck a checkbox I get the following error line 134 allDataSets[...] is null or not an object. Why do I get this error? In other words its this line that is incorrect when I uncheck a checkbox if (key && allDataSets[j][key])
Three things you need to do:
Declare that loop variable "j" with the var keyword.
for(var j=0; j<allDataSets.length; j++) {
All that code after your comment line - the click handler etc - needs to move out of that loop.
Inside the click handler, the code needs to iterate over "allDataSets" and then look for the key in each one:
choiceContainer.find("input:checked").each(function() {
var key = $(this).attr("name");
$.each(allDataSets, function(_, set) {
if (set[key]) data.push(set[key]);
});
});
Here is the jsfiddle demonstrating the changes. You'll note that it looks terrible. That's because your "allDataSets" re-uses the same keys for each clump. I have no idea what you're trying to achieve, but those changes will at least make something show up.
Related
I am using this plugin for the bar chart. I need to update the values day, week and month wise but the update function inside the plugin is not working.
Here is the codepen.
HTML
<div id="chart">
<h2 class="section-title">Images processed</h2>
<div class="cal-options">
<span>Day</span>
<span>Week</span>
<span class="active">Month</span>
</div>
</div>
JS
if($('#chart').length){
$('#chart').barChart({
height : 388,
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["May",33],
["June",11],
["July",23],
["August",16],
["September",28],
["October",21],
["November",32],
["December",19],
["January",13],
["February",19],
["March",24],
["April",18],
]
},
{
name : 'Dataset 2',
values : [
["May",5],
["June",5],
["July",5],
["August",5],
["September",5],
["October",5],
["November",5],
["December",5],
["January",5],
["February",5],
["March",5],
["April",5],
]
},
],
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
$(".cal-options span").each(function(){
$(this).click(function(){
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = {
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["new-May",33],
["new-June",11],
["new-July",23],
["new-August",16],
["new-September",28],
["new-October",21],
["new-November",32],
["new-December",19],
["new-January",13],
["new-February",19],
["new-March",24],
["new-April",18],
]
},
{
name : 'Dataset 2',
values : [
["new-May",5],
["new-June",5],
["new-July",5],
["new-August",5],
["new-September",5],
["new-October",5],
["new-November",5],
["new-December",5],
["new-January",5],
["new-February",5],
["new-March",5],
["new-April",5],
]
},
],
}
// $("#chart").barChart({
// update: function(){};
// })
});
});
Not able to update the chart when clicked on the Day, Week, Month buttons. Can someone please help?
Draw a graph using a function of type with a new value. The following code shows how to do it.
var options = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["May", 33],
["June", 11],
["July", 23],
["August", 16],
["September", 28],
["October", 21],
["November", 32],
["December", 19],
["January", 13],
["February", 19],
["March", 24],
["April", 18],
]
},
{
name: 'Dataset 2',
values: [
["May", 5],
["June", 5],
["July", 5],
["August", 5],
["September", 5],
["October", 5],
["November", 5],
["December", 5],
["January", 5],
["February", 5],
["March", 5],
["April", 5],
]
},
]
if ($('#chart').length) {
DrawChar(options)
}
$(".cal-options span").each(function() {
$(this).click(function() {
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["new-May", 33],
["new-June", 11],
["new-July", 23],
["new-August", 16],
["new-September", 28],
["new-October", 21],
["new-November", 32],
["new-December", 19],
["new-January", 13],
["new-February", 19],
["new-March", 24],
["new-April", 18],
]
},
{
name: 'Dataset 2',
values: [
["new-May", 5],
["new-June", 5],
["new-July", 5],
["new-August", 5],
["new-September", 5],
["new-October", 5],
["new-November", 5],
["new-December", 5],
["new-January", 5],
["new-February", 5],
["new-March", 5],
["new-April", 5],
]
},
];
DrawChar(newoptions);
});
});
function DrawChar(chartoptions) {
$('#chart').barChart({
height: 388,
bars: chartoptions,
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
as far as I can tell I've mirrored the Series format as shown in ApexCharts' examples but the chart looks really wrong.
I've made a codepen with my test data and the chart rendering awkwardly.
I've tried it with different date formats but they all render the same.
https://codepen.io/yaehjs/pen/wvBdMWB
series: [
{
name: "Damage",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 8],
[1576713600000, 14],
[1576800000000, 15]
]
},
{
name: "Injury",
data: [[1576627200000, 1], [1576713600000, 4]]
},
{
name: "Slip/Fall",
data: [
[1572739200000, 1],
[1576022400000, 2],
[1576108800000, 3],
[1576540800000, 5]
]
},
{
name: "Spill",
data: [[1576627200000, 1], [1576713600000, 7], [1576800000000, 8]]
},
{
name: "Personnel",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 9],
[1576713600000, 12]
]
},
{
name: "Equipment",
data: []
}
],
Can anyone see where I went wrong with my data?
For anyone looking at this in the future the weirdness stems from one core issue. For timeline charts all series need to have the same date data-points otherwise the chart won't get rendered properly.
Here is a sample of the correct data:
[{
"totalCount": 15,
"name": "Damage",
"data": [
[ "2019-11-03", 0],
[ "2019-11-05", 1],
[ "2019-11-12", 2],
[ "2019-11-25", 3],
[ "2019-12-01", 3],
[ "2019-12-03", 4],
[ "2019-12-04", 5],
[ "2019-12-08", 6],
[ "2019-12-11", 6],
[ "2019-12-12", 6],
[ "2019-12-17", 7],
[ "2019-12-18", 8],
[ "2019-12-19", 14],
[ "2019-12-20", 15],
[ "2019-12-21", 15]
]
},
{
"totalCount": 4,
"name": "Injury",
"data": [
[ "2019-11-03", 0],
[ "2019-11-05", 0],
[ "2019-11-12", 0],
[ "2019-11-25", 0],
[ "2019-12-01", 0],
[ "2019-12-03", 0],
[ "2019-12-04", 0],
[ "2019-12-08", 0],
[ "2019-12-11", 0],
[ "2019-12-12", 0],
[ "2019-12-17", 0],
[ "2019-12-18", 1],
[ "2019-12-19", 4],
[ "2019-12-20", 4],
[ "2019-12-21", 4]
]
}
//...,
]
Code Pen: https://codepen.io/yaehjs/pen/wvBdMWB
var options = {
chart: {
height: 350,
type: "area",
stacked: true,
events: {
selection: function(chart, e) {
console.log(new Date(e.xaxis.min));
}
}
},
colors: ["#008FFB", "#00E396", "#CED4DC"],
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth"
},
series: [
{
name: "Damage",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 8],
[1576713600000, 14],
[1576800000000, 15]
]
},
{
name: "Injury",
data: [[1576627200000, 1], [1576713600000, 4]]
},
{
name: "Slip/Fall",
data: [
[1572739200000, 1],
[1576022400000, 2],
[1576108800000, 3],
[1576540800000, 5]
]
},
{
name: "Spill",
data: [[1576627200000, 1], [1576713600000, 7], [1576800000000, 8]]
},
{
name: "Personnel",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 9],
[1576713600000, 12]
]
},
{
name: "Equipment",
data: []
}
],
fill: {
type: "gradient",
gradient: {
opacityFrom: 0.6,
opacityTo: 0.8
}
},
legend: {
position: "top",
horizontalAlign: "left"
},
xaxis: {
type: "datetime"
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.6/apexcharts.min.js"></script>
<div id="chart"></div>
I have a service in PHP returning the following:
[[1,"16846"],[2,"16858"],[3,"16923"],[4,"16891"]]
In my HTML I have ajax searching for this information;
$.ajax({
type: 'POST',
url: 'getDadosGrafico.php',
dataType: 'json', // use this
success: function(data) {
var dados = data;
I need my chart to have 3 records, I already have all 3 columns in the database.
How can I make ajax identify the 3 columns
My code PHP
$stmt = $con->prepare($sql);
$stmt->execute();
$users = $stmt->fetchAll();
$cont=1;
$dataset1 = array();
foreach ($users as $row) {
$data = $row['data_reenvio'];
$data_formatada=date('d/m/Y',strtotime($data));
$dataset1[] = array($cont , $row['total_sucesso'], $row['total_falha'], $row['total'] );
$cont++;
}
print (json_encode($dataset1));
My Code HTML
$.ajax({
type: 'POST',
url: 'getDadosGrafico.php',
dataType: 'json', // use this
success: function(data) {
var dados = data;
// Graph Data ##############################################
var graphData = [{
// Visits
data: dados, //[ [6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000] ],
color: '#71c73e'
}, {
// Returning Visits
data: [ [1, 15500], [2, 16000], [3, 16550], [4, 16000], [5, 16800], [6, 16900], [7, 16800], [8, 16850], [9, 16830], [10, 17000] ],
color: '#77b7c5',
points: {
radius: 4,
fillColor: '#77b7c5'
}
}, {
// Returning Visits
data: [ [1, 17500], [2, 17000], [3, 17550], [4, 18000], [5, 18800], [6, 18900], [7, 18800], [8, 18850], [9, 18830], [10, 17000] ],
color: '#77b7c5',
points: {
radius: 4,
fillColor: '#0007c5'
}
}
];
You need to return an object with 3 properties, each one with an array of arrays, like this:
{
visits: [ [6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000] ],
returning_visitors: [ [1, 15500], [2, 16000], [3, 16550], [4, 16000], [5, 16800], [6, 16900], [7, 16800], [8, 16850], [9, 16830], [10, 17000] ],
extra: [ [1, 17500], [2, 17000], [3, 17550], [4, 18000], [5, 18800], [6, 18900], [7, 18800], [8, 18850], [9, 18830], [10, 17000] ]
}
And then, you will use these object values on your code, like this:
var graphData = [{
// Visits
data: dados.visits
color: '#71c73e'
}, {
// Returning Visits
data: dados.returning_visitors,
color: '#77b7c5',
points: {
radius: 4,
fillColor: '#77b7c5'
}
}, {
// Returning Visits
data: dados.extra,
color: '#77b7c5',
points: {
radius: 4,
fillColor: '#0007c5'
}
}
];
On your PHP code, I'm not sure, but I think that it would be something like this:
$stmt = $con->prepare($sql);
$stmt->execute();
$users = $stmt->fetchAll();
$cont=1;
$datasetTotalSucesso = array();
$datasetTotalFalha = array();
$datasetTotal = array();
foreach ($users as $row) {
$data = $row['data_reenvio'];
$data_formatada=date('d/m/Y',strtotime($data));
$datasetdatasetTotalSucesso[] = array($cont , $row['total_sucesso']);
$datasetTotalFalha[] = array($cont , $row['total_falha']);
$datasetTotal[] = array($cont , $row['total'] );
$cont++;
}
$obj = array('visits' => $datasetdatasetTotalSucesso, 'returning_visitors' => $datasetTotalFalha, 'extra' => $datasetTotal);
print (json_encode($obj));
I have some problems to show some values in bars. I want a chart like this: Example. I don't know what I'm missing in here.
$('#myModalChart').on('shown.bs.modal', function (e) {
var data = [{
label: "Foo",
data: [
[2],
[3, 9, 12],
[6, 0, 3],
[9, 11, 12],
[12, 0, 1],
[15, 0, 2],
[18],
[3, 12, 12],
[9, 12, 12]
]
},
{
label: "Bar",
data: [
[2],
[3, 0, 5],
[6, 3, 7],
[9, 4, 11],
[12, 1, 3],
[15, 2, 5],
[18]
]
},
{
label: "Tree",
data: [
[2],
[3, 5, 9],
[6, 7, 15],
[9, 0, 4],
[12, 3, 13],
[15, 5, 17],
[15, 17, 17],
[12, 13, 13],
[6, 15, 15],
[18]
]
},];
var options = {
series: {
bars: {
show: true,
barWidth: 1
}
},
xaxis: {
align: "center",
ticks: [
[3.5, 'text1'],
[6.5, 'text2'],
[9.5, 'text3'],
[12.5, 'text4'],
[15.5, 'text5']
]
}
};
var plot = $.plot("#chart2", data, options)
});
I want a chart like this, with labels in it. And I wish have in all of them.
What I'm missing?
You have to create and place the data value labels yourself. How to do this can be seen in this answer.
I created a fiddle adjusting it to your code. Only the first data series (foo) has labels for now. you will have to adjust the position. The relevant code:
$.each(plot.getData()[0].data, function (i, el) {
if (el.length > 1) {
var o = plot.pointOffset({
x: el[0],
y: el[1]
});
$('<div class="data-point-label">' + el[1] + '</div>').css({
position: 'absolute',
left: o.left + 4,
top: o.top,
'text-align': 'center',
display: 'none'
}).appendTo(plot.getPlaceholder()).fadeIn('slow');
}
});
But you may also have to cleanup your data. You have multiple data points with the same x values (which means bars behind / in front of each other which leads to some being invisible). Take a look at the side-by-side and stack plugins on the flot plugin page.
EDIT****
I want help with writing the two functions "plotSingleCoverage" and plotAllCoverage below. The major problem I have is that I don't know how to search through all existing datasets on the page and then write out a single array in a dataset, or all array's of the same sort in different datasets. So if anyone could push me in the right direction I would be more than happy =)
Flot Examples
<div id="placeholder" style="width:600px;height:300px;"></div>
<p id="choices">Show:</p>
Show coverage of first test
Show coverage of all tests
<script type="text/javascript">
$(function () {
var Test1 = {
"date": {
label: "Date",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"time": {
label: "Time",
data: [[1, 209], [2, 201], [3, 201], [4, 134]]
},
"modules": {
label: "Modules",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cases": {
label: "Cases",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"failed": {
label: "Failed",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cover": {
label: "Cover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
}
};
var Test2 = {
"date": {
label: "Date",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"time": {
label: "Time",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"modules": {
label: "Modules",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cases": {
label: "Cases",
data: [[1, 101], [2, 201], [3, 201], [4, 45]]
},
"failed": {
label: "Failed",
data: [[1, 301], [2, 454], [3, 43], [4, 125]]
},
"cover": {
label: "Cover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
}
};
var Test3 = {
"date": {
label: "Date",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"time": {
label: "Time",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"modules": {
label: "Modules",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cases": {
label: "Cases",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"failed": {
label: "Failed",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cover": {
label: "errover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
}
};
/*Need help to write this function, it shall go to that dataset that its argument is, for example in this case it shall go to Test1 and read that cover and plot it in the #placeholder*
function plotSingleCoverage(coverageToPlot){
$.plot($("#placeholder"), [???]);
}
/*This function shall simply go through all avaible datasets and plot all cover array's*/
function plotAllCoverage(){
$.plot($("#placeholder"), [???]);
}
});
</script>
</body>
</html>
Thanks in advance =)
You have a few variables that you can't access in a convenient way. How about holding them in an array so you can loop on them easily and search for the right dataset to take actions on? (from my comment above)
You can make an array of the available data sets like this: var datasets = new Array();.
Then, when defining a new dataset, do datasets[] = { ...... } instead of every var Test1 = { ... };.
var datasets = new Array();
datasets[0] = {
"date": {
label: "Date",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"time": {
label: "Time",
data: [[1, 209], [2, 201], [3, 201], [4, 134]]
},
"modules": {
label: "Modules",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cases": {
label: "Cases",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"failed": {
label: "Failed",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cover": {
label: "Cover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
}
};
datasets[1] = {
"date": {
label: "Date",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"time": {
label: "Time",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"modules": {
label: "Modules",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
},
"cases": {
label: "Cases",
data: [[1, 101], [2, 201], [3, 201], [4, 45]]
},
"failed": {
label: "Failed",
data: [[1, 301], [2, 454], [3, 43], [4, 125]]
},
"cover": {
label: "Cover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
}
};
Then, you could access the datasets like this:
alert(datasets[1]);
// datasets[0] holds the first test data, datasets[1] the second, and so on...
$.plot($("#placeholder"), datasets[0]);
Your plotSingleCoverage can then be:
function plotSingleCoverage(dateset){
$.plot($("#placeholder"), dataset);
}
And you can use it like this:
plotSingleCoverage(datasets[0]);