I try to place the value of my sensor in a HTML script (see interface).
I found a example on internet. I would like to have only the blocks with the name Temp en Hum (in running mode are the values visible in the block). But when I delete the graphs, I lost the actual value also.
How can I delete the graphs and hold the actual values in the blocks (temp and Hum)?
Interface
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask App </title>
<!-- Bootstraps Java Scipts Links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- JQuery links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--High CHART LIVE -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!--Gauge -->
<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor1"> Sensor : </h1>
</div>
<br>
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor2">Sensor :</h1>
</div>
<br>
</div>
</div>
<style>
<!--
.jumbotron{
widows: 150px;
height: 220px;
justify-content: center;
}
.row{
justify-content: center;
}
-->
</style>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-temperature">
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-humidity">
</div>
</div>
</div>
<script>
var chartTemperatue;
var chartHumidity;
function requestData()
{
// Ajax call to get the Data from Flask
var requests = $.get('/data');
var tm = requests.done(function (result)
{
// Temperature
var seriesTemperature = chartTemperatue.series[0],
shiftTemperature = seriesTemperature.data.length > 20;
// Humidity
var seriesHumidity = chartHumidity.series[0],
shiftHumidity = seriesTemperature.data.length > 20;
// Add the Point
// Time Temperature\
var data1 = [];
data1.push(result[0]);
data1.push(result[1]);
// Add the Point
// Time Humidity
var data2 = [];
data2.push(result[0]);
data2.push(result[2]);
chartTemperatue.series[0].addPoint(data1, true, shiftTemperature);
chartHumidity.series[0].addPoint(data2, true, shiftHumidity);
$(".sensor1").text("");
$(".sensor1").text("Temperature : " + Math.round(data1[1]) );
$(".sensor2").text("");
$(".sensor2").text("Humidity : " + Math.round(data2[1]) );
// call it again after one second
setTimeout(requestData, 2000);
});
}
$(document).ready(function()
{
// --------------Chart 1 ----------------------------
chartTemperatue = new Highcharts.Chart({
chart:
{
renderTo: 'data-temperature',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
color : '#c23d23',
lineColor: '#303030',
name: 'Temperature',
data: []
}]
});
// --------------Chart 1 Ends - -----------------
chartHumidity = new Highcharts.Chart({
chart:
{
renderTo: 'data-humidity',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Humidity'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
lineColor: '#1d82b8',
name: 'Humidity',
data: []
}]
});
});
</script>
</body>
</html>
Python code
from flask import Flask,render_template,url_for,request,redirect, make_response
import random
import json
from time import time
from random import random
from flask import Flask, render_template, make_response
app = Flask(__name__)
#app.route('/', methods=["GET", "POST"])
def main():
return render_template('index.html')
#app.route('/data', methods=["GET", "POST"])
def data():
# Data Format
# [TIME, Temperature, Humidity]
Temperature = random() * 100
Humidity = random() * 55
data = [time() * 1000, Temperature, Humidity]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
if __name__ == "__main__":
app.run(debug=True)
Related
I am trying to make plotly JS Choropleth map dynamic based on selected year.
so far i have the following function to populate the drop down, and use the value of the drop down to put into a function to create a different visualization, therefore rendering it dynamic
function initannumdropdown() {
// Use D3 to select the dropdown menu
var dropdownMenu = d3.select("#select-year");
var annum = ["2011","2012","2013","2014","2015","2016","2017","2018","2019"];
dropdownMenu.html("");
//populate drop down menu
annum.forEach((name) => {
dropdownMenu
.append('option')
.text(name) // text showed in the menu
.property("value", name);
// console.log(name);
});
//get the graph to display the first participant's data when the page initially loads
// var uponLoadingpage = annum[0];
// console.log(uponLoadingpage);
// createBarcharts(uponLoadingpage);
chartEarth(annum[0]);
}
initannumdropdown();
function chartEarth(yearof) {
d3.json("https://world-internet-access.herokuapp.com/api/dashboard", function(err, rows) {
console.log(rows);
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var yearstr = `Internet_Use_Perc_${yearof}` ;
console.log(yearstr)
var data = [{
type: 'choropleth',
locationmode: 'country codes',
locations: unpack(rows, 'Abbr'),
z: unpack(rows, yearstr),
text: unpack(rows, 'Country'),
autocolorscale: false,
reversescale: true,
marker: {
line: {
color: 'rgb(0,191,255)',
width: 0.5
}
},
tick0: 0,
zmin: 0,
dtick: 1000,
colorbar: {
autotic: false,
tickprefix: '%',
title: '% Population of the Country Using Internet'
}
}];
var layout = {
title: '2019 World Internet Use',
geo: {
projection: {
type: 'orthographic'
}
}
};
Plotly.newPlot("myDiv", data, layout, {showLink: false});
});
};
//handle selected option
function optionChanged(newVariable) {
console.log(newVariable);
chartEarth(newVariable);
}
and in my index.html i have the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bellybutton Biodiversity</title>
<link rel="stylesheet" href="anime.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>
<body>
<div id='myDiv'></div>
<script src="app.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron text-center">
<h1 class="ml2">World Internet Access</h1>
<p>Use this interactive dashboard to explore the dataset</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="well">
<h5>Select Year</h5>
<select id="select-year" onchange="optionChanged(this.value)"></select>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Demographic Info</h3>
</div>
<div id="sample-metadata" class="panel-body"></div>
</div>
</div>
<div class="col-md-5">
<div id="bar"></div>
</div>
<div class="col-md-5">
<div id="gauge"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="bubble">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="app.js"></script>
<script src="anime.js"></script>
</body>
</html>
any help is appreciated thanks
I am trying to display some charts in my admin view( by extending admin/base.html) and I want to use a template instead of libraries such as charts.Js to display them. I want my view to be like the following (https://colorlib.com/polygon/cooladmin/index.html). Github repo here (https://github.com/puikinsh/CoolAdmin). However, in my case no charts are being displayed.
I have integrated all files and folders( containing static files) and set all dependencies correctly andhe main.js(contains code for charts) are also working.
Extract from main.html(includes links)
<div id="content-main" class="main-content container-fluid">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">overview</h2>
<button class="au-btn au-btn-icon au-btn--blue">
<i class="zmdi zmdi-plus"></i>add item</button>
</div>
</div>
</div>
<div class="row m-t-25">
<div class="col-sm-6 col-lg-3">
<div class="overview-item overview-item--c1">
<div class="overview__inner">
<div class="overview-box clearfix">
<div class="icon">
<i class="zmdi zmdi-account-o"></i>
</div>
<div class="text">
<h2>10368</h2>
<span>members online</span>
</div>
</div>
<div class="overview-chart">
<canvas id="widgetChart1"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<script src={% static 'hfs_admin/vendor/jquery-3.2.1.min.js' %}""></script>
<!-- Bootstrap JS-->
<script src={% static 'hfs_admin/vendor/bootstrap-4.1/popper.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/bootstrap-4.1/bootstrap.min.js' %}""></script>
<!-- Vendor JS -->
<script src={% static 'hfs_admin/vendor/slick/slick.min.js' %}"">
</script>
<script src={% static 'hfs_admin/vendor/wow/wow.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/animsition/animsition.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/bootstrap-progressbar/bootstrap-progressbar.min.js' %}"">
</script>
<script src={% static 'hfs_admin/vendor/counter-up/jquery.waypoints.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/counter-up/jquery.counterup.min.js' %}"">
</script>
<script src={% static 'hfs_admin/vendor/circle-progress/circle-progress.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/perfect-scrollbar/perfect-scrollbar.js' %}""></script>
<script src={% static 'hfs_admin/vendor/chartjs/Chart.bundle.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/select2/select2.min.js' %}"">
</script>
<!-- Main JS-->
<script src={% static 'hfs_admin/js_template/main.js' %}></script>
Extract from main.js
(function ($) {
// USE STRICT
"use strict";
try {
//WidgetChart 1
var ctx = document.getElementById("widgetChart1");
if (ctx) {
ctx.height = 130;
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
type: 'line',
datasets: [{
data: [78, 81, 80, 45, 34, 12, 40],
label: 'Dataset',
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
},]
},
options: {
maintainAspectRatio: true,
legend: {
display: false
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent'
}
}],
yAxes: [{
display: false,
ticks: {
display: false,
}
}]
},
title: {
display: false,
},
elements: {
line: {
borderWidth: 0
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
});
}
})(jQuery);
Expected ouput should be like the following (https://colorlib.com/polygon/cooladmin/index.html). However mine gets rendered without any charts. I beleive something is preventing the JS from applying the chart onto the html page.
Any helps will be appreciated. Also Do let me know if the question need updating.
Thanks.
Solution: it uses chart.js.
https://www.chartjs.org/
You will have to have a js file with datapoints.
Try opening the chrome developer console and inspect the js.
component
import {Component} from '#angular/core';
#Component({
selector: 'cad',
templateUrl: './cad.html'
})
export class cadcomponent {
}
cad.html
<div class="row">
<div class="col-md-12">
<div class="thumbnail alert-info alert alert-dismissible fade in">
<p class="lead text-center"> Our Dynamic KPI</p>
</div>
</div>
</div>
<script src="scripts/cad.js"></script>
<div id="container1" class="chart"></div>
cad.js
$.get('scripts/dataCAD.csv', function(csv) {
$('#container1').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'CAD'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
and my index.html
<html>
<head>
<link rel="icon" href="Resources/favicon.ico">
<base href="/">
<title>IT Status</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="center.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/highcharts.js"></script>
<script src="scripts/highchartsdatamodule.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>System.import('app').catch(function(err){ console.error(err); });</script>
<script src="scripts/cad.js" type="text/javascript"></script>
<script src="scripts/market.js" type="text/javascript"></script>
<script src="scripts/system.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="bootstrap-3.3.6-dist/js/vendor/jquery.min.js"><\/script>')</script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/speed.js"></script>
<script src="scripts/nickcodestatus.js"></script>
<script src="scripts/nickworkingon.js"></script>
<script src="scripts/seamuscodestatus.js"></script>
<script src="scripts/seamusworkingon.js"></script>
<script src="scripts/mikecodestatus.js"></script>
<script src="scripts/mikeworkingon.js"></script>
<script src="scripts/justincodestatus.js"></script>
<script src="scripts/justinworkingon.js"></script>
<script src="scripts/tonycodestatus.js"></script>
<script src="scripts/tonyworkingon.js"></script>
<script src="scripts/kevincodestatus.js"></script>
<script src="scripts/kevinworkingon.js"></script>
<script data-main="scripts/main.js" src="scripts/require.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
so i have googled the error and i am taken to this page http://www.highcharts.com/errors/16
I am just confused as to what i am doing wrong I do not see two calls to the high charts module. I have changed the container names to not all be the same as i saw in this post on stack overflow Highcharts Error #16: charts not showing on the same page . If anyone could help me i would be very appreciative. I am almost done with the website this is my last problem that inst loading.
updated component
import {Component} from '#angular/core';
#Component({
selector: 'cad',
template: `
<div class="row">
<div class="col-md-12">
<div class="thumbnail alert-info alert alert-dismissible fade in">
<p class="lead text-center"> Our Dynamic KPI</p>
</div>
</div>
</div>
<pre id="csv" style="display:none">Month,Current,Previous
JAN,100,100
FEB,100,100
MAR,100,100
APR,100,100
MAY,100,100
JUN,100,100
JUL,100,100
AUG,100,100
SEPT,100,100
OCT,100,100
NOV,,100
DEC,,100</pre>
<chart [options]="options"></chart>
`
})
export class cadcomponent {
constructor() {
this.options = {
chart: {
type: 'column',
},
title: {
text: 'CAD'
},
subtitle: {
text: 'Uptime % for CAD'
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC']
},
series: [{
name: "Current",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
},
{
name: "Previous",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
}]
};
}
options: Object;
}
i have a php running a sql server query, the results from the query are shown on a table in my html page, but i need to make some filters on the query comming from the client side, as example, the date and a category, but i haven´t realized how to do it and it gives to me this error (at this moment I only tried to put the data from the combobox on the query, because I give up with the date).
Maybe I could call a default value for the query when the html is loaded (for example, x category and date = yesterday... but even when i input the info by hand the query doesn´t work.
The date output format of que database is "YYYY-DD-MM HH:MM:SS"
This is my php:
<?php
function getArraySQL(){
$dsn = "prueba";
$connect = odbc_connect( $dsn, '', '' );
$field_value = $_POST["call"];
$query = "SELECT hist_eqmtlist.unit,
hist_statusevents.eqmt,
hist_exproot.shiftdate,
round (sum(case when hist_statusevents.category =1 then (hist_statusevents.duration/3600) else 0 end),2) as 'uno',
round (sum(case when hist_statusevents.category =2 then (hist_statusevents.duration/3600) else 0 end),2) as 'dos',
round (sum(case when hist_statusevents.category =3 then (hist_statusevents.duration/3600) else 0 end),2) as 'tres',
round (sum(case when hist_statusevents.category =4 then (hist_statusevents.duration/3600) else 0 end),2) as 'cuatro',
round (sum(case when hist_statusevents.category =5 then (hist_statusevents.duration/3600) else 0 end),2) as 'cinco',
round (sum(case when hist_statusevents.category =6 then (hist_statusevents.duration/3600) else 0 end),2) as 'seis'
FROM hist_eqmtlist,hist_exproot,hist_statusevents
WHERE hist_exproot.shiftindex = hist_statusevents.shiftindex And hist_statusevents.shiftindex = hist_eqmtlist.shiftindex And hist_statusevents.eqmt = hist_eqmtlist.eqmtid And hist_eqmtlist.unit= '$field_value'
order by hist_exproot.shiftdate,hist_statusevents.eqmt";
if(!$rs = odbc_exec($connect, $query)) die();
$rawdata = array();
$i=0;
while($row = odbc_fetch_array($rs))
{
$rawdata[$i] = $row;
$i++;
}
odbc_close( $connect );
return $rawdata;
}
$myarray = getArraySQL();
echo json_encode($myarray);
On the other side, my html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Report Monitor</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src='js/jquery.js'></script>
<script src='js/bootstrap.js'></script>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="scripts/demos.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" name="gridequipment">
//call the js that bring the data
$(document).ready(function() {
var url = "report/eqmq.php";
// prepare the data
var source = {
datatype: "json",
datafields: [{
name: 'eqmt'
}, {
name: 'shiftdate'
}, {
name: 'uno'
}, {
name: 'dos'
}, {
name: 'tres'
}, {
name: 'cuatro'
}, {
name: 'cinco'
}, {
name: 'seis'
}],
id: 'id',
url: url,
root: 'data'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#datalist").jqxGrid({
width: '100%',
source: dataAdapter,
columnsresize: true,
columns: [{
text: 'Equipo',
dataField: 'eqmt',
width: '20%'
}, {
text: 'Fecha Turno',
dataField: 'shiftdate',
width: '25%'
}, {
text: 'uno',
dataField: 'uno',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'dos',
dataField: 'dos',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'tres',
dataField: 'tres',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'cuatro',
dataField: 'cuatro',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'cinco',
dataField: 'cinco',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'seis',
dataField: 'seis',
width: '9.16%',
cellsalign: 'left'
}]
});
});
</script>
</head>
<body>
<p>
<script>
// The scritp to input the data from combobox into the query on eqmq.php
$(document).ready(function() {
var value = $("#callcombo").val();
$.ajax({
url: "report/eqmq.php",
type: "POST",
data: {
"call": value
},
success: function(result) {
alert(result);
}
})
});
</script>/
<!-- / a combobox with the cagories,comming from another query from the same database -->
</p>
<section name="combobox">
<div id='combobox'>
<script type="text/javascript">
$(document).ready(function() {
var url = "report/eqmlistcat.php";
var source = {
datatype: "json",
datafields: [{
name: 'unit'
}],
url: url,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#callcombo").jqxComboBox({
selectedIndex: 0,
source: dataAdapter,
displayMember: "unit",
width: 200,
height: 25
});
$("#callcombo").on('select', function(event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $("<div></div>");
valueelement.text(item.value);
$("#selectionlog").children().remove();
$("#selectionlog").append(valueelement);
}
}
});
});
</script>
<div id='callcombo'>
</div>
</div>
</section>
<div id='Datepick'>
<script type="text/javascript">
// a date picker to input the data on the query too
$(document).ready(function() {
$("#Dateinput").jqxDateTimeInput({
width: '200px',
height: '25px'
});
$("#Dateinput").jqxDateTimeInput({
format: 'yyyy-mm-dd'
});
});
</script>
<p>
<div id='Dateinput'></div>
</p>
<p></p>
<section name="Equipment List">
<h3><div id="selectionlog"></div></h3>
<div id='WidgetTable' style="font-size: 13px; font-family: Verdana; float: center;" class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4">
<div id="datalist"></div>
</div>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
</section>
<p></p>
</body>
</html>
I'm using Kendo UI's bar chart for some data-visualizations.
I'm trying to set a max value for the y axis, does anyone know how I could implement this?
Currently, the values appear to be generated based on the value in my graph, but my data needs to have a max and min value of 15.
Here is what is being generated.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<style>
#dd {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
</style>
<div id="example">
<div class="demo-section k-content">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "What should I call this graph"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "XX",
data: [13.907]
}, {
name: "XX",
data: [-4.743]
}, {
name: "XX",
data: [-7.210]
},{
name: "XX",
data: [9.988]
}],
valueAxis: {
labels: {
format: "#.#"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [2013],
line: {
visible: false
},
labels: {
padding: {top: 165}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
Just add the "max: 15, min:-15" to your valueAxis. here is your example with the limits
http://trykendoui.telerik.com/EgOs
And to answer my own question...
I added modified the following code:
valueAxis: {
min: -15, // added this line
max: 15, // added this line
labels: {
format: "#.#"
},
line: {
visible: false
},
axisCrossingValue: 0
},
valueAxis: {
max: MaxValue,
}
//MaxValue is variable which contain your maximum value