Thought this would be simple enough but am having not much luck finding a reference to this in the Highchart API.
I would like to have the dynamic line chart display the xAxis updates from left to right. i.e., the tadpole swimming to the left margin.
Can't for the life of me find a parameter to do this.
https://www.highcharts.com/demo/dynamic-update
Well.... should have seen that.
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
reversed:true,
},
Related
I need some help.
I have a server side processed jquery.datatable. One of the columns is a numeric col with values between 0 and 180.
I would like to filter this column with yadcf ranger_number_slider. I set the yadcf like this:
{
column_number: 14,
filter_type: 'range_number_slider',
filter_container_id: 'external_filter_container_ZZ'
}
But I am faced with some problems:
On the first page of the datatable (paging size is 10, number of entries is roundabout 10.000), the values of this specific column are (accidentally) only from 0 to 30. The ranger_number_slider shown in the div "external_filter_container_ZZ" is as shown below:
Ranger-Number-Slider
As you see in the image, the slider is set from 0 on the left side to 30 on the right side. It seems, that the slider doesn´t get all values from the server side processing for this specific column.
Furthermore: If I try to select some values in the slider, the result in the table is always empty, and the slider disappears!
Is anybody able to give some hints for this behaviour?
Thank you very much in advance.
Best regards
BeSt
Not only that its possible, its available on the showcase page - see here, you must do some reading in the docs / showcase (source on github too) and you will find all the needed docs for that, in short: in addition to your table data that is sent form server to client you must provide yadcf with its data as well - populate the yadcf_data_COL_NUM with the relevant data,
aaData:[["Trident", "Internet Explorer 4.0", "Win 95+", "7/24/2015", "1"],…]
draw:"2"
recordsFiltered:6
recordsTotal:57
yadcf_data_0:[{value: "Trident", label: "Trident Eng'"}, {value: "Tasman", label: "Tasman Eng'"},…]
yadcf_data_1:["Nintendo DS browser", "Netscape Browser 8", "All others", "Lynx", "Mozilla 1.6", "Mozilla 1.5",…]
yadcf_data_2:["N800", "Win 95+ / Mac OS 8.6-9.2", "S60", "KDE 3.5", "Win XP SP2+", "KDE 3.3", "OSX.3", "KDE 3.1",…]
yadcf_data_4:["134", "0"] <- this is for range slider filter tips
From showcase docs
//In case that you want to populate your select / auto_complete
filters with values //you have to add to your current JSON the
following attributes yadcf_data_0 / yadcf_data_1 / etc' //where each
attribute contains a list of strings //For example:
//"yadcf_data_0":["KHTML","Webkit","Trident","Misc","Other
browsers","Tasman","Presto","Gecko"],
I'm trying to figure out how to adjust the labels on an Area Chart visualization of my Keen IO data. I've looked through the available configuration options, but I'm not seeing what option would do this. Currently my chart just lists "null" on the legend on the right side of the chart, and on the hover tooltips when you hover over a particular peak. Just looking to switch it to list "Hits" instead of "null."
Does anyone know how/where I would configure those labels?
You can use labelMappingfor that. Something like:
client.draw(funnel, document.getElementById("chart"), {
library: "google",
chartType: "columnchart",
labelMapping: {
null: "Hits"
}
});
I have this interactive chart here. As its data change depending on selected time period I wish to set the date range from Nov-10 to Jul-14, no matter the data. I know that I must use overrideMax on x axis, but I can't make it to work. I guess it's a matter of date formatting. Every single combination I've tried gives the following as result.
What is the right formatting? Thanks a lot.
EDIT: Thank you very much on your quick response, John. Now it is working. I'm loving Dimple more and more!
I have another question regarding this chart. Is there any way to arrange drawing order of series? I would like 'Previsión' to be sent to back. Now it is drawn depending on time period.
EDIT 2: Based on this other question I think I figured out a solution. With a 50ms delay after the chart is drawn I simple erase the circles and paths I wish to be at the front and then append them to the chart svg object.
setTimeout(function () {
var datoCircles = svg.selectAll('circle[id*=Dato]:not([id*=futuro])');
var prevCircles = svg.selectAll('circle[id*=Prev]');
var prevPaths = svg.selectAll('path[class*=Prev]');
datoCircles.remove();
prevCircles.remove();
prevPaths.remove();
// Convertimos la seleción d3 a objetos jQuery
$(svg.selectAll('svg > g')[0])
.append($(prevPaths[0]))
.append($(prevCircles[0]))
.append($(datoCircles[0]));
}, 50);
They need to be set with JavaScript date objects, as native date parsing in JavaScript causes cross browser problems, I recommend using the d3 method:
x.overrideMax = d3.time.format("%Y-%m-%d").parse("2014-05-09");
With this approach you can use whichever date format suits you.
just started playing with cytoscape.js and the breathfirst layout. Looks like it will be a great library. I want to be able to create a layered or tree like layout, ideally being able to pin nodes to a level. Is there any suggestions on the correct layout to use or how to achieve it.
Does anyone know how to use the roots: ? I tried like this "roots: 'xyz'" where xyz is the id of the root node in my diagram.
Also I was trying to lock my root node like below using the position and locked attribute which did not seem to work.
{ data: { id: "XYZ", name: "XYZ", weight: 100, faveColor: "#F5A45D", faveShape: "triangle" , position: {x: 150, y: 10}, locked: true}},
If I can't get it to work my fall back will be to use graphviz to calculate the layout and position the nodes manually in code.
You can only specify elements as roots. I'll add the ability to use selector strings for 2.2.4:
https://github.com/cytoscape/cytoscape.js/issues/498
As for the layout itself, nodes are positioned based on edge direction hierarchy, so you can only guarantee the position of the specified root nodes. The rest fall underneath in the hierarchy.
Having trouble spider charting with only one series.
I tried working off this example:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_spidersingle.html
And set that up here:
http://jsfiddle.net/mstefanko/FHnwd/72/
Firebug is throwing:
Unexpected value NaN parsing cy attribute.
I'm completely new to the dojo toolkit. I know I need to addAxis, but it doesn't look like the code from the top URL is working. The axis is starting and ending at the same number despite my trying to set min/max.
Any help is appreciated!
Problem has to do with spider charts figuring out the min/max of the axis on it's own. Even when I was using:
chart1.addAxis("Answer 3", { type: "Base", min: 0, max: 250 });
to set the min and max, the spider chart still bombed with only one series.
After playing around with the information in this ticket:
http://bugs.dojotoolkit.org/ticket/14583
I still wasn't able to get this working, I stumbled onto an answer here that basically said as a workaround add series for min and max then remove them after render. So thats exactly what I ended up doing.
chart.render();
chart.removeSeries("min");
chart.removeSeries("max");
Demonstrated here:
http://jsfiddle.net/FHnwd/90/