I am having alot of trouble getting c3 to work in my web page. My code for the graphing is right, it just wont load anything and I am guessing this is due to me not having the right script src. Does anyone have a starter file for using c3, or the code I would need to load it in. Or is there a CDN I could reference?
Here is a quick starter file
<!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: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
</html>
But I would recommend, getting stable versions from the respective sites or GitHub projects.
Related
Okay, so I've read numerous tutorials and a couple of threads here on stackoverflow, which has helped me to understand the canvas element a bit more, but am still having difficulties getting the crop to work. The code I am using is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Canvas Image</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- comments -->
<canvas id="canvas" width="640" height="600"></canvas>
<script>
var canvas = document.getElementById('canvas').getContext ('2d');
var canvasImage = new Image();
function drawCanvasImage(){
canvas.drawImage(canvasImage, 50, 25, 300, 350);
};
canvasImage.addEventListener('load',drawCanvasImage,false);
canvasImage.src = "Images/Batman.jpg";
</script>
<script>
var canvas = document.getElementById('canvas').getContext ('2d');
var canvasImage = new Image();
function cropImage(){
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100);
};
canvasImage.addEventListener('load',drawCanvasImage,false);
canvasImage.src = "Images/Batman.jpg";
</script>
</body>
</html>
My original image is an image that I've uploaded to my server, and it is displayed correctly, however my cropped image will not show at all. This is for a school project which is due tomorrow night, so any help would be appreciated. Thanks in advanced!
Figured it out! I misread my textbook, and in my original code I had:
function cropImage(){
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100);
};
After changing my code to:
function drawCanvasImage(){
canvas.drawImage(canvasImage, etc.)
the image displayed correctly. Now to just mess around with the coding to get it to what I need it to be.
I am learning D3.js, and I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Graphic</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>
I am using Chrome as a browser on my mac. Am I making an obvious mistake? Thank you!
There is nothing really wrong per-se with your code, other than the fact that it will do nothing (and I personally would put the 'script src' tag in the head section). You have simply written a HTML document which then loads in the D3.JS Javascript library.
What you now need to do is start using the library by issuing some D3 commands to create HTML/DOM elements from data. There is plenty to read up on the internet (try dashingd3js.com) but to get you started here is a v.simple starter for 10 expanding on your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Column Chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chartarea"></div>
<script type="text/javascript">
// Some random data
var data = [0.27, 0.5, 0.1, 0.15, 0.3, 0.21, 0.25, 0.94, 0.04, 1.00];
var svg = d3.select('#chartarea')
.selectAll('div')
.data(data)
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function (d) {
return d * 400 + 'px';
});
</script>
</body>
</html>
The above should create a v.simple column chart using HTML DIV's. You can then move on to more advanced implementations to generate SVG components.
Also see example here:
http://bl.ocks.org/jamesleesaunders/260cf482c8a56d49dfa6
I'm having trouble with connecting to the c3.js library. I followed the instructions on c3js.org but it won't work. I used a simple example from the website but it isn't showing a thing. I load like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/c3.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../js/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 50, 70, 90],
['data2', 20, 40, 60, 80]
]
}
});
</body>
</html>
the problem is i can't see a chart. I only see the code i entered starting from my var.
Thank you every one
Works perfectly well for me. See this fiddle.
Are you sure you're setting this to the correct url for your setup:
../js/c3.min.js
The D3 is off a CDN but your C3 is off a local path, so check that path is resolving (open Developer Tools in your browser & check for errors).
In the fiddle I also included the c3.css, which I notice your code hasn't got.
I think the path to stylesheet is incorrect.
../ may have to be something else, depending on where you have put your c3.js files
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 230, 190, 300, 500, 300, 400]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data3', 130, 150, 200, 300, 200, 100]
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
}, 2000);
</script>
I want to make c3.js chart any example. So i tried ... but i didn't find css and js for this...
Can anyone help me to find out c3.css and c3.min.js path .... so i can solved this problem ...
Thank you every One.
I think you should start again using the original zip file, so I can be sure the files are in the right spot.
In the \htdocs\samples folder, open any sample.
It would say this in the head -
<link rel="stylesheet" type="text/css" href="/css/c3.css">
Change it to
<link rel="stylesheet" type="text/css" href="../css/c3.css">
Same for the line that calls the .js file.
Now, go back to the master folder, should be called c3-0.4.4 or something similar.
Copy all .css files and dump those in the css folder. Place all .js files in the js folder.
Not sure why following code (basically a cut & paste from example) is returning error.
var textWhy = new THREE.TextGeometry( "Why", { size: 10, height: 5, curveSegments: 6, font: "helvetiker", weight: "normal", style: "bold" });
Cannot read property 'normal' of undefined
I am new to webgl, hope someone can point me to a solution.
Thanks.
Tried with this simplest snippet. Result is the same.
<html>
<head>
<title>Three.js Why Text</title>
<script src="typeface-0.15.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
<script src="helvetiker_bold.typeface.js"></script>
<script type="text/javascript" src="Three.min.js"></script>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
textWhy = new THREE.TextGeometry( "Why", { size: 10, height: 5, curveSegments: 6, font: "helvetiker", weight: "normal", style: "normal" });
});
</script>
</head>
<body>
</body>
</html>
Found that I should not use "typeface-0.15.js" but only the font helvetiker_*.typeface.js. The 'load' function is provided in Three.js. So it should be:
<html>
<head>
<title>Three.js Why Text</title>
<script type="text/javascript" src="Three.min.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
<script src="helvetiker_bold.typeface.js"></script>
...