JQPlot - Only partial bars are displayed - javascript

I am trying to implement JQPLOT Bar chart but it's displaying only few bars ( two bars against tick 'e' with combo value '2 null 2') . Below is my code. Could you please suggest whats wrong here. I have added alert statement to display values in array and result is mentioned as comment:
<%# page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.json2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var DelayFeed = [[]];
var DelayConfirmation = [[]];
var CorruptFeed = [[]];
var FeedName = [[]];
var feedData = $.ajax({
url: "FeedServlet",
dataType : 'json',
async: false
}).responseText;
var arrayData = JSON.parse(feedData);
for (var i = 0; i < arrayData.length; i++) {
DelayFeed[0].push([ arrayData[i].DelayFeed ]);
DelayConfirmation[0].push([ arrayData[i].DelayConfirmation ]);
CorruptFeed[0].push([ arrayData[i].CorruptFeed ]);
FeedName[0].push([ arrayData[i].FeedName ]);
}
alert(DelayFeed[0]); //8,7,4,3,3
alert(DelayConfirmation[0]); //4,4,4,2,2
alert(CorruptFeed[0]); //4,4,4,2,2
$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]
, { seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'vertical'
},
pointLabels: { show:true }
},
series:[
{label:'Delay - Confirmation'},
{label:'Delay - Feed'},
{label:'Corrupt Feed'}
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['a', 'b', 'c', 'd', 'e'];
},
}
});
});
</script>
</head>
<body>
<div class="work-area">
<div id="chart_div" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>

At a first look, it seems a problem with the format of data passed within $.jqplot() function.
In fact if you replace the three data arguments with these:
var DelayFeed = [8,7,4,3,3];
var DelayConfirmation = [4,4,4,2,2];
var CorruptFeed = [4,4,4,2,2];
$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]
you obtain the following (and correct) barchart
You need to use three simple arrays ( "[ ]" ) and not embedded arrays ( "[[ ]]" ).
Thus, i would try to use
$.jqplot('chart_div', [ DelayConfirmation[0], DelayFeed[0], CorruptFeed[0] ]

Related

Chartjs, scatter with For-Loop

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<script src="./OurScript.js" type="text/javascript"></script>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart1"></canvas>
<script type="text/javascript">//<![CDATA[
var x = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
datasets: [{
label: "Test",
data: [
{x:0,y:3},{x:1,y:4},{x:2,y:2},{x:3,y:5},{x:4,y:7},{x:5,y:5},{x:6,y:7},{x:7,y:8},{x:8,y:4},{x:9,y:4}
],
}]
},
options: {
responsive: true
}
});
//]]> </script>
</body>
</html>
Thats my Code which works fine. (I need to use XHTML)
My Problem is, I want to use a for Loop for the X and Y Values. But I dont know how to put the Array in data.
I tried something like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<script src="./OurScript.js" type="text/javascript"></script>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart1"></canvas>
<script type="text/javascript">//<![CDATA[
var xwerte = [0,1,2,3,4,5,6,7,8,9,10];
var ywerte = [3,4,2,5,7,5,7,8,4,4];
var c = [];
var Ergebnis1;
for(var i=0;i<ywerte.length;i++)
{
var obj ="{" + "x:" + xwerte[i] + "," + "y:" + ywerte[i] + "}";
c.push(obj);
}
// alert(c);
var x = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
datasets: [{
label: "Test",
data: [c],
}]
},
options: {
responsive: true
}
});
//]]> </script>
</body>
</html>
I tried with "alert" and I got the right result. But how should I put "c" in data?
I think I dont see a little (hopefully) mistake.
I need to use XHTML and just JavaScript.
On Snippet there is a error, but as I said, I am using XHTML and there is no Error.
Usually I set up my objects and arrays how I need them at first and then fill them with data.
Set it up:
var chartData = {
datasets: [{
label: 'Test',
data: []
}]
}
Fill it with data:
for (var i = 0; i < yWerte.length; i++) {
chartData.datasets[0].data.push(
{
x: xWerte[i], // You don't need "xWerte", you can simply use "i" when it's always the increment
y: yWerte[i]
}
)
}
You don't need your c to save your data, you can just use it like I did. But if you want c you can save the result of the for-loop in the empty array c and then use chartData.datasets[0].data = c.
Working example with live-preview: https://jsbin.com/copiwefaza/edit?js,output

jQuery autocomplete dynamic ajax

I'm trying to build a search input with the autocomplete feature. However, the suggestions depend on the input and are not static - which means that I have to retrieve the list every time the user types into the field. The suggestions are based on Google autosuggest: "http://google.com/complete/search?q=TERM&output=toolbar".
I'm currently using http://easyautocomplete.com.
This is my code:
var array = [];
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
$("#basics").on("keyup",function() {
var keyword = $(this).val();
array = [];
updateSuggestions(keyword);
});
function updateSuggestions(keyword) {
$.ajax({
type: "POST",
url: "{{ path('suggestKeywords') }}",
data: {keyword:keyword},
success: function(res){
var res = JSON.parse(res);
for(var i in res)
{
var suggestion = res[i][0];
array.push(suggestion);
console.log(suggestion);
}
}
});
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
}
I know this is not a very good way to do this - so do you have any suggestions as to how to do it?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
];
$("#automplete-1").autocomplete({
source: availableTutorials
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class="ui-widget">
<p>Type "a" or "s"</p>
<label for="automplete-1">Tags:</label>
<input id="automplete-1">
</div>
</body>
</html>

No display of jq plot

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script type="text/javascript">
function drawChart() {
var s1 = [2, 6, 7];
var s2 = [7, 5, 3];
var s3 = [2, 3, 5];
var s4 = [1, 7, 2];
// chart data
var dataArray = [s1, s2, s3, s4];
// x-axis ticks
var ticks = ['Jan', 'Feb', 'Mar'];
// chart rendering options
var options = {
seriesDefaults: {
renderer:$.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
};
// draw the chart
$.jqplot('chartDivId', dataArray, options);
}
</script>
</head>
<body onload='drawChart()'>
<div id="chartDivId" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
</tr>
</body>
</html>
This is the jsfiddle(http://jsfiddle.net/JWhmQ/2023/) for the above program which is running successfully.
But it is not displaying any js plot while running on eclipse.
Even if i included the js files still its not showing any plot
Kindly give me some solution..
Include Jquery 1.7 file to the page
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

How to update a value in a cvs file through a mouse click on highcharts graphs

I want to update my cvs file through a mouse click on a graph, like I create a graph by reading a data from the same cvs file and when I get a graph what I want is that whenever I click on a point it make that point equal to zero on y-axis and update the corresponding value in a cvs file equal to 0.
Please can someone help. Here is my code which can take values from cvs file but is not updating but the same code works fine if I take hard coded series of an array.
Don't understand why isn't these plot options working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'},
title: { text: 'Output'},
xAxis: { categories: []},
yAxis: {
title: { text: 'Units'} },
plotOptions: {
series: { cursor: 'pointer',
point: {
events: { click: function() {
var y = this.item(y);
var x = this.x;
chart.series[0].data[x].update(y -= y);} } } },
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series); });
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can catch click point action http://api.highcharts.com/highcharts#plotOptions.series.point.events.click and then use get new value from csv by ajax and use update() function http://api.highcharts.com/highcharts#Point.update()

How do you style a dojox.grid.DataGrid row?

I have the following example code (you can cut'n'paste it if you want):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
function init() {
var lData = {
items: [
{"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
{"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
{"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
{"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
{"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
],
identifier: "position"
};
var dataStore = new dojo.data.ItemFileReadStore({data:lData});
var grid = dijit.byId("theGrid");
grid.setStore(dataStore);
dojo.connect(dijit.byId("theGrid"), 'onStyleRow', this, function (row) {
var theGrid = dijit.byId("theGrid")
var item = theGrid.getItem(row.index);
if(item){
var type = dataStore.getValue(item, "band", null);
if(type == "Rothwell Temperance"){
row.customStyles += "color:red;";
}
}
theGrid.focus.styleRow(row);
theGrid.edit.styleRow(row);
});
}
var plugins = {
filter: {
itemsName: 'songs',
closeFilterbarButton: true,
ruleCount: 8
}
};
dojo.ready(init);
function filterGrid() {
dijit.byId("theGrid").filter({band: dijit.byId('filterText').get('value')+'*'});
console.log(dijit.byId('filterText').get('value')+'*');
}
function resetFilter() {
dijit.byId("theGrid").filter({band: '*'});
dijit.byId('filterText').set('value','');
}
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<table dojoType="dojox.grid.DataGrid" id="theGrid" autoHeight="auto" autoWidth="auto" plugins="plugins">
<thead>
<tr>
<th field="position" width="200px">Position</th>
<th field="band" width="200px">Band</th>
<th field="conductor" width="200px">Conductor</th>
</tr>
</thead>
</table>
</body>
</html>
The onStyleRow only gets fired when I click a row. Is there any way to have a button format rows based on their content? Either by having classes assigned to rows at creation time and then change the class values or loop through the rows and directly changing the style element of each based on it's contents.
EDIT
I have also tried creating the grid programmatically. While when created this way it does fire the onStyleRow at creation time it does not provide the same level of hightlighting the other method does.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<style>
#grid {
height: 20em;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
function init() {
var lData = {
items: [
{"position":"1","music":"Opera","band":"Black Dyke","conductor":"Nick Childs"},
{"position":"2","music":"Opera","band":"Carlton Main","conductor":"Philip McCann"},
{"position":"3","music":"Classical","band":"Grimethorpe","conductor": "Allan Withington"},
{"position":"4","music":"Classical","band":"Brighouse and Rastrick","conductor": "David King"},
{"position":"5","music":"Opera","band":"Rothwell Temperance","conductor":"David Roberts"},
],
identifier: "position"
};
var dataStore = new dojo.data.ItemFileReadStore({data:lData});
var layout = [[
{'name':'Position','field':'position','width':'50px'},
{'name':'Music Type','field':'music','width':'150px'},
{'name':'Band','field':'band','width':'200px'},
{'name':'Conductor','field':'conductor','width':'200px'}
]];
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: dataStore,
structure: layout,
rowSelector: false,
selectionMode: 'extended',
onStyleRow: function(row) {
var item = this.getItem(row.index);
if(item){
var type = this.store.getValue(item, "band", null);
if(type == "Rothwell Temperance"){
row.customStyles += "color:red;";
}
}
}
});
grid.placeAt("gridDiv");
grid.startup();
}
var plugins = {
filter: {
itemsName: 'songs',
closeFilterbarButton: true,
ruleCount: 8
}
};
dojo.ready(init);
function filterGrid() {
dijit.byId("grid").filter({band: dijit.byId('filterText').get('value')+'*'});
console.log(dijit.byId('filterText').get('value')+'*');
}
function resetFilter() {
dijit.byId("grid").filter({band: '*'});
dijit.byId('filterText').set('value','');
}
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<div id="gridDiv"></div>
</body>
</html>
Method 1 (doesn't format when grid is created, nice highlighting)
Method 2 (formats when grid created, no row highlighting)
A simple re-ordering of the init() function makes sure the onStyleRow function is bound before the data is added to the grid works.
function init() {
var lData = {
items: [
{"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
{"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
{"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
{"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
{"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
],
identifier: "position"
};
var dataStore = new dojo.data.ItemFileReadStore({data:lData});
var grid = dijit.byId("theGrid");
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if(item){
var type = dataStore.getValue(item, "band", null);
if(type == "Rothwell Temperance"){
row.customStyles += "color:red;";
//row.customClasses += " dismissed";
}
}
//theGrid.focus.styleRow(row);
//theGrid.edit.styleRow(row);
});
grid.setStore(dataStore);
}
Have you tried any of the following:
Style Dojox Grid Row depending on data
dojox DataGrid onStyleRow works first time, then not again
dojox.grid.DataGrid - onStyleRow needs update? (dojo 1.2.0)
You can also use Firebug to see if rows are getting assigned an ID and then change background of each row using onStyleRow.

Categories