Develop Reference

How To Customize a Flotr2 Radar Chart

http://www.humblesoftware.com/flotr2
I am trying to modify the default font size, weight, and color for the Flotr2 radar chart. I could change this in the flotr2.js file but I want to leave the source file alone.
Currently when I set a larger fontSize in the Flotr.draw call it just spaces out the labels further.
function drawGraph(container, series, ticks)
{
Flotr.draw(container, series, {
colors: colors,
HtmlText: true,
fontSize: 30,
radar: {
show: true
},
grid: {
circular: true,
minorHorizontalLines: true
},
yaxis: {
min: 0,
max: 7,
minorTickFreq: 1,
showLabels: false
},
xaxis: {
ticks: ticks,
titleAlign: 'right'
},
legend: {
position: 'ss',
container: document.getElementById("legendItems")
}
});
}
I'm not sure what else to try...

Accessing the variables from the window object before drawing the graph seems to work well.
window.Flotr.defaultOptions.fontSize = 8;
window.Flotr.defaultOptions.xaxis.color = '#000000';
Couldn't find a way to change the font weight.

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.

Configuring tooltips for Flot charts where data is from an ajax call

I have a series of charts on a page which all get their data from an ajax call. I'm trying to implement the tooltips plugin. I have set grid{ hoverable: true} but I'm still not getting any tooltips.
Code for one of my chart plots...
$(function() {
var data = [];
getData();
function getData() {
$.ajaxSetup({cache:false});
$.ajax({
url:'data/prod.php',
dataType:'json',
success:update,
error: function(){
}
});
}
function update(ajaxdata) {
if(ajaxdata){
$.each(ajaxdata, function(key, value){
data.push(value);
});
if(data.length>0){
$.plot('#graph-1', [data], {
series: {color:"#009390",
bars: {
show: true,
barWidth: 0.5,
fill: 0.7,
align: "center"
},
grid: {
hoverable: true
},
tooltip: { //corrected from tooltips to tooltip but issue remains
show: true,
content: "$s: $x - $y"
},
legend:{
show: false
}
},
xaxis: {
mode: "categories",
tickLength: 0,
axisLabel: 'Product Categories',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 15,
axisLabelColour: '#333',
axisLabelPadding: 10
},
yaxis:{
axisLabel: 'Number of Products',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 15,
axisLabelColour: '#333',
axisLabelPadding: 10
}
});
$('#graph-1').css('background','#fff');
data = [];
}
}
}
I've seen some examples that bind to the plothover event but I'm not sure how to implement this into the code above where the plotting is initiated from an ajax call.

Multiple issues:
1) Options for the tooltip plugin belong under tooltip not tooltips (already fixed in question).
2) Both grid and tooltip options don't belong under the series options but beside them.
3) Inside the content format string variables are marked by % not $.
Fixing all these leads to working tooltips: Fiddle

dojox.charting axis labels dropping

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

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.