I really can`t figure out whats going wrong here.
I try to draw a line-chart with epoch using JSON-data.
JSON Formatter & Validator says it`s valid JSON.
Epoch/D3 does not render the chart, instead I get a "Uncaught TypeError: Cannot read property 'length' of undefined" in d3.js in the console.
I tried different versions of d3, the newest as well as v3.5.17 as described in this issue: https://github.com/epochjs/epoch/issues/226
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/epoch.min.css" type="text/css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/d3.js"></script>
<script src="js/epoch.js"></script>
</head>
<body>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
$('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","value":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]
});
</script>
</body>
A quick read at the documentation will show you that instead of value:
data: [{"label":"LabelA","value":[...
It has to be values:
data: [{"label":"LabelA","values":[...
Here is the demo with your corrected code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.js"></script>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
var linechart = $('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","values":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]});
</script>
Related
I am trying to made one dynamic combo by using this EsayUI Apis
My Idea is My combo should work by passing div. So I am passing div and then attaching my input. Things are working fine when I am using only html. But when I am creating input tag in html and attaching then it only appearing textbox not combo.
My Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="JS/PCCombo.js"></script>
</head>
<body>
<div id="myID" style="width:26%; background-color: lightblue;">
<!-- <input class="easyui-combobox" name="language" style="width:100%;" data-options="
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
label: 'Language:',
labelPosition: 'top'
">
//-->
</div>
<script type="text/javascript">
var val = document.getElementById("myID");
var myCombo = new NewCombo ({
"val" : val,
"url": 'JSON/combobox_data1.json',
"divID": "chart_line",
});
</script>
</body>
</html>
My JS
NewCombo = function(args){
debugger;
var divDetails = args.val;
var input = '<input class="easyui-combobox" name="language"\
style="width:100%;" data-options="\
url: "JSON/combobox_data1.json",\
method: "get",\
valueField: "id",\
textField: "text",\
panelWidth: 350,\
multiple:true,\
label: "Language:",\
labelPosition: "top"\
>';
divDetails.innerHTML = input
}
Here I am getting error :
Uncaught SyntaxError: Unexpected token }
at new Function (<anonymous>)
at Object.parseOptions (jquery.easyui.min.js:16209)
at Function.$.fn.validatebox.parseOptions (jquery.easyui.min.js:22880)
at Function.$.fn.textbox.parseOptions (jquery.easyui.min.js:23440)
at Function.$.fn.combo.parseOptions (jquery.easyui.min.js:29853)
at Function.$.fn.combobox.parseOptions (jquery.easyui.min.js:30297)
at HTMLInputElement.<anonymous> (jquery.easyui.min.js:30220)
at Function.each (jquery.min.js:2)
at m.fn.init.each (jquery.min.js:2)
at m.fn.init.$.fn.combobox (jquery.easyui.min.js:30215)
Can anyone help me how to fix this or suggest me any alternate options.
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>
I am trying to access a json file from a remote server using Ajax and plot and then trying to plot the graph using jqplot.
I doubt that my Ajax is not working with the remote server. the same url I can access from my browser but Ajax is not working with the same. Below is my code....Can anyone please highlight the mistake I am making:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script src="jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript" ></script>
<script src="jqplot.ohlcRenderer.js" type="text/javascript"></script>
<script src="jqplot.highlighter.js" type="text/javascript"></script>
<script src="jqplot.cursor.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://172.xx.xxx.xxx/mc_measurement_new1.json",
type: "GET"
dataType: "jsonp",
crossDomain:true,
contentType:'application/json; charset=utf-8',
success: function (data) {
populateGraph(data);
}
});
function populateGraph(ret) {
var line1 = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
line1.push([ret[i].id, ret[i].res]);
}
var plot2 = $.jqplot('chart1', [line1], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'ID',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Delay',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
};
});
</script>
</head>
<body>
<div id="chart1" style="height: 400px; width: 600px;"></div>
</body>
</html>
When you use jsonp as the datatype, you must provide a callback, you don't have to use the success option.
Check out the jQuery api docs: http://api.jquery.com/jQuery.ajax/
Look for jsonp and jsonpCallback options.
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
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;
}