i have javascript function i need to show data in page(body).i need to show value in chart as well as in the header text. how to show PHvalue in the body part in separate div. shared my code in fiddle
https://jsfiddle.net/sahxyx0n/
#section scripts{
<script>
FusionCharts.ready(function () {
LoadChart();
});
function LoadChart() {
$.ajax({
url: '#Url.Action("get", "pond")',//remote api address
type: 'GET',
crossDomain: true,
success: function (data) {
if (data.success) {
var PHValue = data.sensorsdata.PH;
var phfusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'ph-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "PH Value ",
"lowerLimit": "0",
"upperLimit": "14",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "5",
"code": "#e44a00"
}, {
"minValue": "5",
"maxValue": "10",
"code": "#f8bd19"
}, {
"minValue": "10",
"maxValue": "14",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": PHValue
}]
}
}
});
}
}
});
}
</script>
}
In your function
.......
if (data.success) {
var PHValue = data.sensorsdata.PH;
$('#phValue').text(PHValue);
.....
.....
in your html page add this, where you want to display PHValue,
<div id="phValue"></div>
Is this all you want?
function doInit(){
//alert("Inside doInit() method");
let time = new Date();
let timePlaceHolder = document.getElementById("timePlaceHolder");
timePlaceHolder.innerHTML = "Current Time is: "+time;
}
window.addEventListener("load",doInit,false);
<!DOCTYPE html>
<html>
<head>
<title>Display JS Time</title>
<script type="text/javascript" src="only_one_time.js"></script>
</head>
<body>
<div id="timePlaceHolder"></div>
</body>
</html>
Related
I know this was already asked but I still cannot sort it out.
Due to app architecture, I have a datatable inside a modal.
This datatable is initialized once at page load (with no data), put inside the modal in the DOM, which is hidden, with no width and height.
Every time the modal is opened, the underlying data are reloaded with
$('#datatable').DataTable().ajax.reload()
The problem is that, when opening the modal, the columns layout is not right. The columns are thin and they don't take all the space of the modal.
I read that I should call
$('#datatable').DataTable().columns.adjust();
$('#datatable').DataTable().responsive.recalc();
to re-adjust columns width, but nothing happens.
index.html
<link href="/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="/datatables.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<button id="button">Open</button>
<div id="modal-bom" class="modal">
<div class="modal-content">
<table class="striped" id="table">
<thead>
<tr>
<th>Position</th>
<th>Code</th>
<th>Description</th>
<th>Quantiy</th>
</tr>
</thead>
</table>
</div>
</div>
<script src="/jquery-3.4.1.min.js"></script>
<script src="/materialize.min.js"></script>
<script src="/datatables.min.js"></script>
<script src="/mainApp.js"></script>
</body>
</html>
mainApp.js
var initialized = false;
$(document).ready(() => {
$('#button').click(() => {
$('#modal-bom').modal({
onOpenEnd: () => {
$('#table').DataTable().ajax.reload(() => {
$('#table').DataTable().columns.adjust();
$('#table').DataTable().responsive.recalc();
});
},
});
$('#modal-bom').modal('open');
});
$('#table').DataTable({
ajax: (dataToSend, callback) => {
loadData().then((dataReceived) => {
callback(dataReceived);
});
},
columns: [
{ data: 'position' },
{ data: 'code' },
{ data: 'description' },
{ data: 'qty' }
],
initComplete: () => initialized = true
});
});
function loadData() {
return new Promise((resolve) => {
if (!initialized) {
resolve({ data: {} });
}
else {
$.ajax({
url: 'http://127.0.0.1:5500/data.txt',
method: "GET",
dataType: 'json',
success: json => resolve({ data: json.data })
});
}
});
}
data.txt
{"data": [
{
"level": 0,
"position": "1",
"code": "ART001",
"description": "Article one description",
"qty": "1"
},
{
"level": 1,
"position": "1.1",
"code": "ART002",
"description": "Article two description",
"qty": "10"
},
{
"level": 1,
"position": "1.2",
"code": "ART003",
"description": "Article three description",
"qty": "1"
},
{
"level": 2,
"position": "1.2.1",
"code": "ART004",
"description": "Article four description",
"qty": "2"
},
{
"level": 2,
"position": "1.2.2",
"code": "ART005",
"description": "Article five description",
"qty": "15"
},
{
"level": 3,
"position": "1.2.2.1",
"code": "ART006",
"description": "Article six description",
"qty": "5"
},
{
"level": 2,
"position": "1.2.3",
"code": "ART007",
"description": "Article seven description",
"qty": "4"
},
{
"level": 1,
"position": "1.3",
"code": "ART008",
"description": "Article eight description",
"qty": "1"
}
]}
What else should I try?
Thank you for any help
Inside your onOpenEnd option, instead of
$('#table').DataTable().columns.adjust();
Try
$('#table1').DataTable().columns.adjust().draw();
This was what allowed my tables to redraw its columns whenever the modal is opened.
This code below will detect Bootstrap modal and adjust the table.
$('#modal-id').on('shown.bs.modal', function () {
var table = $('#table-id').DataTable();
table.columns.adjust();
//// if the above code is not working set width:100% to a table
$('.dataTables_scrollHeadInner, .dataTable').css({'width':'100%'})
});
I have a map processed with VueJS and I have problems with events connectorClick.
In the example below when clicking on the connector line the alert does not work.
Vue.use(VueFusionCharts, FusionCharts);
let grphMap = new Vue ({
el: '#app-vue',
data: {
type: "maps/romania",
width: "800",
height: "600",
dataFormat: "json",
dataSource: {
'chart': {
"theme": "fusion",
"nullEntityColor": "#E5E5E9",
"entityFillHoverColor": "#99ccff",
"showLabels": '1',
"showEntityHoverEffect": "1",
"showtooltip": "1",
"connectorColor": "#0CB2B0",
"connectorHoverColor": "#000000",
"connectorthickness": "3",
"markerfontsize": "18",
"markerfontcolor": "#0a0a0a",
"numbersuffix": "%",
"entityFillColor": "#ff0000",
"markerBgColor": "#FF0000",
"markerRadius": "12",
},
"colorrange": {
"gradient": "0",
},
"data": [
{
id: '10',
color: "#74CCEB",
}
],
"markers": {
"shapes": [
{
"id": "myCustomShape",
"type": "circle",
"fillcolor": "#f8bd19",
"showborder": "0"
}
],
"items": [
{
shapeid: "myCustomShape",
id: "10",
x: "295.5",
y: "283.5",
},
{
shapeid: "myCustomShape",
id: "11",
x: "323.9",
y: "226.6",
}
],
"connectors": [
{
"from": "10",
"to": "11",
"showtooltip": "1",
"color": "#F4191F",
"tooltext": "<b>Shipping Details:</b>{br}Daily shipment: $label Units{br}Average shipping cost: $1.2"
}
]
}
},
events: {
"connectorClick": function() {
alert("Test alert!");
}
}
}
});
<script type="text/javascript" src="https://unpkg.com/vue#2.3.3"></script>
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.romania.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app-vue">
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
></fusioncharts>
</div>
https://jsfiddle.net/Hexman/5e61pu3r/25
I found a functional example but it is not in VueJs
http://jsfiddle.net/fusioncharts/t226vxnp/
Do not give me the saddle where my mistake is?
Seems like you forgot to bind the events object in your fusioncharts template which you've defined in the data of your component. Please refer to the following code for your template:
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
:events="events" // Bind your events object
></fusioncharts>
if the value comes 9 or greater than 9 it should show good , if value between 6 - 9 bad and below 6 poor . how to change the header inner text dynamically according to the variable value- "turbidity". sample data - 9.00
<script>
FusionCharts.ready(function () {
LoadChart();
});
function LoadChart() {
$.ajax({
url: 'https://url', // local address
type: 'GET',
crossDomain: true,
success: function (data) {
console.log('xhr success')
//if (data.success) {
console.log("success");
var turbidity = data;
if (turbidity >= 9.0) {
$('#headerValue').text("Good");
}
if (turbidity < 9.0 && turbidity > 6.0) {
$('#headerValue').text("Normal");
}
if (turbidity < 6.0) {
$('#headerValue').text("Poor");
}
var phfusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'ph-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Turbidity",
"lowerLimit": "0",
"upperLimit": "12",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "4",
"code": "#6baa01"
}, {
"minValue": "4",
"maxValue": "8",
"code": "#f8bd19"
}, {
"minValue": "8",
"maxValue": "12",
"code": "#e44a00"
}]
},
"dials": {
"dial": [{
"value": turbidity
}]
}
}
});
phfusioncharts.render();
//}
}
});
}
</script>
<td><h3 align="center">Water Quality : Good</h3> </td>
Write the html as this by giving id to status
<td><h3 align="center">Water Quality : <span id="status">Good</span></h3> </td>
Now when you'll get the result just use js to change the text
//Suppose you got data in var named data
if(data >=9 )
{
document.getElementById("status").innerText="Good"
}
else if(data >=6 && data <9 )
{
document.getElementById("status").innerText="Bad"
}
else
{
document.getElementById("status").innerText="Poor"
}
I want to add a for loop to my FusionChart script, so i can enter values through the loop. but so far i could not do it. please help. this is the code. what can i do to make this loop work?
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column3d',
renderAt: 'chartContainer',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
},
"data": [
//for (var i = 0; i < ist.length; i++) {// this is where i want to add the loop
{
"label": ist[0].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[0].MyProperty_Test_Chargers)
},
{
"label": ist[1].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[1].MyProperty_Test_Chargers)
},
{
"label": ist[2].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[2].MyProperty_Test_Chargers)
}
//}
]
}
});
revenueChart.render();
});
OK, so the data attribute needs to be an array. You can achieve this with a for loop if it is inside of a so-called IIFE and having the IFFE return an array (note that you would put the following inside the chart configuration):
"data": (function() {
var data = [];
for (var i = 0; i < ist.length; i++) {
data.push({
"label": ist[i].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[i].MyProperty_Test_Chargers)
})
}
return data;
})()
Better yet, create the array you need using the for loop above var revenueChart = new FusionCharts({...:
var chartData = [];
for (var i = 0; i < ist.length; i++) {
chartData.push({
"label": ist[i].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[i].MyProperty_Test_Chargers)
})
}
var revenueChart = new FusionCharts({
...
data: chartData
...
FusionCharts.ready(function () {
var data = [];
//alert(x.length);
for (var i = 0; i < x.length; i++) {
data.push({
"label": x[i].HR_BG,
"value": x[i].b
})
}
var ageGroupChart = new FusionCharts({
type: 'pie3d',
renderAt: 'chart-pie',
width: '600',
height: '500',
dataFormat: 'json',
dataSource:
{
"chart": {
"caption": "YTR Production Hours",
"subCaption": "",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "0",
"showPercentValues": "0",
"showPercentInTooltip": "0",
"decimals": "",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"showHoverEffect":"1",
"showLegend": "1",
"legendBgColor": "#ffffff",
"legendBorderAlpha": '0',
"legendShadow": '0',
"legendItemFontSize": '10',
"legendItemFontColor": '#666666'
},
"data": data
}
}).render();
});
I'm not why my Google chart is not rendering and instead, it display
I also notice I got this error message on my console.
Uncaught TypeError: Cannot read property 'danger' of undefined
Then, I checked my JSON file, danger is there. which danger is it referring to ?
JS
'use strict';
define(['jquery'], function($) {
$(function() {
var danger = $('#pc-danger');
var warning = $('#pc-warning');
var success = $('#pc-success');
var danger_list = $('#pc-danger-list');
var warning_list = $('#pc-warning-list');
var success_list = $('#pc-success-list');
var basePath = "/BIM/resources/js/reports/student/section-exercise/";
$.ajax({
url: basePath + "data.json",
type: "GET",
dataType : "json",
success: function( objects ) {
function updateInfo(x) {
danger.html(objects[x].danger);
warning.html(objects[x].warning);
success.html(objects[x].success);
danger_list.html(objects[x].danger_list);
warning_list.html(objects[x].warning_list);
success_list.html(objects[x].success_list);
}
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart());
function drawChart() {
var options = {
width: 160,
height: 160,
chartArea: {
left: 10,
top: 20,
width: "100%",
height: "100%"
},
colors: ['#F46E4E', '#F9C262' , '#ADB55E',],
legend: 'none',
enableInteractivity: false,
pieSliceText: 'none',
};
var data = {};
var chart = {};
for (var object in objects) {
var total = objects[object].danger + objects[object].warning + objects[object].success ;
data[object] = google.visualization.arrayToDataTable([
['Piechart' , 'Number of Skills'],
['danger' , ( objects[object].danger/total ) * 100 ],
['warning' , ( objects[object].warning/total ) * 100 ],
['success' , ( objects[object].success/total ) * 100 ],
]);
object = object.toLowerCase();
// piechart object
var $el = $('#sa-piechart-' + object );
// button
var button = $('.sa-report-btn-'+ object );
// append
var $el = $('#sa-piechart-' + object ).length ? $('#sa-piechart-' + object ) : $('<div id="sa-piechart-' + object +'"></div>').appendTo($('#sa-piechart-'+ object ));
chart[object] = new google.visualization.PieChart($el[0]);
chart[object].draw(data[object]);
// attach click handler to the button
button.click(function() {
updateInfo(object);
chart[object].draw(data[object]);
});
}
}
},
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},
});
});
});
JSON
{
"A": {
"report_type": "chapter test",
"section_num": "2",
"assignment": "algebra 1",
"date": "2/10/2015",
"correct_num": "15",
"avg_score": "89",
"danger": "5",
"danger_list": "5,10,15,19,23",
"warning": "8",
"warning_list": "3,7,11,13,14,16,21,22",
"success": "12",
"success_list": "1,2,4,6,8,9,12,17,18,20,24,25"
},
"B": {
"report_type": "section exercise",
"section_num": "2.2",
"assignment": "algebra 1",
"date": "2/09/2015",
"correct_num": "11",
"avg_score": "44",
"danger": "12",
"danger_list": "11,12,13,14,15,16,17,18,19,20,3,4",
"warning": "2",
"warning_list": "1,2",
"success": "11",
"success_list": "21,21,23,24,25,5,6,7,8,9,10"
},
"C": {
"report_type": "test",
"section_num": "1",
"assignment": "algebra 1",
"date": "1/10/2015",
"correct_num": "15",
"avg_score": "75",
"danger": "0",
"danger_list": "",
"warning": "10",
"warning_list": "1,2,3,4,5,6,7,8,9,10",
"success": "15",
"success_list": "11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
},
"D": {
"report_type": "practice test",
"section_num": "1",
"assignment": "algebra 1",
"date": "1/09/2015",
"correct_num": "15",
"avg_score": "79",
"danger": "5",
"danger_list": "1,2,3,4,5",
"warning": "0",
"warning_list": "",
"success": "20",
"success_list": "6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
}
}
Any help / hints / suggestions will mean a lot to me.
Thank-you !
You are pushing DataTable to data[object] which are A,B,C.. and after that you conver it to lowerCase by this line:-
object = object.toLowerCase();
so after that when you get that object it return null in this line:-
chart[object].draw(data[object]);
so you just need to remove this line:-
object = object.toLowerCase();
here is demo( i just use one div for demo purpose)
Demo
hope this will help you.