little question:
I add the tickOptions formatString "%'.2f" to my axis, change decimalMark and thousandsSeparator characters at jquery.jqplot.js and jquery.jqplot.min.js, and nothing change. The same decimalMark and thousandsSeparator appears.
If I add the " '.2 " to my format string, the thousands separations and decimal appears, but with the standart characters.
Somebody know what's is wrong? I want use the european "1.000.000,00" format.
Please some little help, thanks.
(sorry my english)
a solution, adding this 2 lines:
$jqplot.sprintf.thousandsSeparator = '.';
$jqplot.sprintf.decimalMark = ',';
inside the function: (example)
var options = function($jqplot){
$jqplot.sprintf.thousandsSeparator = '.';
$jqplot.sprintf.decimalMark = ',';
return {
title: "Importe",
seriesDefaults:{renderer: $jqplot.BarRenderer, pointLabels: {show: true}},
series: paramet.resultado.series,
legend: {show: true},
axes:{
xaxis:{
renderer: $jqplot.CategoryAxisRenderer,
ticks: [""]
},
yaxis: {
tickOptions: {
formatString: "%'.2f"
}
}
}
}
};
var plugins = ['barRenderer', 'categoryAxisRenderer', 'pointLabels'];
plot = new qxjqplot.Plot(paramet.resultado.dataSeries_total, options, plugins);
Related
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.
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'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],
)
I have multiple grids in a panel. The base grids have data in them and can be dragged and dropped between each other. All the grids in the panel should be able to drag and drop between each other. This works perfectly in chrome but not Firefox, IE, or Safari.
In IE,FF and Safari the grids with data in them will drag and drop between each other w/o problem. They will not between the empty grids. I tried adding data to the empty grids but that wasn't the problem. Firebug also errors when using it with Extjs so any bugs i get are from a different dev tool. I have reinstalled all of those browsers and that is not the answer either. Im stuck...
edit I found out in chrome the viewconfig for my dragdrop groups are set but it doesnt set in the other browsers
This is my base grid with data in it.
var rround = "panel-game-"+round;
var ss = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+round,
stateId: 'stateGrid',
autoScroll: false,
store: store,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
height: 100,
width: 150,
title: 'Game ' + round,
viewConfig: {
stripeRows: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
drop: function(node, data, dropRec, dropPosition,record,store) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
}
});
This is my empty grid that should accept drops and should also drag when there is data in it.
var rCell = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+i+'-'+a,
stateId: 'stateGrid',
autoScroll: false,
store: rCellStore,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
beforedrop: function(node,data,overModel,dropPosition,eOpts){
console.log(node);
},
drop: function(node, data, dropRec, dropPosition, record) {
console.log("drop");
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('title') : ' on empty view';
var f = node.id.replace('-body','');
var newval = data.records[0].data;
if(f != undefined && f != ''){
var fstore = Ext.getCmp(f).getStore();
fstore.add(newval);
}
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
},
height: 100,
width: 150,
title: 'Game ',
viewConfig: {
stripeRows: true
}
});
It does not give a dropzone avaliable when i and trying to drag something over. It could be that but im not sure how to fix it.
The problem was the second viewConfig{stripeRows:true}. Chrome could figure it out but the other browsers were overwriting the first viewConfig with the second.