I have bar chart and the following code for that:
var line1=[['0-1',275134],['2-3',261562],['4-5',285681],['6-7',915432],['8-9',555131]];
var line2=[['0-1',353628],['2-3',287898],['4-5',297550],['6-7',103313],['8-9',616089]];
jQuery.jqplot('_container', [line1, line2],
{
title: 'title',
seriesColors: [ "#eee", "#ccc"],
seriesDefaults:{
renderer:jQuery.jqplot.BarRenderer,
rendererOptions:{barPadding:5, barMargin:5,highlightColors: ["#000", "#FF1100"]},
pointLabels: {show: false}
},
legend:{
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show:true,
showLabels: true,
labels: ["Label 1", "Label 2"],
rendererOptions:{numberColumns:2},
placement:'outsideGrid',location:"s"
},
axes:{
xaxis:{renderer:jQuery.jqplot.CategoryAxisRenderer, rendererOptions:{showDataLabels: false},showTicks: false},
yaxis:{tickOptions: {showGridline: true}}
},
highlighter: {
tooltipAxes: 'y',
formatString:'%s'
},
cursor:{style:'default', show: true, zoom:true, showTooltip:false}
});
How to add highlighting for bars by way as seriesColors works, so added highlightColors works by another way it's highlight first four bars ("#000", "#000","#FF1100","#FF1100"), but needed result is like ("#000","#FF1100","#000","#FF1100","#000","#FF1100", ...)?
The issue you experienced here was caused by a bug in the barRenderer.js and the only way to fix it seems to be edit of the appropriate line of its code, as explained here.
The required change involves replacing of pidx with sidx in the line:
var opts = {fillStyle: s.highlightColors[pidx]};
To verify it, I made a jsfiddle where you can quickly see that it fixes the problem.
Related
Is there any way I can show a portion of the kendo label text in a different color?
Kindly find the chart implementation here http://jsfiddle.net/52c3K/16/
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
the highlighted portion of the label in red and bold.
Your help is very much appreciated
This is a bit hard since we can't just use the template, I tried to play with visual and done some tweaking here and there. There result aren't perfect but please check it here on jsFiddle
I will try to explain what i have done there
i use the labels.visual configuration
e.text basically contains your label string, but i did some looping on dataSource for full data (but there is weakness in this since there may duplicate text on e.text)
make use of new kendo.drawing.Group(); specifically the drawDOM function + kendo template
make use of new kendo.drawing.Layout() to append the drawed DOM on the correct place , i followed this some of the tips here
And do take note in your fiddle the kendo version is 2013, well i used the 2018.1.221
Sometimes my segments are too small to be visible enough to click/mouseover. Is it possible to trigger the same mouseover on the chart by mousing over the associated legend?
My legend & custom highlighter code:
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 's',
placement: 'insideGrid',
rendererOptions: {
numberRows: 2
}
},
highlighter: {
show: true,
tooltipLocation: 'sw',
useAxesFormatters: false,
tooltipAxes: 'y',
yvalues: 3,
formatString: '<table class="jqplot-highlighter">' +
'<tr><td>Impact:</td><td>%s</td></tr>' +
'<tr><td>Percentage:</td><td>%s</td></tr>' +
'<tr><td>Actual:</td><td>%s</td></tr></table>'
}
Works beautifully, would just like to have it activate from the legend too if possible?
You could define your own event handler for .jqplot-table-legend-label or some other selector and then do whatever you need to in that.
I'm creating a stacked bar chart and almost everytime, the bars on my chart are overflowing.
I'm not sure what could be causing this, I found that people had issues with sorting data source in chrome but this is not specific to chrome. Sometime depending on the default sort I set, it would show up correctly, but if I changed the sorting, it would go back to messed up. On top of this, sometime the values are interchanged but if I checked the datasource.data(), it would still be okay.
I tried calling redraw, refresh on the chart, read on the datasource, I'm a bit lost here
Thanks for any help!
http://jsfiddle.net/2mMMC/
$(document).ready(function () {
var data = {
data: [{"name":"R-24","series":"Moving","Idle":0,"Moving":1396,"Stopped":0,"count":"0.39"},
{"name":"R-25","series":"Moving","Idle":0,"Moving":6795,"Stopped":0,"count":"1.89"},
{"name":"P-24","series":"Moving","Idle":0,"Moving":2622,"Stopped":0,"count":"0.73"},
{"name":"RF-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":796,"count":"0.22"},
{"name":"RF-25","series":"Stopped","Idle":0,"Moving":0,"Stopped":27024,"count":"7.51"},
{"name":"P-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":26430,"count":"7.34"}
],
group: [{
field: 'series'
}],
sort: [{
field: "series",
dir: "asc"
}]
};
$("#chart").kendoChart({
dataSource: data,
series: [{
field: 'count',
stack: true,
type: 'bar'
}],
categoryAxis: [{
field: 'name'
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
});
I need to generate a horizontal bar chart like given code but with Y-axis as some string not numbers.
What are the changes I need to do to this code for my work. It is working fine with numbers from 1-4 but once I put some string in place of numbers for Y-Axis, graph is not getting plotted.
My Code:
plot4 = $.jqplot('chartdiv', [[[2,1], [6,2], [7,3], [10,4]], [[7,1], [5,2],[3,3],[2,4]]], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
I need to plot plot4:
$.jqplot('chartdiv', [[[2,'a'], [6,'b'], [7,'c'], [10,'d']], [[7,'a'],
[5,'b'],[3,'c'],[2,'d']]], {
What you want to use for this are the so called "ticks".
You want the data in the plot to stay the same, however you want to edit the yaxis options:
var ticks = ['axis1', 'axis2', 'axis3']; //String array for each axis
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
Here a list of the full option list: http://www.jqplot.com/docs/files/jqPlotOptions-txt.html
Hope this was usefull :)
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.