I'm simply trying to generate a chart using RGraph so that I can begin using SQL to manipulate the graph. However, the issue i'm having is that it isn't showing the basic graph at all. Anyone know where i'm going wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charts</title>
<script src="JAVASCRIPT/RGraph.common.core.js"></script>
<script src="JAVASCRIPT/RGraph.bar.js"></script>
</head>
<body>
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var bar = new RGraph.Bar({
id:'cvs1',
data: [4,5,3,8,4,9,6,5,3],
options: {
backgroundGridDashed: true,
labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
title: 'A dashed background grid',
strokestyle: 'rgba(0,0,0,0)',
textAccessible: true
}
}).draw();
};
</script>
</body>
</html>
Browser Error
Uncaught TypeError: Cannot read property 'getContext' of null
RGraph.Bar # RGraph.bar.js:28
window.onload # Charts.php:17
I tested your code. Nothing wrong with it, but it seems to be very dependent on which version of RGraph you're using. Try downloading the latest version of RGraph and extracting the contents (or just the two files you need) under 'libraries' to your 'JAVASCRIPT' folder.
Here's some updated code (a few property names have changed since this was asked).
bar = new RGraph.Bar({
id:'cvs1',
data: [4,5,3,8,4,9,6,5,3],
options: {
backgroundGridDashed: true,
xaxisLabels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
title: 'A dashed background grid',
colorsStroke: 'transparent'
// textAccessible: true // Defaults to true anyway
}
}).draw();
Related
Is it possible to run html / javascript code belowe without using a browser? The html code creates a png file using a javascript code. (Kendo/jquery)
I would like to show this png file in another application to be able to present nice graphs in that application that way. Suggestions ?
The reason I don't want to use a browser is because I want to display the chart(s) directly in Unisys bis environment (also known as Mapper). However, the environment is not suitable for creating charts, but you can show images. For that reason I try another way.
example chart.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
transitions: false,
series: [{
type: "column",
data: [1, 2, 3]
}, {
type: "line",
data: [2, 1, 3]
}, {
type: "area",
data: [3, 1, 2]
}]
});
var chart = $("#chart").getKendoChart();
chart.exportImage().done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "chartXXX.png"
});
});
</script>
</body>
</html>
Scenario :
A json file
Read json data and plot graph using highcharts
Problem: Getting can't convert undefined to object when loading html without breakpoint in mozilla firefox.
When loading with a breakpoint the graph is getting perfectly plotted.
without breakpoint, getting myjson as undefined in function chartFormyJson
Code :
I have a node project and I am starting http server using npm run serve.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="scriptFile.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
scriptFile.js
var myjson;
fetch('./data.json').then(response => response.json()).then(data => {
myjson=data["myjson"];
})
if( document.readyState !== 'loading' ) {
console.log( 'document is already ready, just execute code here' );
chartFormyJson();
} else {
document.addEventListener('DOMContentLoaded', function () {
console.log( 'document was not ready, place code here' );
chartFormyJson();
});
}
function chartFormyJson(){
var myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Plot bar graph per year'
},
yAxis: {
title: {
text: 'Count'
}
},
xAxis: {
categories: Object.keys(myjson)
},
series: [{
data: Object.values(myjson)
}]
});
}
Need guidance in why it happening this way.Seems something related with loading of data/variables/order of call to js from html.But I am not an expert on these so will really appreciate any help on this.
Let me know if any further info is needed.
This is my problem:
I was playing with ECharts JavaScript library, I wanted to retrieve the image data (I know there is a save as image toolbox). When I try to access the function getDataUrl, or getConnectedDataUrl, I get the following error:
"myChart.getDataUrl is not a function"
But when I try to do the same on the browser (or Firebug) console, I get the info I want. When I call get_data() on the console also get the error I mention before. I'm confused.
What am I doing wrong?
There is the example code:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="get_data()">holi</button>
<div id="main" style="width:400px;height:300px;"></div>
<script src="echarts.min.js"></script>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Test'
},
tooltip: {},
legend: {
data:['Cosas']
},
xAxis: {
data: ["asdf","qwerty","lol"]
},
yAxis: {},
series: [{
name: 'Cosas',
type: 'bar',
data: [1, 3, 5]
}],
toolbox: {
show : true,
feature : {
mark : {show: false},
saveAsImage : {show: true, title: "save"}
}
}
};
// use configuration item and data specified to show chart
myChart.setOption(option);
function get_data(){
return myChart.getConnectedDataUrl();
};
</script>
</body>
</html>
You just misspelled the function names. They are called getDataURL() and getConnectedDataURL() (with uppercase URL).
I have code for a simple bar chart using c3.js:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
url: 'data/output.csv'
type: 'bar'
}
});
</script>
</body>
</html>
The file output.csv looks like this:
A,B,C,D
25,50,75,100
And the graph ends up looking like this:
which is all of the data in one group.
What I'd want to do is producing the following, without hard coding the data, but rather, getting it from the CSV file like the first example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
</script>
</body>
</html>
which would give a graph that looks like this:
Here is a jFiddle link.
My main issue is not knowing if there is a way to split the CSV file into categories, since it seems like c3.js will always put a CSV file into a time series.
C3 uses the first line in your csv as a header line and then returns a set of objects like {A:25},{B:50} which C3 will find difficult/impossible to use in the way you'd like.
Instead parse the csv outside the chart using D3's parseRows function. Then prepend a row descriptor which C3 can use to know which bit of the file does what.
https://jsfiddle.net/bm57gye5/2/
// This is a separate bit of html which is explained below
<pre id="data">
A,B,C,D
25,50,75,100
</pre>
// Actual javascript
var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
columns: data,
x: "Letter",
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
To access the csv from a url (in the jsfiddle I just reference the data as part of the html) to feed into csv.parseRows you'll need to use d3.text and a callback as so:
d3.text("data/output.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
... parsing / c3 chart generation continues on here as above ...
}
I'm trying to use Sigma.js. I'm really not a Javascript person but I can't get this to do even the most basic of things.
In the developer console I get the following -
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
Is that what is causing my problem or is there something wrong with my bit of HTML/ Javascript?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="Sigmas Graph Example">
<meta name="author" content="Dave">
<script type="text/javascript" src="sigma.min.js"></script>
</head>
<body>
<script>
function myFunction()
{
var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000'
}).addNode('world',{
label: 'World !',
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', myFunction, false);
} else {
window.onload = myFunction;
}
</script>
<div id="sig"></div>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Thanks
Yes, there are a few tricks to getting the sigma rendering canvas initialized.
A few things to note:
You add edges and nodes to the "graph" attribute of the sigma instance, not the instance itself.
You need to specify an x and y for each node.
Each node is a javascript object which should have and 'id', 'x', and 'y', and optionally 'color', and optionally other data associated with the node.
Similarly for edges, each edge should have an 'id', 'source', and 'target'
After adding edges and/or nodes, you need to call sigInst.refresh(), not draw()
There are myriad options you can set with an "options" object when creating the instance.
You need to set the size of the target div, or else you won't be able to see anything (at least on Chrome).
So, here is a working version based on your script above. You will also note in the docs there are other methods for bulk import of nodes and edges, such as graph.read().
<div id="sig" style="width: 800px; height: 600px;"></div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var settings = {
defaultNodeColor: '#ec5148',
defaulLabelColor: '#99f',
defaultEdgeColor: '#aaa',
edgeColor: "default",
labelSizeRatio: "1",
labelThreshold: 1,
};
var sigInst = new sigma({
container: 'sig',
settings: settings
});
sigInst.graph.addNode({
id: 'hello',
label: 'Hello',
color: '#ff0000',
size: 5,
x:0,
y:0
});
sigInst.graph.addNode({
id: 'world',
label: 'World !',
color: '#00ff00',
size: 10,
x:1,
y:1
});
sigInst.graph.addEdge({
id: "helloworld",
source: "hello",
target: "world",
});
sigInst.refresh();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', myFunction, false);
} else {
window.onload = myFunction;
}
</script>
Hope that helps.