JQPlot chart not displaying - javascript

I've checked the other similar questions, but still can't track down the source of this problem.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/jquery/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="resources/jquery/jquery.jqplot.css" />
</head>
<body>
<div id="chart2" style="height:300px;width:500px; "></div>
</body>
<script type='text/javascript'>
$(document).ready(function() {
var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];
$('#chart2').jqplot([line1], {
title:'Bar Chart with Varying Colors',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Set the varyBarColor option to true to use different colors for each bar.
// The default series colors are used.
varyBarColor: true
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
</html>
The problem is, nothing displays other than the chart canvas. There are no errors logged in the console, and the source files were loaded. I moved the call the .jqplot to below the chart2 div because a user believed this was necessary, though I don't believe that to be the case since we're using $(document).ready(function()...
Any idea where the problem lies?

Resolved.
Needed to include the additional renderers which had been specified in the call the .jqplot.
<script type="text/javascript" src="resources/jquery/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="resources/jquery/plugins/jqplot.categoryAxisRenderer.js"></script>

Related

Setting dynamic data to Radial Gauge

I am developing a Radial Gauge and I need to add dynamic data to it. The following is the code that i have done with dynamic data. Can some one help me with it to add dynamic data. My code example is given below.
var arrGauge_360 = [
{key:"data-type",value:"radial-gauge"},
{key:"data-width",value:"400"},
{key:"data-height",value:"400"},
{key:"data-max-value",value:"100"},
{key:"data-value",value:"50"}, //this value has to be dynamic. not a static data.
{key:"data-animate-on-init",value:"true"},
{key:"data-major-ticks",value:"0,20,40,60,80,100"},
];
function myFunction_gauge_360(){
debugger
$("#gauge_360").append("<canvas id='ht_gauge_360'></canvas>");
arrGauge_360.forEach(function(item,index){
debugger
$("#ht_gauge_360").attr(item.key,item.value);
});
};
<!doctype html>
<html>
<head>
<title>Gauge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="jquery-3.4.1.js"></script>
<script src="HKgauge.js"></script>
</head>
<body>
<div style="text-align: center;">
<div id="gauge_360">
</div>
</div>
</body>
<script>
$(function(){
myFunction_gauge_360("gauge_360",arrGauge_360);
})
</script>
</html>

Dygraph - window size and lin/log option

I am trying to make my Dygraphs graph resizable, and to add to the page a button where one can choose if the graph has to be linear or logarithmic. The examples are both described in the Dygraphs documentation page (respectively here and here), but I don't know how to implement the changes in my html code. Do you know how could I do it? Javascript illiterate here.
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv"
style="width:1000px; height:600px;"></div><br>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv"),
"combined_file.csv", // path to CSV file
{ title: 'Title',
xlabel: 'Time',
ylabel: 'Space',
legend: 'always',
labelsDivStyles: {'textAlign': 'right'},
});
</script>
</body>
</html>

jqplot axis rendering : a.jqplot.CanvasFontRenderer is not a constructor

I am trying to render the Y-axis label rotated 90 degree. Quoting the jqplot example
By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements.
Here is the error i get from Firebug
TypeError: a.jqplot.CanvasFontRenderer is not a constructor
Here is my whole code
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<!--Jquery Base Library 2.0.3 -->
<script src="jquery-2.0.3.min.js"></script>
<!-- jqPlot Libraro -->
<script src="jquery.jqplot.min.js"></script>
<!-- More jqplot file -->
<script src="jqplot.canvasTextRenderer.min.js"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<!-- example jqplot file -->
<script src="test.js"></script>
</head>
<body style="margin:0px; padding-left:50px; padding-right:50px;" >
<div style="padding-left: 20px; padding-right:20px; background-color:#FF7519;">
<div id="chart" style="height:300px;width:800px; "></div>
</div>
</body>
</html>
here is test.js
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
cosPoints.push([i, Math.cos(i)]);
}
var plot1 = $.jqplot('chart', [cosPoints], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Some X Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Some Y Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
});
I am clueless, I don't understand what I am doing wrong since I am following the basic tutorial of this API. Thank you for your time
match your text renderer file with the file from this link: jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.js
I think this is the correct file and it has the jqplot.CanvasFontRenderer inside it. Maybe your file doesn't have that

jqPlot Bar Chart not displayed in Chrome and Mozilla

I am trying to display bar chart using jqPlot bar chart. I have doing code which display chart in Internet Explorer. But for same code chart does not displayed in Crome and Mozilla browser.
I have given the code below-
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<style>
<title>Home</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"> </script>
<script type="text/javascript" src="../resources/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.pointLabels.min.js"> </script>
<link rel="stylesheet" type="text/css" href="../resources/jQuery/jquery.jqplot.min.css" />
<script>
function drawChart() {
alert("In draw chart");
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('showData', dataArray, options);
}// end
</script>
</head>
<body>
<button value="Get Employee Data" onclick="drawChart()">Get Chart</button>
<div id="showData" style="height: 400px; width: 400px;"></div>
</body>
</html>
Why this code does not work for Crome and Mozilla browser?
I was able to get the graph displaying in IE9, FF and Chrome by:
Removing the <style> tag. This tag prevented anything displaying in all browsers.
Adding <!DOCTYPE html> at the top of the file. This prevented an error in IE9.
Also, the way you are linking to json2.js is actually retrieving the Github page that displays the file, not the actual file itself.

Changing the width of the y-axis label area in jqplot

Ok, I've got a bar chart.
And it basically works... but the labels on the y-axis are kinda long and wrap and then run into each other.
I've tried changing the css, but it gets overidden by JS.
I tried scanning thru the jqplot library to find out where it happens but i got lost.
Any ideas? is there just an option i can set?
You can see here:
Here is my html file:
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
$(function() {
graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
});
function graph_me(div_name, labels_in, values_in) {
var labels = labels_in.reverse();
var values = values_in.reverse();
$.jqplot(div_name, [values], {
series:[{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
varyBarColor: true
}
}
],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: labels,
tickOptions: {
showGridline: false,
markSize: 0
}
}
}
});
}
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>
You could try this in your css:
.jqplot-yaxis {
margin-left:-80px !important;
width:80px !important;
}

Categories