I have 3 axes (velue-axis)
Can one axis be displayed on the left
Other two axes to display on the right?
http://demos.telerik.com/kendo-ui/line-charts/multiple-axes
(In this example, the axis is located on the right, but I do not know how to configure it)
Thanks.
Granted this isn't entirely clear when you first look at the demo. The important thing to look at is this section:
categoryAxis: {
categories: [],
axisCrossingValues:[]//This is the fella you are looking for.
}
I have tweaked the demo slightly to show you one of the axis in the middle of the chart. http://dojo.telerik.com/ASidu
The number is simply the position column on the chart that the axis should be rendered. By default if this in't set then all axis should be on the left hand side as normal. but if we start applying a number greater than 0 then the axis will shift. So in the example we have 3 value axis set up:
valueAxes: [{
name: "rain",
color: "#007eff",
min: 0,
max: 60
}, {
name: "wind",
color: "#73c100",
min: 0,
max: 60
}, {
name: "temp",
min: -30,
max: 30
}],
so if we look at them from crossing the y-axis (i.e. the bottom axis) we have 31 columns available to us 1- 31 so in my tweak I have applied this to the crossingAxis:
axisCrossingValues: [32, 15, 0]
This is effectively telling each of the value axes where they should be positioned:
so:
"rain" should be at position 32
"wind" should be at position 15
"temp" should be at position 0
So the order in which you add your value axes will determine which setting they take based on the order you include them.
Hopefully that helps clear things up for you. If you need any more info let me know and I will update accordingly
Related
I parsed images with Color thief and get their domain color and percentages. ex:
const colorSet = [{
r: 15, g:251, b:150, percentage: 50 // cover percentage in image
}, {
r: 150, g:121, b:45, percentage: 31
}, {
r: 43, g:160, b:180, percentage: 19
}]
I already know how to get the distance between two colors, but how about two "Color Sets"? Is there any algorithm to do this?
[EDIT]
I think vector is a way... but not sure about the detail.
I'm using Rickshaw graphs and I have a line graph working just fine. However, I would like to make the plot points visible by increasing their size. Is there a way to do this?
Here is my code:
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: window.innerWidth - 180,
height: 300,
renderer: 'line',
interpolation: 'linear',
min: 0,
max: 100,
series: graphLines
});
I tried using graph.renderer.dotSize = 16;, but it doesn't seem to work on line graphs, only scatter plots.
One thing I've done in the past is use the 'multi' option and create one line graph with a scatter plot on top of it to simulate the lines
I am trying to lock the Y axis when zooming in Kendo UI. According to the docs, I should be able to do it like this:
zoomable: { mousewheel: { lock: "y" } }
But somehow it is not working, even the demo in Kendo has the same problem, see
http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom
When I zoom in, you can see y axis max change from 12 to 10 and lower.
Am I understanding the docs correctly or there is a bug with kendo?
Thank you!
You can see that if you zoom on a bar with a height of 10, the y axis max remains at 12.
The behavior you're seeing is not zooming but changing the axis max to better suit the heights of the bars you see in the view. You can see the difference in the fact that the minimum value of the axis remains 0 but when you enable zooming in the y axis, the minimum value also changes.
You can avoid this behavior by setting a permanent axis max value:
valueAxis: {
max: number
}
The reason for this behavior is that if you add/remove/change your values, you'll want the grid to accommodate the new bars and not have them exceed the top of the chart. Setting the max y axis value is a good idea only if your data isn't going to change after the chart is shown for the first time.
The y-axis is not zooming, rather the max value is being auto-calculated depending on which bars are currently visible. You can avoid this be setting the valueAxis.max value. In the example, add
valueAxis:{
max: 12
},
The answer of setting the valueAxis.max is nearly there. But the issue I have with this is when you reach maximum zoom decimals appear because the y-axis changes based on which bars are currently visible. If I do a valueAxis.labels.format: '{0:0}', yes the decimals are gone but on maximum zoom it would appear that the bars are not leveled correctly to the y-axis. In fact the bar height/level is correct, the y-axis label is wrong, it's missing a decimal. The key is setting valueAxis.majorUnit. To demostrate, here is my options for a Kendo Chart for jQuery. Comment/uncomment the valueAxis.labels and valueAxis.majorUnit to see the difference.
{
series: [{
name: 'Grand Total',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
type: 'column',
}],
zoomable: {
mousewheel: {
lock: 'y',
},
selection: {
lock: 'y',
},
},
pannable: {
lock: 'y',
},
valueAxis: {
max: 12,
// labels: {
// format: '{0:0}',
// },
majorUnit: 1,
},
categoryAxis: {
categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
},
}
Hope this helps.
I am drawing a scatter chart using d3.js and epoch. The values that becomes the circles in the chart are based on log values, which makes my both axis go below zero.
var chart = $('#scatterchart').epoch({ type: 'scatter', data: scatterData, axes: ['bottom', 'left'], ticks: { right: 4, bottom: 4}, domain: [-1.4, 2], range: [-2,4], margins: { top: 10, right: 80, bottom: 60, left: 80 }, });
I would like to keep the position of the circles but manipulate the axis so that:
x(horisontal):
-1 -> 0.5
0 -> 1
1 -> 2
2 -> 4
y(vertical):
-2 -> 0.25
-1 -> 0.5
0 -> 1
1 -> 2
2 -> 4
3 -> 8
4 -> 16
Anyone that has any suggestion on how to do this?
I have no experience with epoch.js, and I don't know if you can tweak the axes it creates.
But you could try to transform your data before feeding it to your scatterplot generator.
If scatterData is an array, you could use array.map():
newData = scatterData.map(function(d){return someTransformFuntion(d);});
And adapt the input domain of your axis (actually, your scale) accordingly.
I have no experience with epoch.
But assuming it works on top of d3js, all you need to do is change the domain of both of your scales.
When you visualise your data, you work with a domain (for data) and a range (pixels on your screen). So to support negative values, you would need to adjust the domain to support [-2, 4] (for the y axis example).
As a bonus some reading about domains and negative values
I'm working with a pretty simple Kendo UI Chart.
When the values go below zero, the axis labels stay near the zero axis. This caused the text and bars to overlap, which is not optimal.
I would like to get the labels to show up at the bottom of the chart area. Any one know how to do this?
See below, where the 'Approved' text is overlapping with the grey bar. I'd like the label at the bottom of the chart area.
#gman, what you're looking for is the axisCrossingValues.
valueAxis: {
min: -10,
max: 10,
// Keeps the default axis at the 0 crossing point
// and moves the "label" axis to the very bottom
axisCrossingValues: [0, -10]
}
Take a look at a code sample here: http://jsfiddle.net/design48/7C3nP/ and change the axisCrossingValues y-coordinate to -8 or something. Hope that helps.