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?
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.
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>
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.
I am trying to plot historical flot chart between two custom date range, user will select date range and based on selection I will retrieve data from my database and going to plot flot chart. Retrieving data from database based on selection is completed but plotting that data in flot chart is not resulting result. Below is my code I am trying to plot
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), [data], {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), data, {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="height:300px;"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>