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.
Related
I have a very hard time to get chart.js running with time axis.
I have following simplified code:
<html>
<head>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
</head>
<body>
<canvas id="chart" width="800" height="400"></canvas>
<script type="text/javascript">
window.onload = function () {
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx,{
type: 'line',
data: {
datasets:[ {
data: [
{ x: '2017-01-06', y: 50 },
{ x: '2017-01-15', y: 45 },
{ x: '2017-03-07', y: 35 },
]
} ]
},
options: {
scales: {
xAxes: [ { type: 'time', } ]
}
}
});
};
</script>
</body>
</html>
When including the latest 3.4.0 chart.js the time axis is not correctly formatted (the datapoints are evenly distributed on the x-axis). However when using the 2.9.3 version, it is displayed correctly (datapoints are not evenly distributed).
Fiddle not working (using 3.4.0): https://jsfiddle.net/ungoq8j6/1/
Fiddle working (using 2.9.3): https://jsfiddle.net/ungoq8j6/2/
According to the docs (which are completly vague about that topic) you have to include a date library and an adapter (here moment.js + chartjs-adapter-moment).
The script is used only on the client side, so no node.js/npm is available.
Your config is wrong, in v3 the way you have to define scales have changed, please read the migration guide: https://www.chartjs.org/docs/master/getting-started/v3-migration.html#scales
Working example:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
</head>
<body>
<canvas id="chart" width="800" height="400"></canvas>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [{
x: '2017-01-06',
y: 50
},
{
x: '2017-01-15',
y: 45
},
{
x: '2017-03-07',
y: 35
},
]
}]
},
options: {
scales: {
x: {
type: 'time',
}
}
}
});
};
</script>
</body>
</html>
I have to create pie charts for a website. It seems to me that I can't dynamically render pie charts depending on how many I need. At max I have to render 28. So, I'm thinking that I would have to type out
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Gaming Consoles Sold in 2012"
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 4181563, indexLabel: "PlayStation 3" },
{ y: 2175498, indexLabel: "Wii" },
{ y: 3125844, indexLabel: "Xbox 360" },
{ y: 1176121, indexLabel: "Nintendo DS"},
{ y: 1727161, indexLabel: "PSP" },
{ y: 4303364, indexLabel: "Nintendo 3DS"},
{ y: 1717786, indexLabel: "PS Vita"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
this code 28 times. But, sometimes I won't need all 28 pie charts. So I was thinking I could hide the pie charts if they aren't needed. But, the main question is, "can I dynamically allocate canvasJS pie charts"? So I only have one main block of code that can create X amount of pie charts.
Got it. So following my original comment. I hard coded the 2 tuple variable in the data section just to get the basic idea running. So the variable data was not used. But, I followed through with just simply creating an array of charts. With a naming convention of pieContainer+i. Where in my html code. I have 29 div elements with the convention pieContainer+1.
var charts = [];
var data = [];
function populatePieCharts(size)
{
for (i = 0; i < size; i++)
{
console.log("FFFF" + i)
charts[i] = new CanvasJS.Chart("pieContainer" + i,
{
title: {
text: i
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type:"pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 4181563, indexLabel: "PlayStation 3" },
{ y: 2175498, indexLabel: "Wii" },
{ y: 3125844, indexLabel: "Xbox 360" },
{ y: 1176121, indexLabel: "Nintendo DS" }
]
}]
});
}
renderCharts(size)
}
function renderCharts(chartAmount)
{
console.log(charts.length);
for (i2 = 0; i2 < chartAmount; i2++)
{
charts[i2].render();
console.log(i2);
}
}
Which leads me to another step. Instead of hard coding the 29 div elements. I could probably just dynamically create the div elements based on the pie charts needed.
i am a new when it comes to jquery and javascript but I'm trying learn slowly.What my question is, if i have a json file that looks like
var data= [{"tasknumber":304030,
"date":"2012-05-05",
"operator":"john doe"},
{"tasknumber":23130,
"date":"2012-07-07",
"operator":"john doeeeeeeee"},
{"tasknumber":233330,
"date":"2012-08-08",
"operator":"john doe"}]
and i applied .countBy to it from the underscore library to get a array that looks like this
{"john doe":2,"john doeeeeeeee":1}
so for the next part im using a sample jquery graph outline which i found online
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
I tried a couple ways to call my new array within this part of the code
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
//insert here
]
}
]
but i only get blank screens and undefine when i try and open it.does anyone have any guidance for me on how to call my array within the datapoints?
my data is in a different file called task.json and i gotta call it using
var input=require('./task.json');
const _ = require(`underscore`);
var names=_.countBy(input,'operator');
Lets say, your JSON object is stored in some variable(eg: myObject).
var myObject = {"john doe":2,"john doeeeeeeee":1};
Declare a variable to store dataPoints from your JSON and push dataPoints into your array.
var dps = [];
for(var element in myObject) {
dps.push({label: element, y: myObject[element]});
}
Once you have done this, assign this variable (dps) to dataPoints of CanvasJS chart.
data: [
type: "column",
dataPoints: dps
]
You can see a working example in this fiddle.
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'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.