I am using xy chart in amcharts as per my requirement.
In that amcharts, whenever on click of a bubble, I need to highlight the bubbles. So I have added listeners to my options as follows:
"listeners": [
{
"event": "clickGraphItem",
"method": function(event) {
var bubbleId = event.item.dataContext.id;
var toolTip = "";
dataProvider.forEach((data) => {
if (bubbleId != "" && bubbleId == data.id) {
if (data.bubbleSize == 10) {
data.bubbleSize = 20;
data.shape = "diamond";
} else {
data.bubbleSize = 10;
data.shape = "round";
}
} else {
data.bubbleSize = 10;
data.shape = "round";
}
});
this.AmCharts.updateChart(this.chart, () => {
// Change whatever properties you want
this.chart.dataProvider = dataProvider;
});
}
}],
But I am getting an error as "Cannot read property 'Amcharts' of undefined". I am not able to resolve the issue. Can anyone help me on this?
Referal Code for Amcharts angular as follows:
https://github.com/amcharts/amcharts3-angular2
Related
Currently, i've getting the string data from the maps.kml to display in laravel blade for simple testing. Based on the official documentation, mapbox can parse the kml string to maps. But it wont displayed.
Controller
...
$excelFile = public_path().'/assets/excel.xlsx';
$kmlfile = public_path(). '/assets/maps.kml';
$kmlContent = file_get_contents($kmlfile);
$kmlLoad = simplexml_load_string($kmlContent);
$kmlJsonFile = $kmlLoad->Document->Folder->Placemark;
// $kmlJson = json_decode($kmlLoad);
$parse = SimpleXLSX::parse($excelFile);
if ($parse) {
$petaSheet = $parse->rows(0, 0); //worksheet index, row limit
foreach($kmlJsonFile as $item)
{
foreach($petaSheet as $peta)
{
if($peta[0] == $item->name)
{
$item->Style->LineStyle->color = $peta[0];
}
}
}
// $monitorSheet = $parse->rows(1, 0);
} else {
$excelRaw = SimpleXLSX::parseError();
}
// $kmlJsonFile = json_encode($kmlJsonFile);
return view('home', [
'peta' => $petaSheet,
'kml' => $kmlContent
]);
Here the js file inside laravel blade
var kmlString = "";
kmlString += `{!! $kml !!}`;
var runLayer = omnivore.kml.parse(kmlString)
.on('ready', function() {
map.fitBounds(runLayer.getBounds());
})
.addTo(map);
Is it possible to create a graph sorted in each time interval using Highcharts?
For expample, in this picture for January data will be in order: New York, Tokyo, London, Berlin. The same for each months - data should be shown decrease order
Highcharts doesn't have a built-in function to do that, but for example you can use the render event and organize columns, by changing their positions in the way you need.
events: {
render: function() {
var series = this.series,
longestSeries = series[0],
sortedPoints = [],
selectedPoints = [];
// find a series with the highest amount of points
series.forEach(function(s) {
if (s.points.length > longestSeries.points.length) {
longestSeries = s;
}
});
longestSeries.points.forEach(function(point) {
series.forEach(function(s) {
selectedPoints.push(s.points[point.index]);
});
sortedPoints = selectedPoints.slice().sort(function(a, b) {
return b.y - a.y;
});
selectedPoints.forEach(function(selectedPoint) {
if (
selectedPoints.indexOf(selectedPoint) !==
sortedPoints.indexOf(selectedPoint) &&
selectedPoint.graphic
) {
// change column position
selectedPoint.graphic.attr({
x: sortedPoints[selectedPoints.indexOf(selectedPoint)].shapeArgs.x
});
}
});
sortedPoints.length = 0;
selectedPoints.length = 0;
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/tnrch8v1/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
#ppotaczek Thank You for help a lot! I solve my issue, but i had to make some changes to your code:
events: {
render: function() {
if (this.series.length === 0) return
var series = this.series,
longestSeries = series[0],
sortedPoints = [],
selectedPoints = [];
// find a series with the highest amount of points
series.forEach(function(s) {
if (s.points.length > longestSeries.points.length) {
longestSeries = s;
}
});
longestSeries.points.forEach(function(point) {
series.forEach(function(s) {
selectedPoints.push(s.points[point.index]);
});
sortedPoints = selectedPoints.slice().sort(function(a, b) {
return b.y - a.y;
});
selectedPoints.forEach(function(selectedPoint) {
if (
selectedPoints.indexOf(selectedPoint) !==
sortedPoints.indexOf(selectedPoint) &&
selectedPoint.graphic
) {
// change column position
selectedPoint.graphic.attr({
x: selectedPoints[sortedPoints.indexOf(selectedPoint)].shapeArgs.x
});
}
});
sortedPoints.length = 0;
selectedPoints.length = 0;
});
}
},
}
So i changed:
// change column position
selectedPoint.graphic.attr({
x: sortedPoints[selectedPoints.indexOf(selectedPoint)].shapeArgs.x
});
to:
// change column position
selectedPoint.graphic.attr({
x: selectedPoints[sortedPoints.indexOf(selectedPoint)].shapeArgs.x
});
I'm trying another solution to my problem:
The thing is: im rendering a Sketch component with a background image and sketching over it
onReady = async () => {
const { layoutWidth, layoutHeight, points } = this.state;
this.sketch.graphics = new PIXI.Graphics();
const linesStored = this.props.screenProps.getSketchLines();
if (this.sketch.stage) {
if (layoutWidth && layoutHeight) {
const background = await PIXI.Sprite.fromExpoAsync(this.props.image);
background.width = layoutWidth * scaleR;
background.height = layoutHeight * scaleR;
this.sketch.stage.addChild(background);
this.sketch.renderer._update();
}
if (linesStored) {
for(let i = 0; i < linesStored.length; i++) {
this.sketch.stage.addChild(linesStored[i])
this.sketch.renderer._update();
}
}
}
};
this lineStored variable is returning a data i've saved onChange:
onChangeAsync = async (param) => {
const { uri } = await this.sketch.takeSnapshotAsync();
this.setState({
image: { uri },
showSketch: false,
});
if (this.sketch.stage.children.length > 0) {
this.props.screenProps.storeSketchOnState(this.sketch.stage.children);
}
this.props.callBackOnChange({
image: uri,
changeAction: this.state.onChangeAction,
startSketch: this.startSketch,
undoSketch: this.undoSketch,
});
};
storeSketchOnState saves this.sketch.stage.children; so when i change screen and back to the screen my Sketch component in being rendered, i can retrieve the sketch.stage.children from App.js state and apply to Sketch component to persist the sketching i was doing before
i'm trying to apply the retrieved data like this
if (linesStored) {
for(let i = 0; i < linesStored.length; i++) {
this.sketch.stage.addChild(linesStored[i])
this.sketch.renderer._update();
}
}
```
but it is not working =(
Let's say I have the following code
var $variable = $('<li/>', {
tabindex: 0,
click: function() {
//more code in here
}
}
is it possible to define the click: with a variable? Baring in mind it is already inside a variable and will also include an if statement, like so:
if(condition) {
var functiontype = 'click';
}
else {
var functiontype = 'hover';
}
var $variable = $('<li/>', {
tabindex: 0,
functiontype: function() {
//more code in here
}
}
I tried doing this but it didn't work. Can someone please point me in the right direction?
if(condition) {
var functiontype = 'click';
}
else {
var functiontype = 'hover';
}
var options = {};
options["tabindex"] = 0;
options[functiontype] = function(){
// your code
}
var $variable = $('<li/>', options);
You may do the reverse :
var $variable = $('<li/>', {
tabindex: 0
};
$variable[condition?'click':'hover'] = function(){
// the code here
}
For some reason in IE8 when I run this function after an onclick event it causes a page refresh. I don't wan the page refresh to happen.
var edealsButton = dojo.byId("edeals_button");
var edealEmailInput = dojo.byId("edeals_email");
var edealsSignup = dojo.byId("edeals_signup");
var edealsThankYou = dojo.byId("edeals_thankyou");
var currentValue = dojo.attr(edealEmailInput, 'value');
if (currentValue != '' && currentValue != 'Enter your email') {
var anim = dojox.fx.flip({
node: edealsSignup,
dir: "right",
duration: 300
})
dojo.connect(anim, "onEnd", this, function() {
edealsSignup.style.display = "none";
edealsThankYou.style.display = "block";
})
dojo.connect(anim, "onBegin", this, function() {
var criteria = { "emailAddress": '"' + currentValue + '"' };
alert("currentValue " + currentValue);
var d = essentials.CallWebserviceMethod('AlmondForms.asmx/SignupEdeal', criteria);
d.addCallback(function(response) {
var obj = dojo.fromJson(response);
alert(obj.d);
if (obj != null && obj.d != null) {
//alert(obj.d);
if (obj.d == false)
{
var edealSuccess = dojo.byId("edeals_succes_thankyou");
var edealError = dojo.byId("edeals_error_thankyou");
alert("edealError: " + edealError);
dojo.style(edealSuccess, "display", "none");
dojo.style(edealError, "display", "inline-block");
}
else
{
var edealSuccess = dojo.byId("edeals_succes_thankyou");
var edealError = dojo.byId("edeals_error_thankyou");
dojo.style(edealSuccess, "display","inline-block");
dojo.style(edealError, "display", "none");
}
}
else {
var edealSuccess = dojo.byId("edeals_succes_thankyou");
var edealError = dojo.byId("edeals_error_thankyou");
dojo.style(edealSuccess, "display", "none");
dojo.style(edealError, "display", "inline-block");
}
});
})
anim.play();
edealEmailInput.innerHTML == 'Enter your email';
}
else
{
dojo.attr(edealEmailInput, 'value', 'Enter your email');
dojo.style(edealEmailInput, 'color', '#CC2525');
}
It looks like your "d.addCallback" code might not be disposed of properly. You might want to try placing "dojo.stopEvent()" possibly before the "anim.play();" line and see if this would stop the postback.
From the api.dojotoolkit.org site, the dojo.stopEvent() "prevents propagation and clobbers the default action of the passed event". From the docs.dojocampus.org site, they say that "dojo.stopEvent(event) will prevent both default behavior any any propagation (bubbling) of an event."
Good luck, and hope this helps you out some.