I have many axes in the chart.
How to highlight the axis when hovering on a line(axis-value)?
It is necessary to highlight the axis to which the line(axis-value) belongs (when hovering on a line(axis-value))
(Highlight = make bold or change color)
Sorry for the bad english :)
You could use the seriesHover event:
seriesHover: function(e) {
var axis = e.sender.getAxis( e.series.axis);
for (var i=0; i<e.sender.options.valueAxis.length; i++){
if (i ==axis._axis.axisIndex){
e.sender.options.valueAxis[i].line.width = 3;
} else {
e.sender.options.valueAxis[i].line.width = 1;
}
}
e.sender.refresh();
}
From the series you can get theassociated axis, then set the axis line width and refresh the chart.
DEMO
Related
I have scoured the amcharts4 docs to find this answer but could not. I have a PieChart with a legend. On slice clicks I apply a 'selected' state to the slice. However when the user hovers on the legend and mouse out from the legend that state is removed. I do not want this.
I want hoveringOut of the legend to have no effect on my PieChart slice state.
function createLegend({ chart, config }) {
const legend = new am4charts.Legend();
legend.position = 'right';
const markerTemplate = legend.markers.template;
markerTemplate.width = 10;
markerTemplate.height = 12;
legend.hoverable = false;
legend.labels.template.fontSize = 12;
legend.valueLabels.template.disabled = true;
legend.itemContainers.template.togglable = false;
chart.legend = legend;
}
I would like to plot stock prices over time, and my x-axis data is day-month-year.
I can re-format how the date is presented in Excel, but is there an 'easy' way to use this type of data in a p5.js line graph?
Thanks!
I'd recommend looking into grafica. Here is a nice example that uses it in a p5 sketch (not mine), I found this on Google, it was made by 'piecesofuk':
function setup() {
createCanvas(400, 400);
// Create a new plot and set its position on the screen
points = [];
seed = 100 * random();
for (i = 0; i < 100; i++) {
points[i] = new GPoint(i, 10 * noise(0.1 * i + seed));
}
plot = new GPlot(this);
plot.setPos(0, 0);
plot.setOuterDim(width, height);
// Add the points
plot.setPoints(points);
// Set the plot title and the axis labels
plot.setTitleText("A very simple example");
plot.getXAxis().setAxisLabelText("x axis");
plot.getYAxis().setAxisLabelText("y axis");
// Draw it!
plot.defaultDraw();
}
function draw() {
// background(220);
}
Results in this:
I am generating scatter plot using c3 js.I wanted to display some text inside the bubble.Text can be either its value(y axis) or x axis value.The property (labels :true) which works for bar graph does not work in case of scatter.Please help
Thanks
Adding Labels to c3 Scatter Plot
You can select the points using d3 and add whatever text you want using the point coordinates. For example, here's how you add the serei-index.point-index
function drawLabels(chartInternal) {
var textLayers = chartInternal.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts);
for (var i = 0; i < textLayers[0].length; i++) {
// select each of the scatter points
chartInternal.mainCircle[i].forEach(function (point, index) {
var d3point = d3.select(point)
d3.select(textLayers[0][i])
.append('text')
// center horizontally and vertically
.style('text-anchor', 'middle').attr('dy', '.3em')
.text(i + '.' + index)
// same as at the point
.attr('x', d3point.attr('cx')).attr('y', d3point.attr('cy'))
})
}
}
and call it like this
drawLabels(chart.internal);
You can easily use the index to pick out labels from an array instead.
Responding to Legend Clicks
To update the label positions when you show / hide each series by clicking on the legends you hook onto the legend click handlers remove the existing labels and draw them again at the new positions once the scatter points are in their final place. You use a timeout to make sure the label draw is triggered after the animation completes
Here's your legend option for that
legend: {
item: {
onclick: function (id) {
var $$ = this;
// remove existing labels
this.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts).selectAll('*').remove();
// this block is a copy paste from c3 code
if (this.d3.event.altKey) {
this.api.hide();
this.api.show(id);
} else {
this.api.toggle(id);
this.isTargetToShow(id) ? this.api.focus(id) : this.api.revert();
}
setTimeout(function () {
drawLabels($$)
// add a small duration to make sure the points are in place
}, this.config.transition_duration + 100)
}
}
},
Fiddle - http://jsfiddle.net/mn6qn09d/
I have a very simple line chart in dimple. I want to change the x and y axis colour to white.
var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset;
var chart = new dimple.chart(svg, dataset);
var x = chart.addCategoryAxis("x", "Attempts");
//x.style ("fill","red")
var y = chart.addMeasureAxis("y", "Value");
y.showGridlines = true;
x.showGridlines = true;
var s = chart.addSeries(["Metric", "Value"], dimple.plot.bubble);
var lines = chart.addSeries("Metric", dimple.plot.line);
lines.lineWeight = 2;
lines.lineMarkers = true;
chart.assignColor("Metric", "#30D630");
chart.draw();
s.shapes.style("opacity", function (d) {
return (d.yValue === 0 ? 0 : 0.8);
});
I've checked dimple.axis documentation in GitHub but couldn't find any thing. There is a dimple.axis.colors attribute, but it changes the color of the data and not the axis. Does dimple even support this?
I've also tried to add style attribute(like in D3):
x.style ("fill","red")
but caught an error: Uncaught TypeError: x.style is not a function
Any idea?
x is not a d3 selection, it is a dimple.axis. You can access the inner d3 selection with the shapes property (which is standard for any dimple object). There is an example of that here.
Depending on if you want to change the line color, text color, or everything, you would do
x.shapes.selectAll("*").style("fill", "white")
where * could also be "text" or "line".
One note : the individual tick marks are <line> nodes, and to change their color you need to use 'stroke', not 'fill'.
Also, the actual axis line itself is not a <line> element, it's a <path> element. So to change that color would be :
x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");
You can also just manually write a css rule to override the style for a chart :
g.dimple-axis > g.tick > line, g.dimple-axis path.dimple-custom-axis-line {
stroke:white;
}
For X-axis
d3.selectAll("path.domain")[0][0].style.stroke = "red";
For Y-axis
d3.selectAll("path.domain")[0][1].style.stroke = "yellow";
I'm trying to see where in the chart the user clicked. The below code almost works but it is offset by some amount. I suspect I need to handle the click relative to the charting area and not take the axis into account. What is the proper way to do this?
d3.select('#chart1 svg')
.datum(chartData)
.on("click", mouseClick )
.call(chart);
...
function mouseClick()
{
var coordinates = d3.mouse(this);
var x = chart.lines.xScale().invert(coordinates[0]);
var y = chart.lines.yScale().invert(coordinates[1]);
console.log(x+','+y);
}
You just have to subtract the margin:
function mouseClick()
{
var coordinates = d3.mouse(this);
var x = chart.lines.xScale().invert(coordinates[0]-chart.margin().left);
var y = chart.lines.yScale().invert(coordinates[1]-chart.margin().top);
}