I am using Plotly to show a duration of an event with start Time, end Time and duration details on the tooltip.
I am adding type= scatter and adding 4 markers at the corner of every rectangle. I'm storing all data like - Start Time, End Time , Duration as customData[0] ,customData1 ,customData[2] respectively.
The data appears fine on the hover template but I want to show the same data for the name because the user should see the tooltip throughout the entire area and not just at the corners where markers are present.
However, text: '%{customdata[0]}', nor name:'%{customdata[0]}', is working.
Any suggestions?
const graphData = {
x: DataX,
y: DataY,
xaxis: 'x',
yaxis: 'y3',
mode:"markers",
fill: "toself",
customdata: ['StartTime','endTime','duration'], // N*3 Array
fillcolor: "rgb(0, 0, 0,)",
opacity:.6,
marker: {sizeref: 4000, sizemode: "area",size:.05, color:'#000000', opacity:1 },
hoverinfo: "<br>Start Date: %{customdata[0]}<br> Duration : %{customdata[2]} <br> End Date : %{customdata[1]}",
legendgroup: "rgb(0, 0, 0)",
hovertemplate :"<br>Start Date: %{customdata[0]}<br> Duration : %{customdata[2]} <br> End Date : %{customdata[1]} ",
text: '%{customdata[0]}',
// hoverinfo:'text',
name:'%{customdata[0]}',
type: "scatter",
};
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 am using jqplot.PieRenderer and need my percentages to round to 2 decimal places. I have formatted the text labels to include a percentage for ADA Compliance, so the users are not solely relying on colors in the legend matching the percentages. However, my bar chart is rounding to a whole number.
Currently the code is:
$(document).ready(function(){
var data = [ OMMITTED_PII_IN_CODE ];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: {
show:true,
location: 's',
border: '0px',
fontSize: '12px',
// Breaks the ledgend into horizontal.
rendererOptions: {
numberRows: '4',
numberColumns: '3'
}
}
,
series: [{color:"#000000"}],
seriesColors: ["#d1ded4","#b8c8bb","#7a9f83","#F4D03F","#337ab7","#ccc","#fcf8e3","#f2dede"],
title: {
text: 'WVSOM Contributions Breakdown'
}
}
); // end plot chart
}); // end document ready
You can use the dataLabelFormatString to specify the format you want the labels in the segments to be. If you define the following within rendererOptions it will display to 2 decimal places:
dataLabelFormatString: '%#.2f%'
%#.2f tells it to display to 2 decimal places, and the % at the end will display a percent symbol after the number.
You will end up with something like this:
Please see this Fiddle for a working example
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],
)