showLabel in jqplot series - jqplot

is there a way to not display a series label in the legend when label is entered in the series options (something like a showLabel:false) ?
Reason : I actually need a more explicit identifier that 1,2... to know which series I'm checking within a python script that will build the different buttons used to display or not some series.
Any help will by really appreciated.
If no such options is present for series I could just enter a brand new one option and fill it with the identifier anyway to perform the check in my python script afterward.
Regards

You can use the showLabel option for each series. For example if you have 3 series and you want to not display the label of the second serie you can use something like the following :
series: [
{showLabel: true},
{showLabel: false},
{showLabel: true}
]
Please see an example on jsfiddle here
Edit
An alternative can be to define a variable with your own labels and to use it then in jqplot (example n°2 here:
var mylabels = ["This", "particular", "way"];
var plot = jQuery.jqplot('chart', [data], {...
legend: {
labels: mylabels
}
}

Related

D3 How to pass text value from data to variable

I got a great answer yesterday helping me set up a conditional rule that allows me to display the points on my scatter chart as images or dots based on a variable 'displaytype'
Here's the link to the answer: D3 conditionally append image OR circle element based on variable
I'm porting my solution into Power BI and the dataset will contain a field 'display_type' which will be either 'image' or 'dot'
So I'm trying to update my variable and link it to the data but the if statement doesn't seem to recognise the output from the function.
eg
The Current variable is:
var displaytype = "image" // or "dot"
I'm trying to change that to:
var displaytype = function(d) {
return d.display_type
};
or
var displaytype = function(d) {
return data[0].display_type
};
However, the result has no impact to the display whatsoever so I guess I'm missing something (probably simple) ?
Any help much appreciated as always

Vertical line on Amcharts instead of the grid

How can I set the vertical lines related to the Category Axis which are NOT the grid ?
Watch the pictures to see what I m looking for.
It s not the grid, I don't think it's neither a trend line nor a guide. It s related to the data.
Any help will be deeply appreciated.
(I tryed to use the Editor to find it out... no magical result lol)
Amchart picture
amchart my result
This is how I fixed my problem :
somewhere after "type": "serial",
"gridAboveGraphs": true, // to get the vertical lines above the graph
And I added in "categoryAxis": { ... }
"gridAlpha": 1, // to make the vertical lines appear
"gridColor": "#ffffff", // to set the color of the lines
"gridPosition": "middle", // instead of 'start' to see the lines like I wanted
I wanna thank people who tried to help me.
Best regards.

Add graph to the First Panel in Amcharts

We have an AmChart Stock Chart implementation with multiple panels. We want to add graphs with the compared property set to true on demand to the first panel of a Stock Chart containing multiple panels.
How do we do this?
What we tried so far:
We push data sets into an AmChart instance called tmpchart. When we add a chart to the panel below the first one it and then attempt to add a graph at index 1, the graph is not drawn. In case we do not have a graph in panel 2, the series are added to panel 1.
tmpchart.dataSets.push({
//title: String(tmpchart.dataSets.length+1) + "th data set",
fieldMappings: [{
fromField: "value" + intSegmentAdded,
toField: "value" + intSegmentAdded
}],
dataProvider: newChartData,
categoryField: "year",
compared: true
});
console.log("---printing dataset -----")
//console.log(tmpchart.dataSets);
console.log(tmpchart.panels[0]);
var oldPanel = tmpchart.panels[0];
var graph = new AmCharts.StockGraph();
graph.id = "g" + intSegmentAdded;
graph.valueField = "value" + intSegmentAdded;
graph.compareField = "value" + intSegmentAdded;
graph.comparable = true;
graph.compareGraph = {type : "smoothedLine", fillAlphas : 0.15, lineThickness :2 };
oldPanel.addStockGraph( graph );
As you can see in the output, the blue and yellow series are added first to the top panel and the green is added to panel below it. When we attempt to add another series to top panel - the red one - it does not appear, even though it is in the dataSets array.
Your code appears to be fine by itself. The only thing your sample is missing is a validateData call.
Codepen
It might be helpful for you to provide an SSCCE that reproduces your scenario more accurately so we can better understand your issue.

AmCharts. Aligning balloons

I've spent a lot of time finding the solution, but i can't see any property in AmChatrts documentation that can align balloons not vertically. Actually, I just want to see all balloons, but not in one column. Can anybody help me?
There is currently no way to make the balloons stack in any different way than in once column. However, there are a few alternatives you can consider.
1) Displaying just one balloon.
To do that, set oneBalloonOnly to true:
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"oneBalloonOnly": true
}
});
This will make the cursor display just one balloon of the closest graph.
2) Disable balloons and use a legend instead.
To disable balloons, simply set [valueBalloonsEnabled][3] in chart cursor's settings to false.
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"valueBalloonsEnabled": false
},
"legend": {}
});
The legend will show relative value next to each graph title when you hover over the chart.
3) Consolidate values from multiple graphs into a single balloon.
To do that, use graph's balloonText property. It lets you reference to any field in data, so you can make it display values from any graph.
Here's a good example of the above.
Here's a good demo on how to do that.

DC.js Choropleth filtering Issue

I am trying to filter data on my choropleth chart from a bargraph. Strange thing is that it is not showing correct value on selecting a bar from the accompanying bar chart.
Here is the jsfiddle: https://jsfiddle.net/anmolkoul/jk8LammL/
The script code begins from line 4794
If i select WIN004 from the bar chart, it should highlight only five states and the tooltip should reflect the values for the data. Some states are highlighted for whom WIN004 does not exist.
I changed the properties of the choropleth from
.colors(d3.scale.quantize().range(["#F90D00", "#F63F00", "#F36F01", "#F09E01", "#EDCB02", "#DDEA03", "#ADE703", "#7EE404", "#50E104", "#24DE05", "#05DB11"]))
.colorDomain([-1, 1])
To
.colors(d3.scale.linear().range(["green", "white", "red"]))
.colorDomain([-2, 0, 2])
But i get a lot of white states where its hard to discern what has been highlighted. The tool tip for some white-ed-out states show -0.00 :/
Here is the fiddle http://jsfiddle.net/anmolkoul/jk8LammL/1/
So i guess either its a problem with my color range or how my data is getting parsed.
I would ideally like to specify the data ranges in the .colorDomain based on the top and bottom values of the riskIndicator dimension. My functions are not working though. Should i use d3.max or riskIndicator.top here?
EDIT:
I got the color domain dynamic by using the min and max values but still the graph is not performing as expected? Could this be an issue with the geochoropleth chart? I further took a working geochoropleth example and ported my data to it and even that gave me the same issue of representing data incorrectly. I thoughit could be a data problem but i validated using a couple of good BI tools and their map charts displayed data correctly.
Could this be an issue with the dc choropleth?
Thank you.
Anmol
This has the same root cause as the issue in this question:
Crossfilter showing negative numbers on dc.js with no negative numbers in the dataset
In short, floating point numbers don't always cancel out to zero when added and subtracted. This "fake group" will ensure they snap to zero when they get close:
function snap_to_zero(source_group) {
return {
all:function () {
return source_group.all().map(function(d) {
return {key: d.key,
value: (Math.abs(d.value)<1e-6) ? 0 : d.value};
});
}
};
}
Added it to the FAQ!

Resources