In C3.js there's a way to rescale the y-axis when you zoom in. Does a similar function exist for the x-axis?
Similar code from the chart
var visualizeThis = c3.generate({
bindto: '#this',
data: {
x: 'Dates',
columns:[
dates,
dataPoints
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d/%Y'
}
}
},
zoom: {
enabled: true,
rescale: true //this only rescales the y-axis
},
point: {
show: false
}
});
In c3.js the zoom affects to x-axis as shown by this example.
If you want to scale y-axis also, you can try zoom.rescale option.
zoom: {
enabled: true,
rescale: true
}
Working example on jsfiddle.
Related
I have a project where I show the movements of the robot, I want to make this map so that the x and y scales are proportional to each other.
These data are real-time data, which, as I mentioned, shows the movement of a robot.
Can anyone help me with this?
This is the figure:
myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '',
backgroundColor: "blue",
fill: false,
data: [],
}]
},
options: {
scales: {
xAxes: [{
ticks:{
suggestedMax:15,
}
}]
yAxes: [{
ticks:{
suggestedMax:15,
}
}]
}
}
});
You can define the desired dimension of your canvas through the width or height property.
<canvas id="chartContainer" width="400"></canvas>
...or using CSS.
canvas {
width: 400px;
}
Further you should also define responsive: false and aspectRatio: 1 within the chart options, latter represents a square canvas.
options: {
responsive: false,
aspectRatio: 1,
See Configuration Options at the Chart.js documentation
I want to put an icon on the top of the shaft and graphics. I do not know how, I am new to this and would be grateful if I can help.
https://jsfiddle.net/apg8euad/
c3.generate({
data: {
x: 'fecha',
xFormat: '%d-%m-%Y', // 'xFormat' can be used as custom format of 'x'
columns: [[ "Precio",0,547324,515740,515740,236644,544576,515740,547324,547324,547324,544576,147184,120000],["fecha","20-05-2016","27-05-2016","03-06-2016","10-06-2016","17-06-2016","24-06-2016","01-07-2016","08-07-2016","15-07-2016","22-07-2016","29-07-2016","05-08-2016","12-08-2016"]],
type:'bar'
},
legend: {
show: true
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
},
y : {
tick: {
format: d3.format("$,")
}
}
}
});
in this image I put a red rectangle. that's the position I want this icon. (The icon can be any image)
I have the following c3.js code to make a bar graph that builds up from 0 (animates from 0 to the value of each bar). The graph also has a label that animates along with it. The label shows the final value of the graph.
Here's a fiddle
blankData=[
['data1',0,0,0,0],
['data2',0,0,0,0],
['data3',0,0,0,0]
]
chartData=[
['data1',60,10,4,25],
['data2',30,22,5,30],
['data3',30,9,4,17]
]
var chart = c3.generate({
bindto: '#chart',
size: {
height: 500,
},
data: {
columns: blankData,
colors:{
data1:'#00af50',
data2:'#F7931E',
data3: '#FF0000'
},
names:{
data1:'namedata1',
data2:'namedata2',
data3:'namedata3'
},
type:'bar',
labels: true,
},
tooltip: {
show: false
},
legend: {
show: false
},
axis: {
x: {
type: 'category',
categories: ['001', '002','003','004'],
tick: {
format: function (d) {
return "" ; }
}
}
},
transition: {
duration: 2000
}
});
setTimeout(function () {
chart.load ({columns: chartData});
}, 500)
This works nicely, but I'd like the labels to "build up" along with the animated bars. That is, the labels would start at 0 and increase up to the final value of the bar, as the bar animates.
Also, as a side question, would anyone know which attribute in the .css file to change to make the labels colored black? By default, the labels are the same color as the bars.
Any help would be appreciated. Thanks!
Why is it that when there are only a few values in an NVD3 scatterplot, the tick spacing spreads out immensely? I would think the ticks should be independent of the number of values, but that doesn't seem to be the case.
Compare this plunker with their example. The only difference is the number of values being plotted, and yet their example shows many ticks, whereas my plunker shows only a few.
How can I cause the ticks to space nicely at all zoom levels when the plot is meagerly populated?
I thought about defining specific tickValues like this:
chart: {
type: 'scatterChart',
// ...
xAxis: {
// ...
tickValues: d3.scale.linear().domain([-100,100]).ticks(500)
},
yAxis: {
// ...
tickValues: d3.scale.linear().domain([-100,100]).ticks(500)
},
zoom: {
enabled: true
}
}
but that only looks decent at certain zoom scales.
There's an option for ticks that I missed, as mentioned by krispo:
chart: {
type: 'scatterChart',
// ...
xAxis: {
// ...
ticks: 10
},
yAxis: {
// ...
ticks: 10
},
zoom: {
enabled: true
}
}
plunker
I am using the following code to initially construct a flot js graph
var plot = $.plot("#container", [{ data: sin},{ data: cos,yaxis: 2}],
{
series: {
lines: {
show: true,
fill: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
},
xaxis: {
mode: "time",
timeformat: "%d-%b"
},
yaxis: { position: "left",min: 0},
y2axis: { position: "right",min: 0,alignTicksWithAxis: 1},
zoom: {
interactive: true
},
pan: {
interactive: true
}
});
This allows me to zoom in/out as well as move around the graph. I've got an ajax call to update the axis and data on the graph which looks like below:
success: function(data){
var get = getDailyDataTEST(data, standard);
DaysGraphSRC.setData([{ data: get.gr1}, { data: get.gr2,yaxis: 2}]);
DaysGraphSRC.getOptions().xaxes[0].ticks = get.xaxis;
DaysGraphSRC.setupGrid();
DaysGraphSRC.draw();
}
Now my problem is that the zoom and pan don't get updated when new data is loaded. For example, If the user has zoomed in or moved somewhere on the graph and the ajax call updates the data the zoom stays on the same level. Any ideas on how to reset zoom and pan so that they fit the new data which is loaded?