As a new web developer, I would like to visualize csv data from c3.js.
I have looked into their examples, and succeeded so far with data entered manually by hand as follows:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Visualisation test</title>
<meta charset="utf-8" />
<link href="libs/c3.min.css" rel="stylesheet" />
<script src="libs/d3.min.js"></script>
<script src="libs/c3.min.js"></script>
</head>
<body>
<p> <b> The chart is displayed below: </b> </p>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400],
['data2', 130, 100, 140, 200, 150, 50, 130, 100, 140, 200],
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
axis: {rotated : true}
});
</script>
<p> End of Chart </p>
</body>
</html>
But reading the data from a csv file doesn't display anything.
The way I did was by remplacing the data section with the following code:
data: {
url: '/path/to/my/file.csv',
type: 'line'
}
My CSV file content:
data1,data2
120,80
140,50
170,100
150,70
180,120
Thanks for your help.
You probably have a problem with your path, because your snippet is the correct way to load an external CSV file into C3:
data: {
url: 'data.csv',
type: 'bar'
},
This is a plunkr with your code, and your data is loaded from a CSV file, check it: https://plnkr.co/edit/moRdOmyeMkb533XJHyoY?p=preview
This is the documentation: http://c3js.org/samples/data_load.html
Just found the issue. Just make sure to disable ad blockers extensions ...
You could read the file using PHP:
PHP CSV string to array
then json_encode the output and use it in your columns array.
Related
How can I display the script.js graph on this Covid-19 dashboard? For mine, it only shows the words. I have tried several attempts to let the script.js display the graph on the web, which includes placing <link rel> in the header instead of the body.
What possible reasons might lead to this problem?
index.html file
<!DOCTYPE HTML>
<html>
<head>
<script src="script.js"></script>
<title>Malaysia COVID-19 for March 2020</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"> </script>
<link rel = "stylesheet" typr = "text/css" href = "style.css">
</head>
<body>
<div class = "wrapper">
<h1>Malaysia COVID-19 Cases</h1>
<h2>A simple line chart using Chart.js</h2>
<canvas id = "mychart" width = "1600" heights = "900"></canvas>
</div>
</body>
</html>
script.js file
//For drawing the lines
var confirmed = [566, 673, 790, 900, 1030, 1183, 1306, 1518, 1624, 1796, 2031];
var recovered = [42, 49, 60, 75, 87, 114, 139, 183, 199, 215];
var death = [0, 2, 2, 2, 2, 3, 4, 10, 14, 16, 20, 23];
var ctx = document.getElementById("mychart");
var mychart = new Chart(ctx, {
type : 'line',
data : {
labels : day,
datasets: [
{
data: confirmed,
label : "Confirmed Cases",
borderColor: "#4933FF",
fill: false
},
{
data: recovered,
label : "Recovered Cases",
borderColor: "#00FF0C",
fill: false
},
{
data: death,
label : "Death Cases",
borderColor: "#00FF0C",
fill: false
}
]
}
});
I have found a solution to this problem. It's not related with the placement of the script tag, but to remove the min from the chart.min.js.Like this :
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
Then it will display the graph.
You need to put your script after the CDN, otherwise the object Chart is not yet defined.
<script src="cdn/chart.js"></script>
<script>Your stuff</script>
Scripts should be at the end of body and you can use the console in the developer tools to have information about errors.
I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.
My csv looks like that :
Name,Value,colorValue
The first column is the name.
The second one is the percentage of activity.
The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).
Do someone has an example ?
Because it doesn't work, nothing happen (no error too), i think it come from the csv load.
Here my actual code :
HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>
my Js :
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
}
}],
title: {
text: 'Highcharts Treemap'
}
});
The CSV data properties should not be inside a series object but chart object, like that:
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
keys: ['name', 'value', 'colorValue']
}],
title: {
text: 'Highcharts Treemap'
}
});
Demo:
https://jsfiddle.net/BlackLabel/L4uo8h13/1/
API reference:
https://api.highcharts.com/highcharts/data.csv
I am using C3.js for multiple line graph.
I have around 2 line at the start but out of those two, i want to show only one and hide another one.
I have used chart.show('data1')
but without any luck.
Please help.
Another question is , can we have drilling charts in C3.js ?
Thanks.
The code :
<html>
<head>
<link href="./c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="./d3.v3.min.js" charset="utf-8"></script>
<script src="./c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['data1', 30, 200, 100, 400, 250],
['data245', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
chart.show('data1');
</script>
</html>
By default all the lines will be visible. so hide all the lines first and then show the line you want to see
chart.hide(['data1', 'data245']);
chart.show('data1');
If you have only 2 lines and want hide one then
chart.hide('data245');
check the show and hide api
I created a fiddle implementing the above.
I found many plugins based on jquery and javascript which generate charts from the tables but all the table values are hard-coded. But my table values are inputs from the user and I need to generate the charts on the fly. Any idea how I can do this?
Currently I am using canvasjs.
<!DOCTYPE HTML>
<html>
<head>
<title>My Chart</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function hello() {
//Better to construct options first and then pass it as a parameter
var options = {
title: {
text: "My Chart"
},
animationEnabled: true,
data: [
{
type: "column", //change it to line, area, bar, pie, etc
dataPoints: [
{ x:25, y: 10 },
{ x: 20, y: 11 },
{ x: 30, y: 14 },
{ x: 40, y: 16 },
{ x: 50, y: 19 },
{ x: 60, y: 15 },
{ x: 70, y: 12 },
{ x: 80, y: 10 }
]
}
]
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Then I tried using document.getElementById() to get the variable value from the input and assigning it to the variable in the hello() function. But it is giving the error.
HELP!! :-)
you can try with
Jquery
var test = $('#inputValue').val()
javascript
var test = document.getElementById("inputValue").value;
or you can show me the error for try to help
Prathamesh,
You can use document.getElementById("inputValue").value and document.getElementById("buttonID").onclick if you like to add dataPoint on-click of button. Or document.getElementById("inputValue").onchangeif you like to add on change of value.
Check this example where values are added on click of button.
I'm trying to add a selection menu to my angular charts and I'm running into some problems. I used this selection app template and tried to incorporate it into my current app. However the only thing that shows up on the page is the selection menu and the axis of the graph.
I looked at the console log for any errors that may have sprung up and found that one of the src url wasn't found, and updated the url in my current code. This did not solve my problem, however, and no more errors showed up in the console to give me some insight as to what I'm doing wrong. This is my second time ever working with the selection directive so its difficult for me to spot any errors in my code.
My markup:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Angular Chart</title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selection" ng-options="item for item in items">
</select>
<hr/>
<div ng-switch on="selection">
<div ng-switch-when="Selection 1">
<div
data-ac-chart="'line'"
data-ac-data="data[0]"
data-ac-config="config"
class="chart">
</div>
</div>
<div ng-switch-when="Selection 2">
<div
data-ac-chart="'line'"
data-ac-data="data[1]"
data-ac-config="config"
class="chart">
</div>
</div>
</div>
</body>
</html>
My JS:
var myApp = angular.module('myApp', ['angularCharts']);
myApp.controller("MainCtrl", ['$scope', function($scope) {
$scope.config = {
title: 'Products',
tooltips: true,
labels: false,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
position: 'right'
}
};
$scope.data = [{
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0]
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]},
{
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [10, 500, 0]
}, {
x: "Desktops",
y: [30, 200, 10]
}, {
x: "Mobiles",
y: [357, 127, 20]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
}];
$scope.items = ['Selection 1','Selection 2'];
$scope.selection = $scope.items[0]
}
]);
Edit: I see now that the problem lies in the js file in the data model. I initially thought that it was the data array inside $scope.data that was being called in the html tag of the div, so I simply created two different data arrays under that model as dataA and dataB in place of data. However, the series array is also required in the data model for the data-ac-data directive to function properly.
I'm confused as to how I should format the code in the model so as to easily call the data in the html when a selection is made. I'm also not sure if I can use an expression such as "{{data.dataA}}" in place of "data" in the html tag. Please let me know the easiest way to modify my code.
This
ac-data="dataA"
ac-data="dataB"
Should be
ac-data="data.dataA"
ac-data="data.dataB"
The problem was with $scope.data model. It needed two groups of elements each with a series and data array. The directive was also modified to data-ac-data="data[0]" and "data[1]" respectively.