I'm a bit lost here while using AMCharts5. There are just too many configuration parameters. So, let's assume the following data series:
{
date: new Date(2021, 0, 5).getTime(),
value: 156
},
{
date: new Date(2021, 0, 6).getTime(),
value: 33
},
one sample per day DEMO
My question is about the labels on the X axis. In that demo its shows the days, 01/01, 01/02, etc. But what I would like to have is: week 1, week 2, etc. So we need data grouping (I think). I tried the following
// Create X-Axis
let xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
groupData: true,
baseInterval: { timeUnit: "week", count: 7 },
renderer: am5xy.AxisRendererX.new(root, {})
})
);
DEMO
but considering the outcome, I get the impressing I'm tweaking the wrong parameters here :)
Any help would be appreciated!
Related
I am looking to create a donut chart where instead of the pieces of the pie showing the percentage of the total, i'd like it to highlight the label/legend for each element?
I have tried using the formatter function e.g.
formatter: function(value, { seriesIndex, dataPointIndex, w }) {
return w.config.series[seriesIndex].name + ": " + value.toFixed(0)+ " %"
},
But this generates labels on each of the donut segments - undefined: 26 %
Would appreciate any thoughts on how to do this.
Many thanks,
Nigel
For donut charts, the labels are stored separately from the data value (i.e. series).
When creating the chart you'll pass these values:
options = {
series: [44, 55, 13, 33],
labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}
Or if using React/Vue:
series: [44, 55, 13, 33],
chartOptions: {
labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}
(Both examples from the documentation, with slight modification.)
This means that to access the labels in the formatter function, we need to reference labels instead of series. We can also drop the .name.
formatter: function(value, { seriesIndex, dataPointIndex, w }) {
return w.config.labels[seriesIndex] + ": " + value.toFixed(0)+ " %"
},
I am creating scatter plot and its working fine until I choose time range from calendar which does not contain data. I have data until May 2021 so when I go for 1 Year its fine, but when I choose last 4 months, it gives me error - for X axis Infinite extent for field "time": [Infinity, -Infinity] and also error for Y axis Infinite extent for field "Kilometers": [Infinity, -Infinity].
Its probably problem in date conversation but why its working for periods containing data and why is it giving me error for kilometers as well. Any help here please?
Elastic query returns timefield in unix time.
Thank you
(I have same problem also with line chart in vega)
Screenshot of error
{
$schema: https://vega.github.io/schema/vega-lite/v2.6.0.json
data: {
url: {
%context%: true
%timefield%: timefield
index: indextrains
body: {
size: 10000
_source: [
timefield
km
]
}
}
format: {
property: hits.hits
}
}
transform: [
{
calculate: datetime(datum._source['timefield'])
as: time
}
{
calculate: datum._source['km']
as: Kilometers
}
]
mark: {
type: circle
}
encoding: {
x: {
field: time
type: temporal
}
y: {
field: Kilometers
type: quantitative
}
}
}
js is a very good library, but I have a problem:
in my graph each bar represents a value produced between two hours, but the tick text is below the bar and I want to get it between the bar !
my type of x-axis is "type: 'category'"
data = ['x', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']
Can someone help me?
Thank you in advance.
I have :
http://hpics.li/9fc4863
I want :
http://hpics.li/1fb1090
You could convert your x axis to a timeseries and have the values tagged to the actual midpoint of your hour ranges (12.30, 1.30...)
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x',
new Date('2013-01-01T00:30'),
new Date('2013-01-01T01:30'),
new Date('2013-01-01T02:30'),
new Date('2013-01-01T03:30')],
['data1', 30, 200, 100, 400]
],
type: 'bar'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M',
values: [
new Date('2013-01-01T00:00'),
new Date('2013-01-01T01:00'),
new Date('2013-01-01T02:00'),
new Date('2013-01-01T03:00'),
new Date('2013-01-01T04:00')
],
rotate: -90
},
height: 50
}
}
});
Fiddle - http://jsfiddle.net/v4z45zzj/
I have a c3js line graph of type timeseries.
My axis tables are currently like this:
11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13
and it want it to be
.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....
where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.
Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?
UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated!
UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.
This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy.
HTML (Include the d3.js, c3.js, and c3.css scripts too)
<body>
<div id="chartContainer"></div>
</body>
JS
var chart = c3.generate({
bindto: '#chartContainer',
data: {
x: 'x',
columns: [
['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if((x.getMonth()+1) % 6 === 0) {
return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
}
}
}
}
},
tooltip: {
format: {
title: function (d) {
var format = d3.time.format('%m/%y');
return format(d)
}
}
}
});
N.B. Also be aware that culling might interfere with this. I had to set culling: {max: 100} to ensure any built in incrementations are not applied.
I'm used the following code to generate the jqplot line chart there is some issues occurred in y-axis point .the x-axis value 'feb,march,apr,may ' the first point showing correctly and other points are moving to between march and apr points.kindly refer the images for clarification .Please help me .Thank in advance
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var line1 = new Array(2);
var line1=[['2013-02-28',1756403],['2013-03-31',0],['2013-04-30',0]];
var line2 = new Array(2);
var line2=[['2013-02-28',107],['2013-03-31',0],['2013-04-30',0]];
var plot1 = $.jqplot('chart', [line1,line2], {
gridPadding:{right:35},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
tickOptions:{
formatString:'%b',
fontSize:'9pt',
fontFamily:'sans-serif',
tickInterval:'1 month'
},
min:line1[0][0]
},
yaxis:{
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{
fontSize:'9pt',
fontFamily:'sans-serif',
formatString:'%i'
},
min: 1
}
},
seriesColors: ["#49AD48", "#0BC2EF"],legend: {
show: true
},
series:[{ lineWidth:4, markerOptions:{ style:'square' }, label: 'Actual'},{label: 'Plan' }],
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor:{
zoom:true,
looseZoom: true,
show:fals![enter image description here][1]e
}
});
});
I've been struggling with this all morning. While my date's were being dynamically generated by my database, I was defaulting the time to all entries to 8:00AM (as they show in jqplots examples).
The date plots are not only date, but also time sensitive. My solution was to change the default time to 12:01AM for all my plots and now they line up on grid.
I use PHP to dynamically generate my plot arrays as mentioned, they look something like this now:
[chart1] => Array
(
[plots] => ['2013-04-02 12:01AM',11, 11], ['2013-04-03 12:01AM',95, 95], ['2013-04-19 12:01AM',325, 325], ['2013-04-22 12:01AM',90, 90],
)