What I need is to build the chart as on this image:
I'm trying to do this by combining two types of series "verticalRangeArea" and "scatterLine". For some reason they are not working together.
$("#chart").kendoChart({
valueAxis: {
min: new Date("2014/01/01 08:00").getTime(),
max: new Date("2014/01/01 17:00").getTime(),
majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds
labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}
},
series: [
{
type: "scatterLine",
data: [[new Date("2014/01/01 09:30").getTime(), 5], [new Date("2014/01/01 09:30").getTime(), 11]]
},
{
type: "verticalRangeArea",
data: [[new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()], [new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()]],
},
{
type: "verticalRangeArea",
data: [[new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()], [new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()]],
}],
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
I came to the next solution:
var data = {
points: [
[new Date("01/01/2013 01:00"), 2],
[new Date("01/01/2013 01:20"), 5],
[new Date("01/01/2013 01:30"), 3],
[new Date("01/03/2013 15:00"), 1]
],
plotBands: [
{ from: new Date("01/01/2013"), to: new Date("01/02/2013"), name: "name1", color: "coral", opacity: 0.5 },
{ from: new Date("01/03/2013"), to: new Date("01/04/2013"), name: "name2", color: "blue", opacity: 0.5 }
]
};
$("#chart").kendoChart({
zoomable: true,
series: [
{
type: "scatterLine",
data: data.points,
color: "red",
width: 2
}
],
xAxis: {
type: "date",
plotBands: data.plotBands,
name: "xAxis",
baseUnit: "hours",
min: new Date("01/01/2013"),
max: new Date("01/04/2013"),
crosshair: {
tooltip: {
visible: true,
background: "#ff6800",
format: "{0:dd/MM/yyyy HH:mm}"
},
visible: true
}
},
render: function(e) {
var plotBands = data.plotBands;
var xAxis = e.sender.getAxis("xAxis");
var group = new kendo.drawing.Group();
for(var i = 0; i < plotBands.length; i++) {
var slot = xAxis.slot(plotBands[i].from);
var labelPos = [slot.origin.x + 10, 20 ];
var label = new kendo.drawing.Text(plotBands[i].name, labelPos, {
fill: {
color: "black"
},
font: "18px Arial,Helvetica,sans-serif"
});
group.append(label);
}
e.sender.surface.draw(group);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
Related
I have a chart with one value per day. Somehow it only labels 5 days on the x-axis.
How can I make it label all the days between the set min and max date (as far as I know tickAmount does not work with type datetime)?
And how can I remove the offset on the x-axis so that the point for every day is directly above its label (See offset here)?
var options = {
series: [{
name: 'Series1',
data: [
5, 6, 5.5, 7, 1, 3, 4
]
}],
chart: {
height: 250,
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors:['#000000'],
xaxis: {
type: 'datetime',
categories: [
'2022-07-20 00:00:00', '2022-07-21 00:00:00', '2022-07-22 00:00:00', '2022-07-23 00:00:00', '2022-07-24 00:00:00', '2022-07-25 00:00:00', '2022-07-26 00:00:00'
],
min: new Date("2022-07-20 00:00:00").getTime(),
max: new Date("2022-07-26 00:00:00").getTime(),
labels: {
formatter: function(val) {
return moment(new Date(val)).format("ddd");
},
style: {
colors: '#000000',
},
datetimeUTC: false, // Do not convert to UTC
},
},
yaxis: {
labels: {
style: {
colors: '#000000',
},
formatter: function (val) {
return val.toFixed(0)
},
},
tickAmount: 10,
min: 0,
max: 10
},
};
document.getElementById("chart").innerHTML = "";
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="chart"></div>
</body>
</html>
<script src="moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Found a solution for the problems you mention, we removed the tags:
type inside xaxis
min and max
We add the tickAmount tag with value 6 (7 ticks 0-6).
Another problem detected has been the value of the labels since 5.5 rounded it to 6, so that it does not happen we add it inside the tooltip label
y: {
formatter: function (val) {
return val.toFixed(1);
}
}
I leave the solution in react below.
CodeSandbox solution
Result of the solution in photo
I want to create a diagram with Chart.js where the x-Axes is the time.
I want the diagram to show a entire day (from 0 a.m. to 24 p.m.).
Since my data doesn't start at 0 a.m. and doesn't end at 24 p.m. I wanted to set a min and max value for the axes. I tried some varietions but nothing really worked.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="my-chart.js"></script>
</body>
</html>
my-chart.js:
// setup block
const data = {
datasets: [{
label: 'Sales',
data: [
{x: '2021-08-08T13:12:23', y:3},
{x: '2021-08-08T13:12:45', y:5},
{x: '2021-08-08T13:12:46', y:6},
{x: '2021-08-08T13:13:11', y:3},
{x: '2021-08-08T13:14:23', y:9},
{x: '2021-08-08T13:16:45', y:1}
],
borderColor: 'rgba(234,124,234,0.4)',
backgroundColor: 'rgba(34,14,24,0.4)'
}]
};
// config block
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
}
},
y: {
beginAtZero: true
},
xAxes: [{
type: "time",
time: {
min: 1628373600,
max: 1628460000
}
}]
}
}
};
// render / init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
Is there a mistake in my code or why it isn't changing anything?
You are trying to use v2 and v3 config at the same time, this wont work. You need to remove the array format and only use the objects to define scales.
When placing the min and max props at the root of the x object for the x scale it works fine, although the time between the min and max you are using is only 1,5 minute:
// setup block
const data = {
datasets: [{
label: 'Sales',
data: [{
x: '2021-08-08T13:12:23',
y: 3
},
{
x: '2021-08-08T13:12:45',
y: 5
},
{
x: '2021-08-08T13:12:46',
y: 6
},
{
x: '2021-08-08T13:13:11',
y: 3
},
{
x: '2021-08-08T13:14:23',
y: 9
},
{
x: '2021-08-08T13:16:45',
y: 1
}
],
borderColor: 'rgba(234,124,234,0.4)',
backgroundColor: 'rgba(34,14,24,0.4)'
}]
};
// config block
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
},
min: '2021-08-08T00:00:00',
max: '2021-08-08T23:59:59'
},
y: {
beginAtZero: true
}
}
}
};
// render / init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="my-chart.js"></script>
</body>
</html>
I tried to create my chart using leaflet and caught an error that say L.minichart is not a function. And here is my script :
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.js"></script>
<script src="assets/js/leaflet.ajax.js"></script>
<script type="text/javascript">
var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});
map.addLayer(LayerKita);
// script pie chart coba dari github
var options = {
data: {
'dataPoint1': 5 * 20,
'dataPoint2': 7 * 20,
'dataPoint3': 9 * 20,
'dataPoint4': 3 * 20
},
chartOptions: {
'dataPoint1': {
fillColor: '#FEE5D9',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint2': {
fillColor: '#FCAE91',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint3': {
fillColor: '#FB6A4A',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint4': {
fillColor: '#CB181D',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
}
},
weight: 1,
color: '#000000',
}
var barChartMarker = L.minichart([-7.900886,110.073918], {data: [1, 2, 3], maxValues: 3});
map.addLayer(barChartMarker);
</script>
You have not imported the library. Include it inside the head tag after importing leaftet css and js:
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>
</head>
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});
map.addLayer(LayerKita);
// script pie chart coba dari github
var options = {
data: {
'dataPoint1': 5 * 20,
'dataPoint2': 7 * 20,
'dataPoint3': 9 * 20,
'dataPoint4': 3 * 20
},
chartOptions: {
'dataPoint1': {
fillColor: '#FEE5D9',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function(value) {
return value.toFixed(2);
}
},
'dataPoint2': {
fillColor: '#FCAE91',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function(value) {
return value.toFixed(2);
}
},
'dataPoint3': {
fillColor: '#FB6A4A',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function(value) {
return value.toFixed(2);
}
},
'dataPoint4': {
fillColor: '#CB181D',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function(value) {
return value.toFixed(2);
}
}
},
weight: 1,
color: '#000000',
}
var barChartMarker = L.minichart([-7.900886, 110.073918], {
data: [1, 2, 3],
maxValues: 3
});
map.addLayer(barChartMarker);
</script>
</body>
</html>
I'm trying to make a chart like this screenshot.
Now i'm using chartjs as given below:-
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart"></canvas></div>
</div>
<script>
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false,'start'].forEach(function(boundary, index) {
utils.srand(8);
new Chart('chart', {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
});
</script>
</body>
</html>
There is issue this is not exactly as screenshot, how can i make it same as in screenshot?
You are using the charts correctly, and you are using the appropriate type: line. All you have to do to show a chart exactly as the image's is set the right values. I hope this gives you an idea
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
const canvas = document.getElementById('chart-' + index);
if(canvas)
{
utils.srand(8);
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
//data: generateData(),
data: [0, 0, 40, 0,0, 50, 0, 0, 0],
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
}
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
</div>
</body>
</html>
I've created a chart diagram with C3.js.
It is generating chart perfectly.
<!DOCTYPE html>
<html>
<head>
<title>D3</title>
<!-- Load c3.css -->
<link href="c3_library/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="d3_lib/d3.v3.min.js" charset="utf-8"></script>
<script src="c3_library/c3.min.js"></script>
<script src="jquery/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div id="chart1"></div>
<button onclick="loadData()">Load Data 2</button>
<script type="text/javascript">
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%H:%M',
columns: [
['x', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43', '10:44', '10:45', '10:46', '10:47', '10:48', '10:49', '10:50', '10:51', '10:52'],
['User Logins', 0, 2, 0, 0, 0, 8, 0, 0, 0, 10, 0, 0, 0, 5, 0, 0]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: true,
tick: {
format: '%H:%M'
}
}
}
});
function loadData() {
chart.load({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%H:%M',
columns: [
['x', '10:28', '10:29', '10:30', '10:31', '10:32', '10:33', '10:34', '10:35', '10:36', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43'],
['User Logins', 50, 2, 0, 2, 3, 4, 0, 0, 0, 10, 2, 0, 9, 5, 0, 0]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: true,
tick: {
format: '%H:%M'
}
}
}
});
}
</script>
</body>
</html>
But when call chart.load() function it is not changing the chart. Also not showing any error. code snippet is attached here with. Here I've created a chart with using both x and y axis datasets.
You cannot load all in the load method (you can load rows, and columns) try this:
chart.load({
columns: [
[ 'x','10:28','10:29','10:30','10:31','10:32','10:33','10:34','10:35','10:36','10:37','10:38','10:39','10:40','10:41','10:42','10:43' ],
[ 'User Logins',50,2,0,2,3,4,0,0,0,10,2,0,9,5,0,0]
]
});