In my AngularJS Controller I got
var test = {
"type": "pie",
"theme": "light",
"data": dataWantedArea,
"valueField": "value",
"titleField": "name",
"balloon": {
"fixedPosition": true
},
"autoMargins": false,
"marginLeft": 5,
"marginRight": 5,
"marginBottom": 5,
"marginTop": 5,
"pullOutRadius": 0,
colors: ["#36CB1F", "#F58426", "#F53E26"],
"export": {
"enabled": true
}
};
in my template I do
<am-chart ng-if="test.data.length" id="test" options="test" width="90vw" height="325px"></am-chart>
Problem: its never shown, obviously test.data.length is ALWAYS false - so I would like to print some debugging in my template, is that possible somehow?
Of course If you know a direct solution to my problem, feel free to answer.
If you want to use data or variable from controller to html, you have to use $scope.
Use $scope.test intead of var test
To debug your code there is a cool browser plugin available.
http://ng-inspector.org/
There you can see a tree and all your values. It's very helpful to debug your code. You can see your scope and you can find and see problems.
Related
Recently I changed Floats to FlexBox to have easier work with panels (as advised on other questions I did). While most of the things are working as I expect it, I'm having a problem with Apex Charts after the change.
Full code is here:
https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html
Here's how it looks when loaded. You will notice that in 1st and 2nd-row charts go out of bounds even thou the panel they are in is in place and it works for the top row.
And if I do resize (like 1mm) it will start working correctly.
Any idea what could be the problem?
In apex charts CSS it has comments to not use overflow (I tried and it doesn't do anything) but to be honest, I even once forgot to attach that CSS and nothing changed (like everything is done by the JS.
.apexcharts-canvas {
position: relative;
user-select: none;
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
}
/* scrollbar is not visible by default for the legend, hence forcing the visibility */
Keep in mind that I'm a total noob when it comes to JS/CSS/HTML so excuse my language.
You need to move all your scripts to the end instead of injecting in the HTML to allow the SVG Document parser to get the element's size correctly.
Working Codepen Example
var options = {
"chart": {
"height": 350,
"type": "line",
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
},
"autoSelected": "zoom"
}
},
"plotOptions": {
"bar": {
"horizontal": true
}
},
"dataLabels": {
"enabled": true,
"offsetX": -6,
"style": {
"fontSize": "12px",
"colors": [
null
]
}
},
"series": [{
"name": "People count",
"data": [
400,
430,
448
]
},
{
"name": "People death",
"data": [
450,
0,
200
]
}
],
"xaxis": {
"type": "category",
"categories": [
"2015",
"2016",
"2017"
]
},
"stroke": {
"show": true,
"curve": "straight",
"width": 2,
"colors": [
"#0000ff",
"#008000"
]
},
"legend": {
"position": "right",
"offsetY": 100,
"height": 230
},
"title": {
}
}
var chart = new ApexCharts(document.querySelector('#ChartID-2rhiatbe'),
options
);
chart.render();
I made some window app that can control Bulbs. it works okay for about three months
but one of blubs makes problem. So I was trying to find out what is wrong.
here's xmlhttpRequest (I used CLIP API Debugger)
usual blubs: (XMLHttpRequest) id:14
{"state": {
"on": true,
"bri": 254,
"hue": 34704,
"sat": 198,
"effect": "none",
"xy": [
0.3228,
0.3291
],
"ct": 167,
"alert": "none",
"colormode": "xy",
"mode": "homeautomation",
"reachable": true
}
issue: id:11
{
"state": {
"on": true,
"bri": 254,
"hue": 0,
"sat": 254,
"effect": "none",
"xy": [
0.3227,
0.329
],
"ct": 153,
"alert": "none",
"colormode": "xy",
"mode": "homeautomation",
"reachable": false
},
If anyone know this issue please let me know what's wrong with blubs...
reachable attribute is a read-only attribute (you can't set it), it simply tells you if the light is available or out of reach.
the common causes of a light to be un-reachable is that it's set to off, it's out of range or it's dead.
So
Either turn the switch on
If it's out of range, add another light between the bridg and that light ( as they work as a pass-through extension too )
If it's dead replace it
Bonus: If nothing worked try to delete it and re-add it
Using js amcharts with PHP, Found that source code and paths is accessible through charts. How to block it as this can be serious security issue. I am new to PHP, please elaborate the answer if possible. Thanks
PHP is a server side language amcharts.js runs on the client, meaning any data it receives must be accessible to the same client that is rendering the chart. You can't make data visible to the cart but invisible to the user, however if you want to limit what the user can see you can render the chart data as JSON in the containing html page (using json_encode) and then pass it as a variable to the charting library, such as:
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
"dataProvider": <%php echo json_encode($ResultsArray); %>
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>
That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}
Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.
I have json object which i pass to AmCharts.makeChart() function as a data provider and it shows proper graph in firefox, chrome and ie but not in safari
I also see that json data in console but still graph not comes
I had used amchart.js, serial.js
Thanks in advance...
I had the same problem. Passing "dataDateFormat": "YYYY-MM-DD HH:NN:SS" to the AmCharts.makeChart command solved the issue for me. An example graph code would look like this:
var chart1 = AmCharts.makeChart("chartdiv1", {
"type": "serial",
"theme": "dark",
"pathToImages": "amcharts/images/",
"dataProvider": chartData,
"valueAxes": [{
"position": "left",
"title": "temperature (\xB0C)"
}],
"graphs": [{
"fillAlphas": 0.4,
"valueField": "temp"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"categoryField": "time",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"title": "date"
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS"
});
In my case, the JSON object was created from a mysql database from a php script. The database contained epoch timestamps which I converted into date time format in mysql by using a FROM_UNIXTIME(time) select query. This gives me dates like 2014-10-06 22:04:16. Apparently, Chrome and firefox can handle such date strings natively but safari cannot.
This is a Safari specific issue.
Adding dataDateFormat: YYYY-MM-DD HH:NN:SS to AmCharts.makeChart solved the issue as answered by Thawn here:
https://stackoverflow.com/a/26795224/4448807