dojox.charting axis labels dropping - javascript

Using dojox.charting to create a column chart. The x-axis labels are dates, and only one label seems to print if the number of series is 10 or more, even though dropLabels: false is being used.
When I tweak the loop to stop at 9 iterations, it prints all the labels just fine. As soon as it hits 10 items, only one label will print. I even tried shortening the label length in case that did something, but the same thing happened.
Anyone know why this would happen? Is it a bug or are we just doing something wrong?
Edit:
I discovered something interesting. It's not just that only one label prints if you're at 10 or more iterations. Only the 10th label prints.
Here's how the chart object is being instantiated. If more detail would be helpful, I can provide it.
chart = new dojox.charting.Chart2D("lineChartDiv");
chart.addPlot("default", { type: "ClusteredColumns", label: true, labelStyle: "outside", labeloffset: 5, gap: 15, minBarSize: 15, maxBarSize: 15, enableCache: true });
chart.addPlot("other2", { type: "Columns", gap: 30, minBarSize: 50, maxBarSize: 50, stroke: { color: "rgba(0,0,0,.3)" }, fill: "rgba(0,0,0,0)", enableCache: true });
chart.addPlot("other3", { type: "Columns", gap: 30, minBarSize: 50, maxBarSize: 50, stroke: { color: "rgba(0,0,0,1)" }, fill: "rgba(0,0,0,0)", enableCache: true });
chart.addPlot("other", { type: "Grid", hMajorLines: true, hMinorLines: false, vMajorLines: false, vMinorLines: false, majorHLine: { color: "rgba(0,0,0,.3)", width: 1 }, renderOnAxis: false, enableCache: true });
console.log('labels', labels);
chart.addAxis("x", { labels: labels, stroke: "#a6a6a6", majorTicks: true, minorTicks: false, minorLabels: false, dropLabels: false });
chart.addAxis("y", { vertical: true, stroke: "#a6a6a6", majorTickStep: EachTickStep, minorTicks: false });
chart.addSeries("Actual Burnup Past", actualBurnupPast, { stroke: { color: "#00b7e2" }, fill: "#00b7e2" });
chart.addSeries("Planned Burnup", plannedBurnup, { stroke: { color: "#a6a6a6" }, fill: "#a6a6a6" });
chart.addSeries("Hardening", hardening, { plot: "other2" });
chart.addSeries("Regression", regression, { plot: "other3" });
chart.render();

Apparently, the issue was related to the property majorTickStep. If it's not defined, it seems to be defaulting to 10 if there are 10 or more series being displayed. When I explicitly set the value, then the labels print as expected.
majorTickStep: 1

Related

Update legend colors in ExtJS 6 chart

I have a bar chart with a legend in ExtJS 6.0.2.
I need to update the colors of the bars and of the legend when the user does an action (clicking on a pie slice in my case).
Updating the color of the bars works as intended, but the legend doesn't. Here is an example of what I do right now :
chart.getLegendStore().data.items.forEach(function(x){
x.data.mark = 'rgb(255,255,255)';
});
The colors are correctly set, but they only update when I click on the legend item. I guess it's because ExtJS has no way to know that the underlying store has been modified. I tried going up the callstack with the debugger but I didn't find anything useful.
Is there a better way to do what I want, or/and how to make the legend update instanly ?
EDIT: If it helps, here is how I update the bars :
serie.setConfig("colors", newColors);
EDIT2 : And here is the full chart code :
Ext.define('QuoteBarChart', {
extend: 'Ext.chart.CartesianChart',
alias: 'widget.quotebarchart',
xtype: 'quotebarchart',
requires: [
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Bar',
'Ext.chart.series.Line',
'Ext.chart.theme.Muted',
'Ext.chart.interactions.ItemHighlight'
],
flex: 2,
height: 600,
theme: 'Muted',
itemId: 'chartId',
store: {
type: 'quote'
},
insetPadding: {
top: 40,
bottom: 40,
left: 20,
right: 40
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['won', 'lost', 'open'],
minimum: 0,
grid: true,
titleMargin: 20,
title: 'Offres'
}, {
type: 'category',
position: 'bottom',
label: {
rotate: {
degrees: 45
}
},
fields: ['month']
}
],
series: [{
type: 'bar',
axis: 'left',
xField: 'month',
itemId: 'barId',
yField: ['open','lost','won'],
title: ['Ouvertes', 'Perdues','Gagnées'],
stacked: true,
fullStack: true,
colors: [
'rgb(64, 145, 186)', 'rgb(151, 65, 68)','rgb(140, 166, 64)'
],
highlight: {
strokeStyle: 'red',
fillStyle: 'black'
},
tooltip: {
trackMouse: true,
scope: this,
renderer: function (toolTip, storeItem, item) {
var name = "";
switch(item.field) {
case 'won': name = "Gagnées"; break;
case 'lost': name = "Perdues"; break;
case 'open': name = "Ouvertes"; break;
}
toolTip.setHtml("");
}
}
}],
legend: {
docked: 'bottom',
listeners: {
itemclick: 'onLegendItemClick',
itemmouseenter: 'onLegendItemHover'
}
}
)};
Ok, instead of modify colors of the series and colors of the legend, you can modify all of them in the same time doing this
chart.setColors(['red','blue','green']);
chart.redraw();
So you need to set colors on chart and not on series, and modify the array on button click.

Is it possible to disable navigator(small series) but remains the extensible scroll bar,Highstock

I need to remain the functionality of extensible scroll bar, but I don't need overview navigator. Like :
I need the scroll bar(area 1) to still remains extensible, but remove the navigator(area 2).
This is a design of what I want:
demo you could quickly modify from :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar can not be resized like Navigator, so I think what you really want to use is (2) Navigator and disable (1) Scrollbar. Here is simple example do to do: http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
If the navigator should have background, you can add two dummy points for the series, one at the beginning of the original series and one on the end:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
Then just set color and fillOpacity for a series, to the color you want to achieve, and set yAxis.max below your dummy value (2 in my case). Working demo: http://jsfiddle.net/dJbZT/184/

Flot Graph not plotting data

I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.
This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.

Dojo chart won't display after addSeries

I am trying to create a chart in dojo. The issue is, as soon as I try and add any data to the chart, the chart renders blank (no errors).
Code:
var cPosition
require(["dojox/charting/Chart","dojox/charting/themes/Claro", "dojox/charting/plot2d/Grid", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/MarkersOnly",], function(Chart, theme, Grid, Default, MarkersOnly){
cPosition = new Chart("chartPosition");
cPosition.setTheme(theme);
cPosition.addAxis("x", {
min: -180,
max: 180,
majorTicks: true,
majorTick: {length:180},
minorTick:{length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addAxis("y", {
min: -180,
max: 180,
vertical: true,
majorTicks: true,
majorTick: {length:180},
minorTick: {length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addPlot("Grid", { type: Grid,
hMajorLines: true,
hMinorLines: true,
vMajorLines: true,
vMinorLines: true,
majorHLine: { color: "black", width: 2 },
majorVLine: { color: "black", width: 2 },
minorHLine: { color: "grey", width: 1 },
minorVLine: { color: "grey", width: 1 },
enableCache: true });
cPosition.addPlot("default", { type: MarkersOnly });
//cPosition.addSeries("series_markers", [{x:10,y:10}]);
cPosition.render();
});
If I uncomment the line:
cPosition.addSeries("series_markers", [{x:10,y:10}]);
The chart turns blank (absolutely nothing on it). If I comment the line, the grid displays correctly but, of course, no data.
What I am trying to accomplish is create an x,y grid that will display a marker that corresponds to the position of an object.

Set maximum bar width in ExtJS 4 column chart?

I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.
_____
| |
| |
-----|-----
I can set the width in the series config:
{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:
_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):
_
| |
| |
-----|-----
Any ideas?
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}
Maybe a bit to late but this is my solution
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!
//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]
I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.
So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:
It's a trick somehow but it works fine for me.
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
And the data:
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.
This is my idea and it works the way I want it. Maybe it helps you to find your solution.
try using the "gutter" property to set the gap between the column.

Categories

Resources