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.
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 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.
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.
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 use the angular-chartjs library but running into some issues. There are no errors on the page. But the canvas is empty.
Anyone has an idea?
I've tried reordering the scripts a few times. I just can't figure it out. :(
Here is the html.
<html ng-app="profitly">
<head>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/Chart.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-chartjs.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="MainController" class="container-fluid">
<div class="wrapper" ng-view>
<article ng-controller="graph">
<cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>
</article>
</div>
</body>
<html>
And here is the app initialization:
var app = angular.module('profitly', ['ngRoute', 'chartjs']);
And here is the controller for this part:
app.controller('graph', function($scope) {
$scope.someData = {
labels: [
'Supply',
'May',
'Jun'
],
datasets: [
{
data: [1, 7, 15, 19, 31, 40]
},
{
data: [6, 12, 18, 24, 30, 36]
}
]
};
$scope.someOptions = {
segmentStrokeWidth: 20,
segmentStrokeColor: '#000'
};
});
Someone else on my hack team figured it out later that day.
Here is the HTML:
<article class="col-xs-6 col-md-offset-3 col-md-6 center">
<canvas id="expenses" width="200" height="100"></canvas>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var expenses = document.getElementById("expenses").getContext("2d");
new Chart(expenses).Pie(pieData, pieOptions);
</script>
</article>
For more, our github repo (the view was the "cashflow.html" one) and to see how it rendered.
Probably not the best way to do it.
It looks like your missing ng-app in your HTML which would contain which angular app you will be using.
You can put it in the inside one of the divs wrapping the graph.