I am using gchart and I am trying to use markers to label my bar char with numbers. So that ever bar has a number value on top of it.
I tried
markers: [$.gchart.marker('number', 'red', -1)]
markers: [$.gchart.marker('number', 'red', -1, -1)]
markers: [$.gchart.marker('number', 'red', -1, 'every')]
markers: [$.gchart.marker('number', 'red', -1, 'every1')]
I can only make it appear on the one bar. I want it to show up on every bar.
What am I doing wrong?
See it has no label on the first one.
https://chart.apis.google.com/chart?chs=400x500&cht=bvg&chd=t:55|47&chco=FDFF0F,1FEEFF&chm=N,ff0000,-1,-1,10,0&chdl=test2|test1&chdlp=b|l&chxt=x,y&chxl=0:|atest
$('#id').gchart({
type: 'barVertGrouped',
markers: [$.gchart.marker('number', 'red',-1)],
height: 500,
width: 400,
series: data, // xml data from server.
legend: 'bottom',
extension: { chxt: 'x,y', chxl: '0:|atest' }
});
For non-stacked bar graphs, you need to add a marker per series:
$('#id').gchart({
type: 'barVertGrouped',
markers: [
$.gchart.marker('number', 'red',0),
$.gchart.marker('number', 'blue',1)
],
height: 500,
width: 400,
series: [
$.gchart.series('test1', [47], 'blue'),
$.gchart.series('test2', [60], 'red')
],
legend: 'bottom',
extension: { chxt: 'x,y', chxl: '0:|atest' }
});
Related
I want to ask about the name series in highchart. I've made it but series name so one.
so here my code:
series: [{
name: <?php echo json_encode($project);?>,
data: <?php echo json_encode($value);?>,
shadow : true,
dataLabels: {
enabled: true,
// color: ['#045396','#ff0000','#00ff00','#0000ff'],
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 0);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
}
and the result:
but i want like this:
You'll probably have to break apart your series into an array of data objects.
Then when you are instantiating the highcharts object can pass in an xAxis option with the names for these columns:
xAxis: {
categories: [
'Samsung',
'Nokia',
'Blackberry',
'Apple'
]
},
Here is a pretty good example which might help you. http://jsfiddle.net/TU7TL/1/
If you want to display four legend items instead of one, you need to split your series into four series.
Example:
http://jsfiddle.net/2wm4jn2q/
Is there a way in C3.js for to add COLOR to an horizontal line, the level 0 in axis y in bar graphs? By default you have this graph:
What I need is this:
Any idea? thanks.
UPDATE: I've made a line with this, but I need to add color.
grid: {
y: {
lines: [
{value: 0, text: ''}
]
}
}
In case anyone need it, this does the magic:
https://github.com/c3js/c3/issues/362#issuecomment-46377069
The reference has an example for horizontal (x-axis) lines: https://c3js.org/samples/grid_x_lines.html
// Copied from the reference
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
],
axes: {
sample2: 'y2'
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{value: 50, text: 'Label 50 for y'},
{value: 1300, text: 'Label 1300 for y2', axis: 'y2', position: 'start'},
{value: 350, text: 'Label 350 for y', position: 'middle'}
]
}
}
});
Also for x-axis lines (vertical): https://c3js.org/samples/grid_x_lines.html
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)
I would like to show 3 color zones on my graph on the background according to y axis value, as I understand, I cannot control the background color by different colors.
My idea is to draw 3 horizontal lines with canvasOverlay - that is working.
The problem is I want to place this lines behind my graph curve, now it seen on the front and it overlays my points line.
Can I change the property of z-index or the opacity?
Maybe some other ideas?
$.jqplot( 'ChartDIV', [data],
{
series: [{ showMarker: true}],
highlighter: {
sizeAdjust: 10,
show: true,
tooltipLocation: 'n',
useAxesFormatters: true
},
tickOptions: {
formatString: '%d'
},
canvasOverlay: {
show: true,
objects: [
{
horizontalLine:
{
name: 'low',
y: 1.0,
lineWidth: 100,
color: 'rgb(255, 0, 0)',
shadow: false
}
},
{
horizontalLine:
{
name: 'medium',
y: 2.0,
lineWidth: 100,
color: 'rgb(250, 250, 0)',
shadow: true
}
},
{
horizontalLine:
{
name: 'high',
y: 3.0,
lineWidth: 100,
color: 'rgb(145, 213, 67)',
shadow: false
}
},
]
},
axes: {
xaxis:
{
label: 'Dates',
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
tickOptions: {
formatString: '%d/%m/%Y',
angle: -30,
fontFamily: 'Arial',
fontSize: '13px',
fontWeight: 'bold'
},
min: d[0] + "/" + d[1] + "/01",
tickInterval: '2 month',
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3'
}
},
yaxis:
{
label: 'Level',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
formatter: $.jqplot.tickNumberFormatter
},
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3',
angle: -90
}
}
}
} );
I think that your problem might be the order in which you do your painting. I think that you first create the graph and then in it you draw this line, right?
Thus to sort out this you might try one of the hooks the jqPlot chart provides.
To see how you could use a hook, please see my other answer (BTW to my own question:) where I used a postDrawHooks hook to change format of labels once the graph is drawn. In your case you could use preDrawHooks or maybe more appropriate would be to use preDrawSeriesHooks, since I am not sure if a canvas is ready to use when function passed in preDrawHooks is called.
Remember that, according to the documentation, the preDrawSeriesHooks is called each time before a series is drawn, thus in your case you would need it to work just once.
EDIT
In this case the answer is simple, well you could do both, which is shown in my jsfiddle, available here.
You need this piece of code to send overlay canvas to back, which you should place before the code painting your graph:
$.jqplot.postDrawHooks.push(function(){
$(".jqplot-overlayCanvas-canvas").css('z-index', '0');//send overlay canvas to back
$(".jqplot-series-canvas").css('z-index', '1');//send series canvas to front
});
But when it comes to opacity you could apply it to whichever line you like (also shown in my code), using of the rgba() method, for series it is done this way:
seriesColors:['rgba(100, 150, 100, 0.75)']
for the lines on canvas, you do it like this:
color: 'rgba(145, 213, 67, 0.25)'
EDIT2
The most important think was forgotten therefore with the previous code the highlighter was not working. Simply the event canvas which is responsible for event catching and propagation was hidden underneath our canvas. It was corrected in the current version of code, by setting of an appropriate z-index for it. The complete method would look like:
$.jqplot.postDrawHooks.push(function() {
$(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back
$(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front
$(".jqplot-highlighter-tooltip").css('z-index', '2'); //make sure the tooltip is over the series
$(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
});
EDIT3:
A much nicer solution where we do not need to worry about setting the z-index.
$.jqplot.postDrawHooks.push(function() {
var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0])
var seriesCanvas = $($('.jqplot-series-canvas')[0])
seriesCanvas.detach();
overlayCanvas.after(seriesCanvas);
});
It is presented here. This solution is inspired by the answer provided by #Mark to a similar sort of problem.
A much better solution is to use Canvas rectangle object without any hacking
http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html
$(document).ready(function(){
var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
canvasOverlay: {
show: true,
objects: [
{ rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
{ rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
]
}
});
});
I wanna use a chart in my new ExtJS4 application.
The axes render just fine, and I get a line, too; but it does not make any sense. Here's a screenshot of my problem:
So as you can see, I got the axes just fine and the data left of the chart should be drawn; but obviously, it doesn't really do what I expected ;-)
I tried to hardcode the data, so here's my store:
Ext.define('MR.store.ResultChartStore', {
extend: 'Ext.data.Store',
model: 'MR.model.ResultPoint',
data: [
{rings: 400, date: new Date(1970, 1, 1)},
{rings: 398, date: new Date(1970, 1, 2)},
{rings: 275, date: new Date(1970, 1, 3)}
]
});
The referenced model looks like this:
Ext.define('MR.model.ResultPoint', {
extend: 'Ext.data.Model',
fields: ['rings', 'date']
});
And finally my chart looks like this:
{
xtype: 'chart',
width: 600,
height: 300,
theme: 'Green',
store: 'ResultChartStore',
axes: [
{
title: 'Ringe',
type: 'Numeric',
position: 'left',
fields: ['rings'],
minimum: 0,
maximum: 400
},
{
title: 'Datum',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd.m.Y'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'rings'
}
]
}
Can anybody spot my mistake? I just can't seem to find it, in my eyes it looks just like the examples in the docs ...
Greetz and thanks in advance
gilaras
-------------------------------------UPDATE---------------------------------------
I guess I know where the problem is, but I don't know how to solve it :-/
When I add more data to the store, the chart looks like this:
So the problem seems to be that Ext does not "know" how to connect my points...
In my opinion it finds a point, draws a line through it and repeats it for every point specified in my store.
My chart looks like this now:
{
xtype: 'chart',
width: 600,
height: 300,
theme: 'Base',
store: 'ResultChartStore',
axes: [
{
title: 'Ringe',
type: 'Numeric',
position: 'left',
fields: ['rings'],
minimum: 0,
maximum: 400,
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
title: 'Datum',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'rings',
highlight: {
size: 7,
radius: 7
},
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
}
Anyone got an idea what I may be doing wrong?
First, you're missing an important configuration in your series. The axis config binds the points in your store to the axes on the chart. The Sencha documentation on this config is misleading, however; Sencha says the config takes a string when in fact it takes either a string or an array of strings. In your case, use axis: ['left', 'bottom'].
Second (and I'm less sure about this), you might try using the fully qualified store name in your chart config. So, 'MR.store.ResultChartStore' instead of just 'ResultChartStore'. Although you appear to be getting the points just fine, I wouldn't be surprised if there was some sort of side-effect.
Third, the Time axis can be a bit buggy. If you're having trouble with it, try setting it to Category and converting the date to a string. The referenced question above does state that Category axes are bugged too, but I've personally not experienced any problems with them.