I am trying to create a gantt chart with Chart.js. I use horizontalBar chart type and this works fine if I populate numbers instead of dates, but it does not render when I pass dates as data.
Data structure: Task, Start Date, End Date
this.chartData = {
labels: ['Task 1', 'Task 2'],
datasets: [{
data: ['2019-01-20', '2019-01-30'],
}],
};
this.options = {
title: {
display: true,
text: 'Title of Chart',
},
legend: {display: false},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
},
}],
},
};
Template:
<chart class="chart" type="horizontalBar" [data]="chartData" [options]="options"></chart>
Tried another example
You are passing the values as strings. Try to pass as dates:
datasets: [{
label: 'Demo',
data: [{
t: new Date("2015-3-15 13:3"),
y: 12
},
Related
I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.
Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];
You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result
How can I create a stacked column chart with dynamic data?
For example, I have an external JSON object like:
[
{
id : ‘ID123’,
occurrences: [5,6,8],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
},
{
id : ‘ID456’,
occurrences: [7,2,12],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
}
]
How do I make it so there would be two stacked columns using the id as the label and the array of occurrences is used to build the stacked column on top of each label?
Edit:
Added representation of how graph should look
I would suggest using chart.js for this as it will be much easier than building it out yourself. Here is a example using the data you provided.
var barChartData = {
labels: ['ID123', 'ID456'],
datasets: [{
label: 'Hours spent working',
backgroundColor: '#FF0000',
data: [
5,
7
]
}, {
label: 'Hours spent skiing',
backgroundColor: '#00FF00',
data: [
6,
2
]
}, {
label: 'Hours spent studying',
backgroundColor: '#0000FF',
data: [
8,
12,
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
I have a chart built with the Charts.js api. The x axis is configured to show ticks on the hour via moment.js. I would like to give the option to change the X axis ticks from hour to days in the week: I know that to do this I just have to change the code in the Chart from this:
xAxes:
[{
type: 'time',
distribution: 'linear',
time:
{
unit: 'hour'
}
}],
To this:
xAxes:
[{
type: 'time',
distribution: 'linear',
time:
{
unit: 'week'
}
}],
But I can't get it to happen with a JavaScript function. I would like to be able to change this setting according to preferences, so I want to build a function that when called will change the "unit" attribute to something different. Can anyone help? Here is what I have so far:
function setXAxis()
{
chart.config.options.scales.xAxes.time.unit.push('week');
chart.update();
};
Complete chart.js code:
// Setting up progress chart via Charts.js
var ctx = document.getElementById("myChart").getContext("2d");
Chart.defaults.global.defaultFontColor = "#58a7dd";
// Configuration
var chart = new Chart(ctx,
{
type: 'line',
data:
[{
x: new Date(),
y: 1
},
{
t: new Date(),
y: 10
}],
options:
{
scales:
{
xAxes:
[{
type: 'time',
distribution: 'linear',
time:
{
unit: 'hour' //THIS IS WHAT I WANT TO CHANGE WITH THE FUNCTION
}
}],
yAxes:
[{
type: 'category',
labels: ['one', 'two', 'three', 'four', 'five']
}]
}
}
});
You can Update the options of a chart directly with its options key, not with config.options also unit is not array to push, its a key so assign value to it
in your code
function setXAxis()
{
chart.options.scales.xAxes[0].time.unit='week';
chart.update();
};
I want to create a line chart with 3 different series using ExtJS 4.2.1, but only one of them is displayed, I don't know what I'm doing wrong. I take data from XML file and add it to the store:
Ext.each(arrayOfHeaps, function(item) {
var storeObject;
if (item.description === 'HeapTotal') {
storeObject = {'heapTotalValue': item.value, 'heapTotalDate': new Date(item.date)};
}
else if (item.description === 'HeapUsed') {
storeObject = {'heapUsedValue': item.value, 'heapUsedDate': new Date(item.date)};
}
else {
storeObject = {'heapFreeValue': item.value, 'heapFreeDate': new Date(item.date)};
}
store.add(storeObject);
});
It seems to work fine. One element from store printed in console:
heapFreeDate:""
heapFreeValue:""
heapTotalDate:Thu May 11 2017 04:10:00 GMT+0200 (Środkowoeuropejski czas letni)
heapTotalValue:1607680
heapUsedDate:""
heapUsedValue:""
Code to create chart:
title: 'Wartość',
type: 'Numeric',
position: 'left',
fields: ['heapTotalValue', 'heapFreeValue', 'heapUsedValue'],
grid: true
},{
title: 'Czas',
type: 'Time',
position: 'bottom',
fields: ['heapTotalDate', 'heapFreeDate', 'heapUsedDate'],
dateFormat: 'H:i:s.u',
fromDate: new Date('2017-05-11T04:10:00.055+02:00'),
toDate: new Date('2017-05-11T12:30:00.005+02:00'),
grid: true
}],
series: [{
type: 'line',
id: 'tilingChart',
fields:['heapTotalValue', 'heapTotalDate'],
yField: 'heapTotalValue',
xField: 'heapTotalDate'
},{
type: 'line',
id: 'memoryChart',
fields:['heapFreeValue', 'heapFreeDate'],
xField: 'heapFreeValue',
yField: 'heapFreeDate'
},{
type: 'line',
id: 'defaultChart',
fields:['heapUsedValue', 'heapUsedDate'],
xField: 'heapUsedValue',
yField: 'heapUsedDate'
}]
The chart is created, but second and third series are ignored
I have multiple series rendered in my chart but I am not able to figure out how to change the name or other attributes for each series. The legend just has them as series 1, series 2, and series 3.
Here is my code:
<script type="text/javascript">
$(function() {
$.getJSON('decodeseries.php', function(data) {
// Create the chart
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {title: {text: 'Wave Height ( In Ft )'}},
xAxis: {type: 'datetime'},
title : {
text : '5 Day Forecast'
},
series: data [{
name: 'Location 1',
data: data
}, {
name: 'Location 2',
data: data
}, {
name: 'Location 3',
data: data
}]
});
});
});
</script>
JSon:
[{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}]
This actually doesn't show the chart, but its what I have been trying so far. The chart works with the above JSON when I simply use the following:
series: data
Any help would be appreciated!
Thanks
To set the color/name of a data series in your data element you need to give it those properties. As near as I can tell your data JSON is actually composed of 3 series of data:
[
{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}
]
I would change it (however it was made) to this:
[
{"name":"Location 1", "color": "acolor", "data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"name":"Location 2", "color": "anothercolor", "data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"name":"Location 3", "color": "yetanothercolor", "data":[[1385510600000,1.88],[1385521500000,0.792]]}
]
You chart code above does not render because you are doing:
series: data [{
name: 'Location 1',
data: data
}, {
name: 'Location 2',
data: data
}, {
name: 'Location 3',
data: data
}]
And it is trying to assign the data property in data to series.data which is not valid. Essentially your are saying make each of the 3 series.data = series.data.data.
Using my example above do something like :
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {title: {text: 'Wave Height ( In Ft )'}},
xAxis: {type: 'datetime'},
title : {
text : '5 Day Forecast'
},
series: data
});