I know there are similar questions, and they seem to have similar answers, which I have tried to no avail.
Here is my canvasOverlay:
canvasOverlay: {
show: true,
objects: [
{verticalLine: {
x: new $.jsDate('May 29, 2014 7:58:55').getTime(),
lineWidth: 5,
color: 'rgb(0,198,0)',
shadow: false
}}]}
(the date range of the plot starts 10 seconds before this time and ends 50 after).
And here is the error I get:
[Error] TypeError: 'undefined' is not an object (evaluating 'ah._ctx')
aa (jquery.jqplot.min.js, line 3)
h (jquery.jqplot.min.js, line 3)
dispatch (jquery.min.js, line 2)
handle (jquery.min.js, line 2)
trigger (jquery.min.js, line 2)
(anonymous function) (jquery.min.js, line 3)
each (jquery.min.js, line 2)
each (jquery.min.js, line 2)
trigger (jquery.min.js, line 3)
onMouseMove (jquery.jqplot.min.js, line 3)
dispatch (jquery.min.js, line 2)
handle (jquery.min.js, line 2)
I notice that the canvasOverly plugin does not show up in the trace, which seems odd. I am including it the body, and the browser debugger (Safari) does report it having been loaded. If I comment out the canvasOverlay element, the error does not show up. Either way, the hoped-for vertical line does not appear.
The rest of the plot spec isn't particularly remarkable:
dataRenderer: ajaxDataRenderer,
dataRendererOptions: {
unusedOptionalUrl: jsonurl
},
seriesDefaults: {
lineWidth: 1.0,
showMarker: false,
yaxis: 'y2axis',
showLabel: true
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions: { showLabel: true }
},
y2axis:{
tickOptions: { formatString: "%7d" }
}
},
legend: { show: true },
The x as set in the definition of canvasOverlay would have worked; however, elsewhere in the code, it was being overwritten with a date still in text form.
Related
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",
};
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 am working with a bar chart in jqPlot where I need to show the average with a separate line on the chart. My question is how to do that? Would I need to use a Line chart for this? I have looked at few Line chart examples but they are shown as a trend in the bar chart which starts from the very first bar on the chart rather than showing the average.What I need is plotting a line using the average of all those bars displayed on the chart (screen shots as below)
My JSON string to plot the data is as follows:
var commonOption= {
title: ''
,stackSeries: true
,captureRightClick: true
,seriesDefaults:{
renderer:$.jqplot.BarRenderer
,rendererOptions: {
barMargin: 15
,highlightMouseDown: true
,fillToZero: true
},
pointLabels: {
show: true
,formatString: '%.1f'
,seriesLabelIndex:1
,hideZeros:false
}
}
,seriesColors: ['#A9CB5E']
,axes: {
xaxis: {
tickOptions:{angle:-45}
,tickRenderer: $.jqplot.CanvasAxisTickRenderer
,renderer: $.jqplot.CategoryAxisRenderer
,ticks: []
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
,padMin: 0
,pad: 1.1
, label: 'Percentage (%)'
,rendererOptions: { forceTickAt0: true}
//,min: 0
//,tickOptions:{formatString: '%.0f'},
}
}
,negativeSeriesColors:['#F08080']
/*,legend: {
show: true
,location: 'e'
,placement: 'outsideGrid'
}*/
,highlighter:{
show: true
,tooltipLocation: 's'
,yvalues: 2
,bringSeriesToFront:true
,showMarker:false
,tooltipAxes: 'y'
,formatString: "%n%s"
}
,cursor:{
show: true
,zoom:true
,showTooltip:false
,constrainZoomTo: 'y'
}
,grid:{
background: '#f8f8f8'
}
};
I believe what you are looking for is the jqplot CanvasOverlay functionality http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html
After declaring all of you options and data in the function (in your example after "grid" option):
grid:{
background: '#f8f8f8'
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'avergae',
y: 20.8, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: 'black',
shadow: false
}}
]
}
EDIT:
Yes, sorry about that. be sure not to forget to include "jqplot.canvasOverlay.min.js "
Hi I think it is better to implement a function that automatically calculates the average of the data points into the array. In fact the average of your bar char is about 18 and not 20!!
I suggest to implement a function for doing thi. See this jsFiddle example.
There is an article where it is shown how to draw and calculate the statistics for a bar chart: average, median, mode and standard deviation at this link:
http://www.meccanismocomplesso.org/en/mean-mode-median-barchart/ .
Array.prototype.average=function(){
var sum=0;
var j=0;
for(var i=0;i<this.length;i++){
if(isFinite(this[i])){
sum=sum+parseFloat(this[i]);
j++;
}
}
if(j===0){
return 0;
}else{
return sum/j;
}
}
...
canvasOverlay: {
show: true,
objects: [
{dashedHorizontalLine: {
name: 'average',
y: data.average(),
lineWidth: 3,
color: 'black',
shadow: false
}}
]
}
I am working with jqPlot's Line chart where data should be displayed for last 12 months. If current month is September then X axis will show 2012 August till 2013 September. However, I have data starting from January 2013. Therefore the lines will start from the middle of the chart till the most recent available month's data.
Problem: Lines are started from the correct position, but the pointables have not moved accordingly. Although the lines show correctly the pointables are shown from beginning of the chart.
Question: How can I move the pointables which should be on the dots instead?
Update: Seems line known issue in jqPlot (issue log)
var json= {
title: ''
,stackSeries: false
,captureRightClick: true
,seriesDefaults:{
//renderer:$.jqplot.BarRenderer
rendererOptions: {
highlightMouseDown: true
}
,pointLabels: {
show: true
,formatString: '%.1f'
,seriesLabelIndex:null
,hideZeros:true
}
,markerOptions: {
show: true,
style: 'filledCircle',
}
}
,series: [
{label: 'A', color:'#FDC12E'}
,{label: 'B', color:'#C9198D'}
,{label: 'C', color:'#56B9F9'}
,{label: 'D', color: '#F1683C'}
,{label: 'E', color: '#000000'}
]
,axes: {
xaxis: {
tickOptions:{angle:-45}
,tickRenderer: $.jqplot.CanvasAxisTickRenderer
,renderer: $.jqplot.CategoryAxisRenderer
,ticks: []
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
,padMin: 0
,pad: 1.05
,min: 0
,tickOptions:{formatString: '%.0f'},
}
}
,legend: {
show: true
,location: 's'
,placement: 'outsideGrid'
}
,highlighter:{
show: true
,tooltipLocation: 's'
,yvalues: 2
,bringSeriesToFront:true
,showMarker:false
,tooltipAxes: 'y'
,formatString: "%n%s"
}
,cursor:{
show: true
,zoom:true
,showTooltip:false
,constrainZoomTo: 'y'
}
,grid:{
background: '#f8f8f8'
}
I found a workaround until jqPlot fixes their bug. Apparently adding breakOnNull: true to seriesDefaults fixes the issue. This can be used either for pointLabels or for highlighter in JSON part.
I followed the other question's answer and made absolutely sure jquery.jqplot.css is properly included but I still can't get the colors to show. I tried with a lot of rendereres (default, bar, funnel) and none of them work. I've even tried using the enhanced legend renderer to no avail.
This is the code I'm using to render the chart. Everything shows up okay except for the legend
plot2 = $j.jqplot('chart_palnie', [serie], {
seriesDefaults: {
renderer:$j.jqplot.FunnelRenderer,
rendererOptions:{
sectionMargin: 8,
widthRatio: 0.3,
showDataLabels: true,
dataLabels: serie_labeluri,
dataLabelThreshold: 0
//dataLabelFormatString: '%s, %d'
}
},
legend: {
show:true,
location: 'e',
showLabels: true,
showSwatch: true
}
});
include CSS file jquery.jqplot.css .. this solved for me
try adding the placement option. I also include the renderOptions, but that is mostly for IE support in my case.
legend: {
show: true,
location: 'n',
placement: 'inside',
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 1,
disableIEFading: true
}
}