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],
)
Related
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!
I've been trying for 3 days to get this chart to display the way I want it to. Everything was working 100% until I realized the grouped bar chart numbers were off.
Example: When the bottom bar value equals 10 and the top bar value equals 20, the top of the grouped bar read 30. This is the default behavior, but not how I want to represent my data. I want the top of the grouped bar to read whatever the highest number is, which lead me to this fiddle representing the data exactly how I wanted to.
After refactoring my logic, this is what I have so far. As you can see the timeseries line is broken up and the tooltip is not rendering the group of data being hovered over.
My questions:
1) How to get the tooltip to render all three data points (qty, price, searches)
2) How to solidify the timeseries line so it's not disconnected
Any help would be greatly appreciated so I can move on from this 3 day headache!
Below is most of my code - excluding the JSON array for brevity, which is obtainable at my jsfiddle link above. Thank you in advance for your time.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x-axis',
type: 'bar',
json: json,
xFormat: '%Y-%m-%d',
keys: {
x: 'x-axis',
y: 'searches',
value: ['qty', 'searches', 'price']
},
types: {
searches: 'line'
},
groups: [
['qty', 'price']
],
axes: {
qty: 'y',
searches: 'y2'
},
names: {
qty: 'Quantity',
searches: 'Searches',
price: 'Price ($)'
},
colors: {
price: 'rgb(153, 153, 153)',
qty: 'rgb(217, 217, 217)',
searches: 'rgb(255, 127, 14)'
}
},
bar: {
width: {
ratio: 0.60
}
},
axis: {
x: {
type: 'timeseries',
label: { text: 'Timeline', position: 'outer-right' },
tick: {
format: '%Y-%m-%d'
}
},
y: {
type: 'bar',
label: {
text: 'Quantity / Price',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Searches',
position: 'outer-middle'
}
}
},
tooltip: {
grouped: true,
contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
var data = this.api.data.shown().map(function(series) {
var matchArr = series.values.filter(function(datum) {
return datum.value != undefined && datum.x === d[0].x;
});
if (matchArr.length > 0) {
matchArr[0].name = series.id;
return matchArr[0];
}
});
return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color);
}
}
});
1) If I got it right, you want tooltip to show all values, even if some of them are null.
Null values are hidden by default. You can replace them with zero (if it is suitable for your task) and thus make them visible.
Also, it seems to me that there is a shorter way to get grouped values:
var data = chart.internal.api.data().map(function(item) {
var row = item.values[d[0].index]; // get data for selected index
if (row.value === null) row.value = 0; // make null visible
return row;
});
2) I think you are talking about line.connectNull option:
line: {
connectNull: true
}
UPDATE
Looks like having duplicate keys breaks work of api.data() method.
You need to change json structure to make keys unique:
Before:
var json = [
{"x-axis":"2017-07-17","qty":100},
{"x-axis":"2017-07-17","price":111},
{"x-axis":"2017-07-17","searches":1},
{"x-axis":"2017-07-18","qty":200},
{"x-axis":"2017-07-18","price":222},
{"x-axis":"2017-07-18","searches":2}
];
After:
var json = [
{"x-axis":"2017-07-17","qty":100,"price":111,"searches":1},
{"x-axis":"2017-07-18","qty":200,"price":222,"searches":2}
];
See fiddle.
I have some series on jQplot for which I have set highlight options. My idea is to use %H:%M:%S for time format in highlight and %H:%M but cant set it.
axes:{
xaxis:{
autoscale: true,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
showTicks: true,
formatString:'%e %b %H:%M:%S',
fontSize: '11px',
},
},
},
highlighter: {
show: true,
sizeAdjust: 12,
tooltipContentEditor: customTooltip,
formatString: '#serieLabel#<br/>%s | %s',
},
If you want to use a different date/time format in the tooltip (highlight) than the date/time format used on the x-axis, rather than using formatString you can use the tooltipContentEditor to define a function that will return the formatted string to display in the tooltip.
Assuming you want the x-axis to show dates in the format %e %b %H:%M:%S (e.g. 29 Oct 04:12:12) but you want the tooltip to show them in the format %H:%M (e.g. 12:12) you can use the following code (unchanged from your code snippet above) to define the axes:
axes: {
xaxis: {
autoscale: true,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
showTicks: true,
formatString: '%e %b %H:%M:%S',
fontSize: '11px',
},
},
},
and the following code to define the highlighter:
highlighter: {
show: true,
sizeAdjust: 12,
tooltipContentEditor: function(str, seriesIndex, pointIndex, plot) {
// x-axis value
var date = series[seriesIndex][pointIndex][0];
// jqPlot formatter function for date/time (used by $.jqplotDateTickFormatter)
var formatter = $.jqplot.DateTickFormatter;
// Do the formatting
var formattedDate = formatter('%H:%M', date);
// y-axis value for series hovered over
var seriesValue = series[seriesIndex][pointIndex][1];
return '#serieLabel#<br/>' + formattedDate + '|' + seriesValue;
}
},
Here we are using a custom function tooltipContentEditor which retrieves the date/time from the series hovered over and formats it using $.jqplot.DateTickFormatter. The function then concatenates the strings together to return the text to display in the tooltip. The key lines for formatting the date/time correctly are:
// DateAxisRenderer
var formatter = $.jqplot.DateTickFormatter;
// Do the formatting
var formattedDate = formatter('%H:%M', date);
This produces the following tooltip when a data point is hovered over:
A working example can be seen here.
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.