I have a long list of data for x-axis data when drawing a line chart (about 800 entries). The problem is it will not display correctly and overwrite each other. I am thinking a way to show (for example, every one hundred for a grid) and don't know how to do it. Please help me out.
Thanks.
You can specify an array of ticks to display on your chosen axis :
var xTicks = new Array(1,101,201,301,401,501,601,701,800);
--In your plot, add ticks option to your chosen axis :
axes: {
xaxis: {
ticks: xTicks --my ticks array
renderer: $.jqplot.CategoryAxisRenderer,
autoscale: false
}
}
It should do the trick.
Related
I'm using jqplot for represent several parameters in series across the time. So I have one Xaxis represent the time and several Yaxes(yaxis, y2axis, y3axis, y4axis, etc.). Each parameter is in different units(temperature, voltage, current, pressure, etc.), so all the Yaxes set to auto for min and max because I dont know what values will come from the server. I'm using ajax request to fill the data and next for real time updating the series with new points.
So now I want for the user to be able to set manual min and max for any Y-axe. So I set by this way:
var axis_name="y2axis";
console.log(plot.axes[axis_name].max);
var new_max=prompt("Please enter max value?");
console.log(new_max);
var plotOptionsEval = "plotOptions = { axes: { "+axis_name+": { max: \""+new_max+"\" } } };";
eval(plotOptionsEval);
console.log(plotOptions);
plot.replot(plotOptions);
console.log(plot.axes[axis_name].max);
So , when I set new max for the first axis(yaxis) everythins is fine.
But when I try to set the max parameter of any other axis - y4axis for example something gone wrong and that max value has a some different value from this the user is entered.
This is a debug from console.log output
50
12
axes: y4axis: {max: "12"}
350
Any ideas?
So I have found a solution if someone asking the same.
The trick is you need to set min and max parameters for all Yaxis in your plot. So I have prepared the min/max axes object with its original values:
var plotOptions = {
axes: {
yaxis: {min: 11.568, max: 11.582}
y2axis: {min: 11.688, max: 11.702}
y3axis: {min: 6.390000000000001, max: 6.53}
y4axis: {min: -300, max: 50}
}
}
Next set the desired Yaxis min/max parameter in the plotOptions object:
var new_max=prompt("Please enter max value?");
plotOptions.axes.y2axis.max=parseFloat(new_max);
and finally replot it:
plot.replot(plotOptions);
I'd like to add a unit to the y-axis tick labels in plotly.js. How might I do this? Adding a ticktext and tickval property for yaxis layout doesn't seem to have the effect I thought, as it does with an xaxis.
As per your own comment, and per here
ticksuffix(string)
You can add this as part of the x or y axis option as part of the layout text for your plot.
e.g.
var layout = {
yaxis:
{
ticksuffix: "suffix"
}
};
I am stuck on a problem here. Could be simple though but i am having a tough time figuring it out. I want to show multiple lines on a dc composite chart.
My data is like this:
{ Name: Mike, mark1: 26.9, mark2: 62.3 },
{ Name: John, mark1: 23.5, mark2: 60.3 },
{ Name: Firen, mark1: 24.3, mark2: 62.5 }
I need the name plotted against X axis and mark1 and mark2 plotted as lines against the Y axis. I found a fiddle here which uses a linear scale to achieve the same result. http://jsfiddle.net/anmolkoul/mzx6mnru/3/
But it uses a linear scale as the base dimension is numerical. My base dimension is a string and hence not working with the same code. I figured it is due to the scale definition that i am using. Here is the fiddle that i need help with: http://jsfiddle.net/anmolkoul/pjLoh1az/1/
I have currently defined my x axis as
.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)
I think this is where it is going wrong. I have two supplementary questions as well:
Once this is done, how to assign different colors to the lines ( it should reflect in the legend as well)
I was taking a look at the dc.js series chart, what does this line of code do?
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
Does it pivot the two dimensions? or is it just a quicker way of creating two crossfilter dimensions.
Thank you for the help!`
You can get the ordinal values with :
nameDimension.top(Infinity).map(function(d) {return d.Name}))
which returns ["Mike", "John", "Firen"] , then use it for the ordinal domain.
But it's not necessary, it's calculated automatically :
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
For colors, you can use :
dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")
Here is a fiddle with those modifications : http://jsfiddle.net/1exo25u9/
I am trying to implement a horizontal bar graph using jqplot library.
In my case, some of the bars of the graph might show extraordinary spike so for example if the 3 bars of my graph have data value of 150(max), the spiked bar might have a data value of 1000.
To accomodate this requirement, I went through the documentation of jqplot and found out that they have something called "breakpoint" to break the axes at some particular place.
http://www.jqplot.com/docs/files/jqplot-linearAxisRenderer-js.html#$.jqplot.LinearAxisRenderer.breakPoints
Now suppose my data for the series looks like this :
[100, 150, 50, 250, 1200, 100]
How in the above case can i make sure that jqplot inserts a breakpoint after 250 and continues the axes ticks at 1200?
[Edited] Ok, so after using the below code I am able to get the breakpoints working:
chart.axes.xaxis.breakPoints=[10,100];
chart.replot();
(i also went through the jqplot source and found out that for breakpoints to work, we need to manually set the ticks, which I did)
But my original problem is still at large!
Suppose my series looks like
[100, 200, 300, 20000]
In this case, even if I use breakpoints, my 3 bars which are of considerably lesser weight seems very tiny as compared to the 4th bar (20000 weight)
this makes the graph unreadable.
Can some one please suggest a way out of this?
"How to implement breakpoints": A replot of data as mentioned above, is not the right way to use breakpoints:
chart.axes.xaxis.breakPoints=[10,100]; chart.replot();
Hava a look on that piece of code, I solved the breakpoint issue:
Having all data values of my barchart < 200 exept of one bar value > 850 i would like to set a breakpoint between 250 and 850.
And here it's how this can be done:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
ticks: [0,50,100,150,200,250,275,825,850,900,950],
tickOptions: {
formatString: '%.0d'
},
renderer: $.jqplot.LinearAxisRenderer,
rendererOptions: {
breakPoints: [275,825],
breakTickLabel: "≈",
forceTickAt0: true
}
}
Important:
Use the LinearAxisRenderer.
add your ticks manually in an array.
set the breakpoint with the rendererOptions.
The Array with the ticks, HAS TO CONTAIN the values, which you like to set the breakpoints in the rendererOptions.
Regards
Matthias
P.S.: I also have a picture of the graph, but you don't allow me to post images until I get 10 reputations.
I am using kendo UI dataviz charts to display data that has text(symbols) on x-axis and a numerical value on the y-axis. I have serverside datasource that provides the data. How can I achieve this?
I tried to use Scatter charts but they are XY charts and need numerical values on both x and y axis. I can display the data as a linecharts which are categorical but the line connecting the markers is meaningless in my case and I don't need that displayed.
here's an example of my data
var data = [{id:"1", number:"1.23", label:"A"},{id:"2", number:"4.11", label:"B"}]
You could use simple line chart and set
markers visible
series.opacity to 0
series: [{
field: "value",
type: "line",
opacity: 0,
markers: {
size: 5,
visible: true,
}
}]
http://docs.kendoui.com/api/dataviz/chart#configuration-series.opacity