Data from chart don't showed. Labels - ok, data - nothing)
There is only links for chart.js and canvas initialization in HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> -->
<title>Title</title>
</head>
<body>
<h2>text</h2>
<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</body>
<script src="/Users/***/Documents/django_website/js.js"></script>
</html>
JS code divided bay two parts: the first -creation data for future use in chart, the second - chart creation.
JS
var lineChartData = { labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"], datasets: [] },
array = ["[0,0,36,0,0,0,0,0]", "[20,60,15,9,2,3,39,364]"];
function getDataset(index, data) {
return {
datasets: [{
backgroundColor: ["#c45850", "#3cba9f","#8e5ea2","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9"],
data: data
}]
};
}
array.forEach(function (a, i) {
lineChartData.datasets.push(getDataset(i, JSON.parse(a)));
});
// -----------------------------------------------------------------------------
new Chart(document.getElementById("bar-chart-horizontal"), {
type: 'horizontalBar',
data: {
labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"],
lineChartData
},
options: {
legend: { display: false },
title: {
display: true,
text: ''
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
It looks like there is a small mistake, but I can't find it.
Give this a shot:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<title>Title</title>
</head>
<body>
<h2>text</h2>
<canvas id="bar-chart-horizontal" width="1100" height="400"></canvas>
</body>
<script>
const labels = [
"Australia",
"China",
"USA",
"New Zealand",
"Sweden",
"Norway",
"Finland",
"Netherlands",
];
const backgroundColor = [
"#c45850",
"#3cba9f",
"#8e5ea2",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
];
const chartPlots = [
[0, 0, 36, 0, 0, 0, 0, 0],
[20, 60, 15, 9, 2, 3, 39, 364],
];
const datasets = chartPlots.map((data, index) => ({
data,
backgroundColor,
}));
const data = {
labels,
datasets,
};
const options = {
legend: { display: false },
title: {
display: true,
text: "Chart Title",
},
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
},
],
},
};
const chartConfig = {
type: "horizontalBar",
data: data,
options,
};
new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
</script>
</html>
Related
I tried to pass data from data.json to mustache template in order to create bar graph.
I am unable to figure out where exactly I need to pass the data to get the graph right.
Please help me to figure out by reviewing the following code snippets.
<html>
<body>
<div>
<canvas height="200px" width="300px" id="bar-graph"></canvas>
</div>
<script>
const barCtx = document.getElementById('bar-graph').getContext('2d');
new Chart(barCtx, barGraphConfig());
function barGraphConfig() {
return {
type: 'bar',
data: {
datasets: [{
data: {{barGraph}},
borderRadius: 5,
backgroundColor: [
'#fece8c',
'#a28cfe',
'#a28cfe',
'#feab8c',
'#8ca2fe',
'#8ca2fe',
],
barThickness: 20
}],
labels: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B']
},
options: {
plugins: { legend: { display: false } },
showTooltip: false,
animation: {
duration: 0,
onComplete: renderDataLabel,
},
parsing: {
xAxisKey: 'sector',
yAxisKey: 'value'
},
scales: {
x: {
grid: {
borderWidth: 3,
borderColor: '#232323',
display: false,
},
},
y: {
display: false,
beginAtZero: true
}
}
},
};
}
</script>
</body>
</html>
data.json
barGraph: [
{
"name": "A",
"value": 4
},
{
"name": "AAA",
"value": 10
},
{
"name": "B",
"value": 40
},
{
"name": "BB",
"value": 20
},
{
"name": "BBB",
"value": 7
}
]
The error we are getting
You can use the structure of the data.json as dataset.data. But to enable CHART.JS to read correctly the data, you should set options.parsing option at chart level, as following:
options: {
parsing: {
xAxisKey: 'name',
yAxisKey: 'value'
}
}
See documentation of CHART.JS: https://www.chartjs.org/docs/latest/general/data-structures.html#object-using-custom-properties
const barGraph = [
{
"name": "A",
"value": 4
},
{
"name": "AAA",
"value": 10
},
{
"name": "B",
"value": 40
},
{
"name": "BB",
"value": 20
},
{
"name": "BBB",
"value": 7
}
];
const barCtx = document.getElementById('myChart').getContext('2d');
new Chart(barCtx, barGraphConfig());
function barGraphConfig() {
return {
type: 'bar',
data: {
datasets: [
{
data: barGraph,
borderRadius: 5,
backgroundColor: [
'#fece8c',
'#a28cfe',
'#a28cfe',
'#feab8c',
'#8ca2fe',
'#8ca2fe',
],
barThickness: 20
}
],
},
options: {
parsing: {
xAxisKey: 'name',
yAxisKey: 'value'
}
}
};
}
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I would like to create a time line like this:
[1]: https://i.stack.imgur.com/RQ819.png
But I don't understand how to put green into the top bar and yellow into the bottom bar.
This is what I got so far but I don't find anything how to make group only for one bar.
// Set Up
const labels = ["ONLINE", "IDLE"];
const data = {
labels: labels,
datasets: [
{
label: "ONLINE",
data: [
["2022-01-01", "2022-01-02"],
["2022-01-03", "2022-01-04"],
],
backgroundColor: ["green"],
},
{
label: "IDLE",
data: [
["2022-01-02", "2022-01-03"],
["2022-01-04", "2022-01-05"],
],
backgroundColor: ["orange"],
},
],
};
// Config
const config = {
type: "bar",
data: data,
options: {
responsive: true,
indexAxis: "y",
scales: {
xAxis: {
min: "2022-01-01",
type: "time",
time: {
unit: "day",
},
ticks: {
display: false,
},
},
yAxes: {
stacked: true,
beginAtZero: true,
},
},
},
};
// Render Chart
const myChart = new Chart(document.getElementById("myChart"), config);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
You need to define a separate datasets for each floating bar.
Please take a look at your amended code and see how it works.
const data = {
labels: ["ONLINE", "IDLE"],
datasets: [{
label: "Jan 1 - Jan 2",
data: [["2022-01-01", "2022-01-02"],],
backgroundColor: "green"
},
{
label: "Jan 2 - Jan 3",
data: [,["2022-01-02", "2022-01-03"]],
backgroundColor: "orange"
},
{
label: "Jan 3 - Jan 4",
data: [["2022-01-03", "2022-01-04"],],
backgroundColor: "green"
},
{
label: "Jan 4 - Jan 5",
data: [,["2022-01-04", "2022-01-05"]],
backgroundColor: "orange"
}
]
};
const config = {
type: "bar",
data: data,
options: {
responsive: true,
indexAxis: "y",
scales: {
x: {
min: "2022-01-01",
type: "time",
time: {
unit: "day"
}
},
y: {
stacked: true
}
}
}
};
const myChart = new Chart("myChart", config);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
I'm developing application based on REST architecture and CRUD assumptions using Java, Spring, Hibernate, and AmCharts Library.
But in my project I have a problem with reloading data in a candle chart (stock chart) from AmCharts.
My JavaScript code:
var request;
firstDeploy();
function firstDeploy() {
request = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=tBTCUSD&timeFrame=1D';
}
var candleChart = AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "value"
}],
color: "#7f8da9",
dataLoader: {
url: request,
format: 'json'
},
title: "tBTCUSD",
categoryField: "date"
}],
panels: [{
title: "Value",
showCategoryAxis: false,
percentHeight: 70,
valueAxes: [{
id:"v1",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
type: "candlestick",
id: "g1",
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#7f8da9",
fillColors: "#7f8da9",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
useDataSetColors: false,
comparable: true,
compareField: "value",
showBalloon: false
}],
stockLegend: {
valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%"
}
},
{
title: "Volume",
percentHeight: 30,
marginTop: 1,
showCategoryAxis: true,
valueAxes: [{
id:"v2",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
markerType: "none",
markerSize: 0,
labelText: "",
periodValueTextRegular: "[[value.close]]"
}
}
],
chartCursorSettings: {
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW",
updateOnReleaseOnly:false
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
$(options)
function options() {
var handler = handleDropdown(handleResults)
handler('#time-frame-list', 'time')
handler('#currency-pair-list', 'currency')
}
function handleResults(results) {
var mainRequest = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=t';
var resultsArray = JSON.stringify(results);
var currencyPair = resultsArray.substr(25,6);
var timeFrame = resultsArray.substr(9,2);
request = mainRequest + currencyPair + '&timeFrame=' + timeFrame;
candleChart.dataLoader.url = request;
candleChart.dataLoader.loadData();
console.log(request);
}
function handleDropdown(handler) {
var options = {}
return function(selector, key) {
options[key] = $(selector).val()
$(selector).change(function(event) {
options[key] = this.options[event.target.selectedIndex].value
handler(options)
})
}
}
My HTML code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>amStock Example</title>
<link rel="stylesheet" href="style.css">
<script src="amcharts.js" type="text/javascript"></script>
<script src="serial.js" type="text/javascript"></script>
<script src="amstock.js" type="text/javascript"></script>
<script src="dataloader.min.js" type="text/javascript"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="cryptoscript.js" type="text/javascript"></script>
</head>
<body style="background-color:#FFFFFF">
<center>
<div class="chart-background">
<div class="drop-down-menus">
<div class="time-frame-dropdown">
<select id="time-frame-list">
<option value="1D" selected>1D</option>
<option value="1h">1H</option>
</select>
</div>
<div class="currency-pair-dropdown">
<select id="currency-pair-list">
<option value="BTCUSD" selected>BTCUSD</option>
<option value="ETHUSD">ETHUSD</option>
</select>
</div>
</div>
</div>
<div id="chartdiv" class="chart-candle" style="width:50%; height:600px;"></div>
</div>
</center>
</body>
</html>
My RestController:
#RestController
#RequestMapping("v1/crypto")
public class CandleRestController {
#Autowired
private DbService service;
#Autowired
private CandleMapper candleMapper;
#RequestMapping(method = RequestMethod.GET, value = "getCandles")
public CandleDtoCharts[] getCandleList(#RequestParam String currencyPair, #RequestParam String timeFrame) {
System.out.println(currencyPair + " " + timeFrame);
return candleMapper.mapToCandleDtoChartsList(service.getCandlesByCurrencyPairAndTimeFrame(currencyPair, timeFrame));
}
}
I know that my RestController is receiving all the time the same "request" (url) after choosing other currency pair/or time frame and I don't know why?
You have to update the dataLoader url inside the dataSet. You're updating it at the chart level, which doesn't work in the stock chart.
candleChart.dataLoader.url = request; //this doesn't work in a stock chart
candleChart.dataSets[0].dataLoader.url = request; //this does.
I tried implementing the bubble chart as given on the official site of chartjs
http://www.chartjs.org/docs/latest/charts/line.html
but it only displays the grid without any data points.
It also does not show any errors.
Here's the code
var ctx = document.getElementById("myChart");
var data = [{x:10, y:10, r:10}];
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<body>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>
</body>
</html>
What am i missing ?
You are defining the data property incorrectly. It should be an object (consist of other properties) not an array.
So, you should use ...
...
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
...
instead of ...
...
data: data,
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById("myChart");
var data = [{
x: 10,
y: 10,
r: 10
}];
// For a bubble chart
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>
The data object should be structured differently.
For instance...
data: {
datasets: [{
label: ["Label"],
data: [{x: 3, y:4, r:5}]
}]
},
I'm trying to bind a DataViz pie chart locally using the Kendo UI Angular directives but keep getting this error:
TypeError: Cannot call method 'toLowerCase' of undefined
at h (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:5351)
at Object.o.aggregate (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:20999)
at g (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:5624)
at ct.extend._process (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:31624)
at ct.extend.success (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:28852)
at Object.proxy [as success] (http://localhost:51717/Scripts/jquery-1.10.2.js:841:14)
at ct.extend.read (http://localhost:51717/Scripts/kendo/kendo.web.min.js:11:21673)
at http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:28381
at ct.extend._queueRequest (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:30001)
at ct.extend.read (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:28266)
HTML
<div kendo-chart k-options="pie" k-data-source="countries" />
Angular
$scope.countries = {
data: [
{
category: "Asia",
value: 53.8,
color: "#9de219"
}, {
category: "Europe",
value: 16.1,
color: "#90cc38"
}, {
category: "Latin America",
value: 11.3,
color: "#068c35"
}, {
category: "Africa",
value: 9.6,
color: "#006634"
}, {
category: "Middle East",
value: 5.2,
color: "#004d38"
}, {
category: "North America",
value: 3.6,
color: "#033939"
}
]
};
$scope.pie = {
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
format: "{0}%"
}
};
Check your libraries to ensure you are using supported versions. Are you using the latest version of KendoUI? According to the KendoUI->Angular repo on GitHub you need:
jQuery v1.9.1 (not sure if later versions are supported)
Angular v1.0.5
KendoUI vCurrent
I created a working example on JSBin for you to check out. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular + KendoUI DataViz" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script src="http://rawgithub.com/kendo-labs/angular-kendo/master/build/angular-kendo.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="chart-example">
<div ng-controller="ChartController">
<div kendo-chart k-options="pie" k-data-source="countries" />
</div>
</body>
</html>
...
var app = angular.module('chart-example', ['kendo.directives']);
function ChartController($scope) {
$scope.pie = {
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
format: "{0}%"
}
};
$scope.countries = {
data: [
{
category: "Asia",
value: 53.8,
color: "#9de219"
}, {
category: "Europe",
value: 16.1,
color: "#90cc38"
}, {
category: "Latin America",
value: 11.3,
color: "#068c35"
}, {
category: "Africa",
value: 9.6,
color: "#006634"
}, {
category: "Middle East",
value: 5.2,
color: "#004d38"
}, {
category: "North America",
value: 3.6,
color: "#033939"
}
]
};
}