I'm using amcharts 4 in vue js app. Trying to build an XYChart with draggable circle bullets. I'm toggling between drag or zooming options, its either one or other , so I'm setting up the draggable state to a bullet instance whenever its hover on and out (idk if thats a good approach)
this.bullet.events.on("over", e => {
e.target.interactions.draggable = this.darggableState;
});
this.bullet.events.on("drag", e => {
console.log(e.target.dataItem.valueY) // representation value of Y axis
console.log(e.target.relativeY) // infinity . As far as I understood this value
should represent relative Y axis value accordingly current bullet position on yAxis.
Meawhile I'm still able to get a pixel representation of position.
});
I'm considering that I might should use an event on some other instance than bullet. My main goal is to retrieve relative value of a dragged bullet on the chart so that I could update my data with it. Any help or advices appreciated !
After hours of trying to find the best approach , realized that cursor object is the best way to get reference to axis value accrodingly to current position.
this.chart.cursor.events.on("cursorpositionchanged", function(ev) {
var yAxis = ev.target.chart.yAxes.getIndex(0);
console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
});
https://www.amcharts.com/docs/v4/tutorials/tracking-cursors-position-via-api/
or event on dragging event you can still access
const yAxis = this.chart.yAxes.getIndex(0);
const axisValue = yAxis.positionToValue(yAxis.toAxisPosition(this.chart.cursor.yPosition)
I have a HorizontalBarChart with mpAndroidChart and I am having problems to display the labels on the left side, but within the graph. It looks like this:
the labels are chopped of on the left side. This is done via the line
testchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE)
On the right side, it works smoothly:
The labels are inside the graph and fully displayed. This is done by the line:
testchart.getXAxis().setPosition(XAxis.XAxisPosition.TOP_INSIDE)
Any idea what I am doing wrong?
My Code for the chart is:
BarData data = new BarData(new BarDataSet(entries, "Labeltest"));
data.setBarWidth(1); // set custom bar width
data.setDrawValues(false);
oBinding.testchart.setData(data);
oBinding.testchart.getXAxis().setLabelCount(labels.size());
oBinding.testchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE);
oBinding.testchart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(labels));
// Hide grid lines
oBinding.testchart.getAxisLeft().setEnabled(false);
oBinding.testchart.getAxisRight().setEnabled(false);
// Hide graph description
oBinding.testchart.getDescription().setEnabled(false);
// Hide graph legend
oBinding.testchart.getLegend().setEnabled(false);
oBinding.testchart.invalidate(); // refresh
and in XML:
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="#+id/testchart"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
I have encountered the same problem, I solved it this way.
chart.getXAxis().setPosition(XAxisPosition.BOTTOM_INSIDE)
In that way the labels should be drawn over the bars. You can further reposition the labels by using the setXOffset(...) and setYOffset(...) methods of the XAxis class.
If you have a better way, please let me know, thank you
Try this:
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE);
Added in response to comment from #andreas-zuercher:
This way has always worked for me. This also makes it easy to set other axis parameters like:
xAxis.setDrawGridLines(true);
xAxis.setGranularity(1f);
xAxis.setGranularityEnabled(true);
final String[] xTime = time.split(",");
xAxis.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
return xTime[(int) value-1];
}
});
xAxis.setValueFormatter(new IndexAxisValueFormatter(xTime));
In this example:
var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 100, 100);
stage.addChild(rect);
}
function drawShapes(){
drawRectangle();
stage.update();
}
drawShapes();
// Why does this call log null?
console.log(stage.getBounds());
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<canvas id="testCanvas" width="600" height="150"></canvas>
stage.getBounds(); is returning null. Why does it return null? According to the docs, it's supposed to return a rectangle object representing the dimensions of the bounding box of the stage.
If this usage is incorrect, what is the correct usage to get the dimensions of the object?
It looks like the stage object can't calculate their own bounds.
In the same getBounds() documentation it appears the following:
Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.
If it's the case, as the documentation says, you can use the setBounds() method (documentation) to set manually the bounds of the object:
setBounds(x,y,width,height)
In the case of your code:
stage.setBounds(0,0,600,150); // (0,0), at the same size of the canvas
Is there any way to not show this slider(as in screenshot below) on click of few polygons but to show on click of few other polygons?
To simplify what I mean to say, suppose This slider should be shown on click of blue polygon but should not be shown when red polygon is clicked, but I want to keep the ids for both polygons.
There's an undocumented property [_enableInfoOrSelection][1] (note - this is a private property and is unsafe for production - use with care).
The code is:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var shouldShow = true;
handler.setInputAction(function(click) {
viewer._enableInfoOrSelection = shouldShow;
shouldShow = !shouldShow;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Note the line that controls weather to show or not to show the info box:
viewer._enableInfoOrSelection = shouldShow;
You'd might want to do something smarter (like to remove the info box in case a new entity was clicked etc., but it's up to you :)).
Here's a working code:
http://plnkr.co/edit/Zb6fwNExkceAPpRyXnEw?p=preview
I am using Dojo to generate alternate chart on click event of previous chart.
Firstly, i am drawing stacked line chart(say for Customers) and on clicking one of the line i need to draw another pie chart for further details of that Customer(say revenue by that customer). All that is happening for a single line chart.
Here Problem is to find id for that particular line, now i am getting array of ids for all plotted lines.
Following graph is drawn for three Customers.
And Following I am presenting my code :
var colorArray =["#2cabe2","#57E964","#736AFF","#B93B8F","#151B8D","#EE9A4D",...];
for(var i =0 ; i<length ; i++)
{
chart.addSeries(response.legend + " "+ i,response.data[i],{color: colorArray[i]});
}
chart.connectToPlot("default", function(evt) {
var shape = evt.shape, type = evt.type;
if (type == "onclick") {
url="/ritl/chart/getProcessPieData.htm?customerId="+dijit.byId('customerId').get('value'); // url to the next (pie) chart in the same jsp.
processPie(url); // calling function for pie Chart
}
});
Data Response is in the form of JSONArray. JSON pattern is as:
{"data":[[{"text":"January","value":1,"customerID":"RITL00013","y":0},{"text":"February","value":2,"customerID":"RITL00013","y":0},{"text":"March","value":3,"customerID":"RITL00013","y":0},{"text":"April","value":4,"customerID":"RITL00013","y":0},{"text":"May","value":5,"customerID":"RITL00013","y":0},{"text":"June","value":6,"customerID":"RITL00013","y":0},{"text":"July","value":7,"customerID":"RITL00013","y":0},{"text":"August","value":8,"customerID":"RITL00013","y":0},{"text":"September","value":9,"customerID":"RITL00013","y":0},{"text":"October","value":10,"customerID":"RITL00013","y":119951.2},{"text":"November","value":11,"customerID":"RITL00013","y":430827.04},{"text":"December","value":12,"customerID":"RITL00013","y":0}],[{"text":"January","value":1,"customerID":"RITL00002","y":0},{"text":"February","value":2,"customerID":"RITL00002","y":0},{"text":"March","value":3,"customerID":"RITL00002","y":0},{"text":"April","value":4,"customerID":"RITL00002","y":0},{"text":"May","value":5,"customerID":"RITL00002","y":0},{"text":"June","value":6,"customerID":"RITL00002","y":0},{"text":"July","value":7,"customerID":"RITL00002","y":0},{"text":"August","value":8,"customerID":"RITL00002","y":0},{"text":"September","value":9,"customerID":"RITL00002","y":0},{"text":"October","value":10,"customerID":"RITL00002","y":41996.52},{"text":"November","value":11,"customerID":"RITL00002","y":566353.8099999999},{"text":"December","value":12,"customerID":"RITL00002","y":0}],[{"text":"January","value":1,"customerID":"RITL00016","y":0},{"text":"February","value":2,"customerID":"RITL00016","y":0},{"text":"March","value":3,"customerID":"RITL00016","y":0},{"text":"April","value":4,"customerID":"RITL00016","y":0},{"text":"May","value":5,"customerID":"RITL00016","y":0},{"text":"June","value":6,"customerID":"RITL00016","y":0},{"text":"July","value":7,"customerID":"RITL00016","y":0},{"text":"August","value":8,"customerID":"RITL00016","y":0},{"text":"September","value":9,"customerID":"RITL00016","y":0},{"text":"October","value":10,"customerID":"RITL00016","y":132784.45},{"text":"November","value":11,"customerID":"RITL00016","y":571506.6},{"text":"December","value":12,"customerID":"RITL00016","y":0}]],"Success":true,"dataLength":3}
How to find out the individual id for the line in the above Chart. Suggest me to get out of this situation. Thanks in advance for active suggestions..
What about something like the following in your connectPlot callback:
event.run.data[event.index].customerID