Post edited with more infos. I have a .asp page that gives me 3 variables. I have no problem working with them. I tried to add a donut chart to show the result using AMCHART charts code. I added the code into my .asp page. The problem is how to add those variables inside the JS code. When I type the variable values directly in the code, the charts are displayed correclty. But I need to add the variable because each customer has its own values...
Code:
<!DOCTYPE html>
<html>
<head>
<title>pie-chart test | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts custom font -->
<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
VAR TOTAL_IPCA;
<!-- HERE IS THE PROBLEM !!! -->
DATA1 = [
{
"TITULOS": "INFLAÇÃO",
"VALORES": <% = Result_1%>
},
{
"TITULOS": "PRÉ-FIXADO",
"VALORES": <% = Result_2%>
},
{
"TITULOS": "SELIC",
"VALORES": <% = Result_3%>
}
]
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 10,
"gradientType": "linear",
"innerRadius": 20,
"baseColor": "#FF8000",
"outlineThickness": 2,
"startEffect": "easeOutSine",
"titleField": "TITULOS",
"valueField": "VALORES",
"fontFamily": "ARIAL",
"fontSize": 15,
"handDrawScatter": 1,
"handDrawThickness": 2,
"theme": "chalk",
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": DATA1
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 300; background-color: #282828;" ></div>
</body>
</html>
Related
I'm a Java developer,I want to set value:symbol dynamically,but div("tradingview-widget-container__widget") always not work,can you help me?
<html>
<head>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
</head>
<body>
<input type="hidden" value="COINBASE:BTCUSD" id="symbol"/>
<script type="text/javascript">
var symbol = document.getElementById("symbol").value;
</script>
<div class="tradingview-widget-container" style="background-color:#2A2D38">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://www.tradingview.com/" rel="noopener"
target="_blank"><span class="blue-text">Data</span></a> by TradingView
</div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async="">
console.log("wdiget:"+symbol);
{
"symbol"
:
symbol,
"width"
:
"100%",
"colorTheme"
:
"dark",
"isTransparent"
:
false,
"locale"
:
"en"
}
</script>
<!-- </div> -->
<!-- <div class="tradingview-widget-container" style="background-color:#2A2D38"> -->
<div id="tradingview_b59ae" style="background-color:#2A2D38"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
console.log("chart:"+symbol);
new TradingView.widget(
{
"autosize": true,
"symbol": symbol,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "3",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"save_image": false,
"container_id": "tradingview_b59ae"
}
);
</script>
</div>
<!-- TradingView Widget END -->
</body>
</html>
when I run it in chrome,console does not log console.log(symbol);,but div("tradingview_b59ae") get the symbol value.So how to deal with this problem with async div?
I use SpringBoot thymeleaf(Java) to modify "<input type="hidden" value="COINBASE:BTCUSD" id="symbol"/>"'s value,when client need this page,Java will set the value and post page to client,but "console.log("wdiget:"+symbol);"not work,"console.log("chart:"+symbol);" is work.
The following code is supposed to create a new bar chart but I'm getting an "Uncaught TypeError: Cannot set property 'data' of undefined" which points to the first line (var chart = new Chart etc)
var chart = new Chart(document.getElementById("chart1"), {
type: 'bar',
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [{
label: "Num incidents",
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [89,57,25,28]
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
I have a html file with the following:
<head>
<meta charset="utf-8"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
</head>
<div class="column">
<canvas id="chart1"></canvas>
</div>
Do i need to include the chartjs api in the js file as well?
Or do i need to call the chart somewhere in my js file?
Works for me. It must be just the order.
Try this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" type="application/javascript"></script>
</head>
<body>
<div class="column">
<canvas id="chart1"></canvas>
</div>
<script type="application/javascript">
var chart = new Chart(document.getElementById("chart1"), {
type: 'bar',
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [{
label: "Num incidents",
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [89,57,25,28]
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
Or play here: https://jsfiddle.net/2d9kfegj/2/
Inside your html file:
<script src="myJavascript.js"> </script>
The problem is that you don't include your js file in your html. Make sure you include your js file at the end of your html like:
<head>
<meta charset="utf-8"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
</head>
<div class="column">
<canvas id="chart1"></canvas>
</div>
<script src="myJavascript.js"></script>
After that it will work just fine. You need to load your page first so your JS knows where to put the chart that is created.
In jquery you can use document.ready function but since you don't have a jquery tag i will avoid to mention to put a listener for page ready and suggest to just put it in the end for your ease.
I'm trying to create a chart and then change it to another with different data when I click a button but can't seem to get it to work. I'm using hardcoded data, here's my controller's function's code:
$scope.generateChart = function(chart){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
"type": "line",
"data": {
"labels": ['Name','Name','Name','Name','Name','Name','Name','Name','Name','Name'],
"datasets": [{
"label": 'Label1',
"data": [30,30,30,30,30,30,30,30,30,30],
"fill": true,
"borderColor": "rgb(0,0, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
};
And here's my template:
chart.html
<canvas id="myChart"></canvas>
<div id="buttons">
<button
ng-repeat="(key,result) in results[0]"
ng-hide="key === 'email' || key === 'country'"
ng-click="generateChart(key);">
{{key}}
</button>
</div>
results.html
<!DOCTYPE HTML>
<html>
<head></head>
<body ng-app="jellybeans">
<results></results>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- build:js -->
<script type="text/javascript" src="js/all.js"></script>
<!-- endbuild -->
</body>
</html>
Is there any way to do so?
I am trying to get this piechart working.
Here is my code to draw simple piechart
<html ng-app="chartApp">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<!-- angular -->
<script type="text/javascript" src="https://code.angularjs.org/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<!-- fusioncharts core -->
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>
<!-- angular plugin -->
<script type="text/javascript" src="js/angular-fusioncharts.min.js"></script>
<!-- zune theme -->
<script type="text/javascript" src="js/zune-theme.js"></script>
<script type="text/javascript">
var pieChart = angular.module("pieChart", ["ng-fusioncharts"]);
// controller for chart
pieChart.controller("chartController", function($scope) {
$scope.myDataSource = {
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 Total visit : $datavalue",
theme: "fint"
},
data: [
{
label: "Teenage",
value: "1250400"
},
{
label: "Adult",
value: "1463300"
},
{
label: "Mid-age",
value: "1050700"
},
{
label: "Senior",
value: "491000"
}
]
}});
</script>
</head>
<body>
<center>
<div ng-controller="chartController">
<fusioncharts
width="600"
height="400"
type="pie3d"
datasource="{{myDataSource}}"
></fusioncharts>
</div>
</center>
</body>
</html>
I get this error
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=chartApp&p1=Error%3…0zc%20(https%3A%2F%2Fcode.angularjs.org%2F1.4.1%2Fangular.min.js%3A20%3A30)
Your angular.module is set to "pieChart", but your ng-app directive is set to chartApp (this directive should be put on body instead of html also)... so Angular has no idea what to bootstrap. Try using angular.module("chartApp", ...) and putting ng-app directive on your 'body' tag.
We have plenty of server-side data grid controls, would like to replace them w/ generic clientside Angular. But data is always placed outside of the grid. To find out the cause, I followed the official demo/tutorial, combine .js and .css into local.html, still the same result.enter image description here
Visual Studio 2015 w/ Update, NuGet installed ui-grid(v3.2.9 - 2016-09-21). Must be something missing or the demo has problem.
Here is local.html:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/Scripts/ui-grid.js"></script>
<script src="/Content/ui-grid.css"></script>
<style>
.grid { width: 500px; height: 250px;}
</style>
<script>
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>
</html>
Stupid me, I was loading .css using tag.
So this line
<script src="/Content/ui-grid.css"></script>
should be this instead:
<link rel="stylesheet" type="text/css" href="/Content/ui-grid.css">
It's been working as expected.