I'm trying to load local html page using webbrowser tool in Winforms but I got script error message and my page won't load, when I open that page using any web browser it opens with no problem at all! I tried some solutions as editing registry but no fix.
my html page has jscript code and this is the code in my page:
<html>
<head>
<script type="text/javascript"src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript"src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
var csatGauge = new FusionCharts({
"type": "angulargauge",
"renderAt": "chart-container",
"width": "400",
"height": "250",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
}
}
});
csatGauge.render();
});
</script>
</head>
<body>
<div id="chart-container">An angular guage will load here!</div>
</body>
</html>
I've managed to solve it by adding this code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
I'm still not sure if this is only thing needed or it worked with the change of the registry: solution
Related
i want to show pop up if value is less than 3 . i used alert function but when this alert event is fired page is not rendering. how to show popup without blocking the page to display , and how to refresh the chart every 30 sec.
<script>
FusionCharts.ready(function () {
LoadChart();
});
function LoadChart() {
$.ajax({
url: '#Url.Action("get", "air")',//remote api address
type: 'GET',
crossDomain: true,
success: function (data) {
if (data.success) {
var dust= data.sensorsdata.cl;
if (dust > 3)
alert("dust is high");
$("#lblDate").text(data.sensorsdata.CurrentTime);
$("#currenttime").show();
var dustchart= new FusionCharts({
type: 'angulargauge',
renderAt: 'ph-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Chlorine ",
"lowerLimit": "0",
"upperLimit": "14",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "5",
"code": "#6baa01"
}, {
"minValue": "5",
"maxValue": "10",
"code": "#f8bd19"
}, {
"minValue": "10",
"maxValue": "14",
"code": "#e44a00"
}]
},
"dials": {
"dial": [{
"value": dust
}]
}
}
});
dustchart.render();
}
}
});
}
</script>
<td><div id="dust-container" style="float:left;"></div></td>
Javascript modals will always block page. You need to implement your own popup code or use library for example bootstrap modal
http://getbootstrap.com/javascript/
Another way you can think of if you are doing just simple notifications is using something called toastr (or growl) - there are libs for this also.
For updating fussioncharts look at this example
http://www.fusioncharts.com/dev/using-with-javascript-libraries/jquery/updating-chart-properties-using-jquery.html#changing-the-data-for-an-existing-chart
I have created the following fiddle using fusioncharts. I am unable to understand why the fill colour of the chart is transparent.
An HTML snippet for the sample:
FusionCharts.ready(function() {
var demographicsChart = new FusionCharts({
type: 'pie2d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Age profile of website visitors",
"subCaption": "Last Year",
"startingAngle": "120",
"showLabels": "0",
"showLegend": "1",
"enableMultiSlicing": "0",
"slicingDistance": "15",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"plotTooltext": "Age group : $label<br>Total visit : $datavalue",
"theme": "fint"
},
"data": [{
"label": "Teenage",
"value": "1250400"
}, {
"label": "Adult",
"value": "1463300"
}, {
"label": "Mid-age",
"value": "1050700"
}, {
"label": "Senior",
"value": "491000"
}]
}
});
demographicsChart.render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- A pie3D Chart showing percentage visiting for different age groups last year in Harry's Supermart website. Attribute : # showPercentValues set to 1 to show the values w.r.t percentage of total visits. -->
<head>
<base href="/">
</head>
<div id="chart-container">FusionCharts will render here</div>
Using the following chart level attributes:
"caption": "Age profile of website visitors",
"subCaption": "Last Year",
"startingAngle": "120",
"showLabels": "0",
"showLegend": "1",
"enableMultiSlicing": "0",
"slicingDistance": "15",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"plotTooltext": "Age group : $label<br>Total visit : $datavalue",
"theme": "fint"
The problem is due to the usage of base tag in HTML head.
As explained here:
The issue is not primarily with FusionCharts - it is a generic SVG issue. In SVG, when gradient colour is applied on an element, it actually "refers" to another gradient element on the page. This is somewhat similar to how links can refer to hashtags using on a page.
Now, when you are setting a to the page, the references are
going haywire. The gradients now refer to an element with URL as
provided in your base tag.
Nevertheless FusionCharts provides a solution for this. Use 'FusionCharts.options.SVGDefinitionURL='absolute';' in your javascript code to fix this. You might refer to the this fiddle or check the snippet below:
FusionCharts.ready(function() {
FusionCharts.options.SVGDefinitionURL = 'absolute';
var demographicsChart = new FusionCharts({
type: 'pie2d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Age profile of website visitors",
"subCaption": "Last Year",
"startingAngle": "120",
"showLabels": "0",
"showLegend": "1",
"enableMultiSlicing": "0",
"slicingDistance": "15",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"plotTooltext": "Age group : $label<br>Total visit : $datavalue",
"theme": "fint"
},
"data": [{
"label": "Teenage",
"value": "1250400"
}, {
"label": "Adult",
"value": "1463300"
}, {
"label": "Mid-age",
"value": "1050700"
}, {
"label": "Senior",
"value": "491000"
}]
}
});
demographicsChart.render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- A pie3D Chart showing percentage visiting for different age groups last year in Harry's Supermart website. Attribute : # showPercentValues set to 1 to show the values w.r.t percentage of total visits. -->
<head>
<base href="/">
</head>
<div id="chart-container">FusionCharts will render here</div>
Hope this helps.
I am new with Angular.js. I try to get json from my local url http://85.96.243.31/admin.productss/searchwithjson. JSON content is:
[
{
"fullsizeurl": "/uploads/incubout_denemeshop/1/product/3-kdd4eesv-erer-1-cent-1.png",
"productid": "3",
"price": "0.01",
"isactive": 1,
"brandid": "1",
"subcategoryid": "1",
"model": "1 Cent",
"isbundle": 0,
"subcategory": "Cat2",
"taxincluded": 0,
"brand": "erer",
"thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/3-kdd4eesv-erer-1-cent-1_thumb.png"
},
{
"productid": "1",
"isactive": 1,
"isbundle": 0,
"taxincluded": 0,
"thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/1-gu60axs2-erer-model-1_thumb.png",
"fullsizeurl": "/uploads/incubout_denemeshop/1/product/1-gu60axs2-erer-model-1.png",
"price": "15.00",
"brandid": "1",
"subcategoryid": "1",
"model": "model",
"subcategory": "Cat2",
"sku": "12",
"brand": "erer"
},
{
"fullsizeurl": "/uploads/incubout_denemeshop/1/product/4-sjy7xxyh-erer-qwert-1.png",
"productid": "4",
"price": "123.00",
"isactive": 1,
"brandid": "1",
"subcategoryid": "2",
"model": "qwert",
"isbundle": 0,
"subcategory": "Cat1",
"taxincluded": 0,
"brand": "erer",
"thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/4-sjy7xxyh-erer-qwert-1_thumb.png"
},
{
"productid": "2",
"price": "13.65",
"isactive": 1,
"brandid": "1",
"subcategoryid": "1",
"model": "yancı",
"isbundle": 0,
"subcategory": "Cat2",
"taxincluded": 0,
"brand": "erer"
}
]
Here is my code:
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<ul ng-repeat="post in posts">
<li>{{post.fullsizeurl}}</li>
</ul>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('http://85.96.243.31/admin.productss/searchwithjson').
success(function(data, status, headers, config) {
$scope.posts = data;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</body>
</html>
I couldn't get the fullsizeurls of products. What is the wrong with this code ?
I've tried your code and found out that the problem is in violating the rules of pulling data from different domain.
Are you sure you're pulling the JSON file from the same domain name where the html is being executed? - I've tried fetching your JSON file and storing with .html file and ran it perfectly fine from within the same folder.
If you fail to do, you'll be greeted with the following error in console log:
XMLHttpRequest cannot load http://localhost/searchwithjson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Or as others suggest enable CROS (Cross-origin resource sharing) to be able to load JSON from different locations.
I wanted to create a gantt chart using fusion charts. The chart doesn't get rendered a element is created, with Chart type not supported as text. Using the fusion chart debugger I get an Error that p.init is not a function in fusioncharts.js
This is the code for the gantt chart.
enter code here
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Weekly Project Status Reports</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.gantt.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
FusionCharts['debugger'].outputTo(function (id, sender,
eventName, eventArgs) {
console.log(id + ': '+eventName + ' from ' + sender+','+eventArgs);
});
FusionCharts['debugger'].outputFormat('verbose');
FusionCharts['debugger'].enable(true);
</script>
<script type="text/javascript">
FusionCharts.ready(function(){
var weeklyStatusChart = new FusionCharts({
"type": "gantt",
"renderAt": "chartContainer",
"width": "1000",
"height": "500",
"dataFormat": "json",
"dataSource": {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Project Gantt",
"subcaption": "From 1st Feb 2007 - 31st Aug 2007"
},
"categories": [
{
"category": [
{
"start": "02/01/2007",
"end": "03/01/2007",
"label": "Feb"
},
{
"start": "03/01/2007",
"end": "04/01/2007",
"label": "Mar"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 50 Customers"
}
]
},
"tasks": {
"task": [
{
"start": "02/04/2007",
"end": "02/10/2007"
},
{
"start": "02/08/2007",
"end": "02/19/2007"
}
]
}
}
})
weeklyStatusChart.render();
});
</script>
</head>
<body>
<div id="chartContainer">--- Weekly Project Status</div>
</body>
</html>
The explicit loading of "fusioncharts.gantt.js" is not required, it will be automatically loaded by "fusioncharts.widgets.js".
If explicit loading is required, try loading "fusioncharts.widgets.js" followed by "fusioncharts.gantt.js"
I want to load JSON data into HTML file.
Problem is, it does not load json data and when I add error event then it gives me error alert for error object. Please guide me how I could resolve this issue. even, I could not find any specific alert to identiy the error. how to resolve this ? Is there any way to get actual error while working with jquery/ajax ?
Below is my html file which has jquery call to json data with html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn382").click(function () {
/* set no cache */
$.ajaxSetup({ cache: false });
$.getJSON("car-sale.json", function (data) {
var html = [];
alert('result');
});
});
});
</script>
</head>
<body>
<input type="submit" id="btn382" />
</body>
</html>
JSON file is as follow:
[{
"Manufacturer": "Toyota",
"Sold": 1200,
"Month": "2012-11"
}, {
"Manufacturer": "Ford",
"Sold": 1100,
"Month": "2012-11"
}, {
"Manufacturer": "BMW",
"Sold": 900,
"Month": "2012-11"
}, {
"Manufacturer": "Benz",
"Sold": 600,
"Month": "2012-11"
}, {
"Manufacturer": "GMC",
"Sold": 500,
"Month": "2012-11"
}, {
"Manufacturer": "HUMMER",
"Sold": 120,
"Month": "2012-11"
}]
in the page header you should define this
<script src="car-sale.json"></script>
i check this with a firefox and its working fine check this with firefox
$.getJSON('car-sale.json', function (data) {
$.each( data, function( key, val ) {
console.log(val.Manufacturer );
});
});