I have the following piece of code of the main page of a JQuery Mobile application. It is basically a simple main page with a button that redirects to another page ('chart 1') which contains 2 tab bars in the footer: one for itself ('chart1') and the other for another page ('chart2'). I would like to add in the content section of these two pages some chart from the HighCharts library when these pages are loaded. I have tried several methods (live, bind etc..) but nothing seems to work. The only way to show the charts is with the ready method (see below). My question is: is there a method that displays the charts in the specific area of the page when a button is clicked?
Method to load the charts:
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containerYear',
type: 'column',
margin: [ 50, 50, 100, 80]
},...and so on
});
Main page code:
<div data-role="page" data-theme="b" id="main-page">
<div data-role="header" data-position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Data</li>
<li>Graphs</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>CTK</h4>
</div>
</div>
<div data-role="page" data-theme="b" id="chart1">
<div data-role="header" data-position="fixed">
Back
<h1>Car Crashes</h1>
</div>
<div data-role="content">
<div id="containerYear"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Chart 1</li>
<li><a href="#chart2" data-role="tab" >Chart 2</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" data-theme="b" id="chart2">
<div data-role="header" data-position="fixed">
Back
<h1>Car Crashes</h1>
</div>
<div data-role="content">
<div id="containerMonth"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Chart 1</li>
<li>Chart 2</li>
</ul>
</div>
</div>
</div>
jQuery Mobile is unique when used wihh other js drawing frameworks. They can only be used with a pageshow event.
One more thing, remember to initialize HighCharts after jQuery Mobile has been initialized.
Here's a working example: http://jsfiddle.net/Gajotres/Eg9Xz/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pageshow', '#index', function(){
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
Related
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)
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'm using Netbeans 8.0, Primefaces 4.0, Highcharts, Java, and XHTML.
Eventually, I will want to load data that is grabbed dynamically from a database and loaded onto a web app, but first, I need to figure out how to generate a chart using a for loop. The example I'm attempting to modify is the basic line chart example on Highcharts.
My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
Header
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
<p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum" url="http://forum.primefaces.org/" />
<p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
<script language="javascript" type="text/javascript">
// <![CDATA[
function() {
cityArray = #{tokyoBean.cityArr},
tempsArray = #{tokyoBean.cityArrArr},
monthsArray = #{tokyoBean.catArr},
series = []
,
len = cityArray.length;
for (var i = 0; i < len; i++)
{
series.push({
name: [cityArray[i]],
data: [tempsArray[i]]
});
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: - 20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: - 20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
}),
};
// ]]>
</script>
</html>
When I run the file and view the page source, the code looks like this:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>PrimeFaces</title><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=4.0" /><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/layout/layout.css?ln=primefaces&v=4.0" /><script type="text/javascript" src="/Demo/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/layout/layout.js?ln=primefaces&v=4.0"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script></head><body><script id="j_idt6_s" type="text/javascript">$(function(){PrimeFaces.cw('Layout','widget_j_idt6',{id:'j_idt6',full:true,north:{paneSelector:'#j_idt7',size:'100',resizable:true,closable:true,spacing_open:6,spacing_closed:25},south:{paneSelector:'#j_idt9',size:'100',resizable:false,closable:true,spacing_open:6,spacing_closed:25},west:{paneSelector:'#j_idt11',size:'175',resizable:false,closable:true,spacing_open:6,spacing_closed:25},center:{paneSelector:'#j_idt18',size:'auto',resizable:false,closable:false}},'layout');});</script><div id="j_idt7" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-north"><div class="ui-layout-unit-content ui-widget-content">
Header
</div></div><div id="j_idt9" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-south"><div class="ui-layout-unit-content ui-widget-content">
Footer
</div></div><div id="j_idt11" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Left</span><span class="ui-icon ui-icon-triangle-1-w"></span></div><div class="ui-layout-unit-content ui-widget-content"><div id="j_idt12" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix" role="menu"><div tabindex="0" class="ui-helper-hidden-accessible"></div><ul class="ui-menu-list ui-helper-reset"><li class="ui-widget-header ui-corner-all"><h3>Resources</h3></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/showcase-labs/ui/home.jsf"><span class="ui-menuitem-text">Demo</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/documentation.html"><span class="ui-menuitem-text">Documentation</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://forum.primefaces.org/"><span class="ui-menuitem-text">Forum</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/themes.html"><span class="ui-menuitem-text">Themes</span></a></li></ul></div><script id="j_idt12_s" type="text/javascript">$(function(){PrimeFaces.cw('PlainMenu','widget_j_idt12',{id:'j_idt12'});});</script></div></div><div id="j_idt18" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div></div></div><ul id="javax_faces_developmentstage_messages" title="Project Stage[Development]: Unhandled Messages"><li style="Color: orange"><span> The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form> </span></li><li style="Color: orange"><span> The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form> </span></li></ul></body>
<script language="javascript" type="text/javascript">
// <![CDATA[
function() {
cityArray = ['Tokyo', 'New York', 'Berlin', 'London'],
tempsArray = [[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 6.6]],
monthsArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
series = []
,
len = cityArray.length;
for (var i = 0; i < len; i++)
{
series.push({
name: [cityArray[i]],
data: [tempsArray[i]]
});
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: - 20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: - 20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
}),
};
// ]]>
</script>
</html>
And I can't post a ss of what my page looks like, but it is almost completely blank except
at the bottom it says:
" The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within
The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within "
in big, yellow letters.
Please explain what I'm doing wrong. I have another version of this page which does not employ the for loop, but instead calls data arrays from the backing bean for each city - that version works fine, but I won't be able to do that in final implementation since all data will have to be pulled dynamically.
Thanks in advance.
Update:
I've been working on this all afternoon and have made some real headway, but I'm still not quite there. The Netbeans editor won't allow for formatting the series.push() method the way I was trying to use it, and also, I had to declare and define variables on separate lines of code to get them to stick, so to speak. I removed my jquery script source (which got rid of the yellow warning messages), and my code now looks like this:
//html code redacted as it is working
<script>
$(function() {
cityArray = new Array();
cityArray = #{tokyoBean.cityArr};
monthsArray = new Array();
monthsArray = #{tokyoBean.catArr};
tempsArray = new Array();
tempsArray = #{tokyoBean.cityArrArr};
len = cityArray.length;
series = new Array();
for(i=0; i < len; i++) {
series.push("{ <br /> name: "+[cityArray[i]]+", <br /> data: "+[tempsArray[i]]+" <br /> } ");
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
});
</script>
Running this file now renders the title, subtitle, legend, horizontal and vertical axis, but still not the plot itself. Any clues?
First, let me say thank you for everyone who offered suggestions. I played with code and finally got it to work. Just in case anyone has this problem again, here is what my final xhtml and js code looks like.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
Header
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
<p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum" url="http://forum.primefaces.org/" />
<p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
<script>
$(function() {
cityArray = new Array();
cityArray = #{tokyoBean.cityArr};
monthsArray = new Array();
monthsArray = #{tokyoBean.catArr};
tempsArray = new Array();
tempsArray = #{tokyoBean.cityArrArr};
len = cityArray.length;
series = new Array();
for(i=0; i < len; i++) {
var arrayElement = tempsArray[i],
cityElement = cityArray[i];
series.push({
name: cityElement,
data: arrayElement
});
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
});
</script>
</html>
Hi I am a beginner to JQuery and Highcharts and running into problems I can't solve spending over 3-4 hours on it while following Highcharts documentation to create the first chart in Visual Studio 2013.
I create a barebone ASP MVC 5 application and add the following code to Index.cshtml body:
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="width:100%; height:400px;"></div>
Then I add the following code to _Layout.cshtml:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
It output html code that immediate crash the IE browser launching from with Visual Studio, giving me error message: JavaScript runtime error: Object doesn't support property or method 'highcharts' in Visual Studio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>Index</h2>
<div id="container1" style="width:100%; height:400px;"></div>
<p>
Create New
</p>
<table class="table">
<tr>
<th>
Voltage
</th>
<th>
Current
</th>
<th></th>
</tr>
<tr>
<td>
3.12
</td>
<td>
3.18
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
3.124
</td>
<td>
6.28
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
//<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"bab8eaa5834742c0a90d4a2266b8953c"}
</script>
<script type="text/javascript" src="http://localhost:19978/19d3f54454e64aa2aeab6fa68d1e8a88/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
However, if I copy and paste this into an static html file and open browser to view it offline from my desktop, then the charts works.
Please help! I spent hours already trying out different things to solve this!
Thank you!
You are including jQuery twice. In the header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and at the bottom of the page:
<script src="/Scripts/jquery-1.10.2.js"></script>
This second inclusion will overwrite the first one, where Highcharts was attached to. I.e. inside the document ready callback, $ refers to jquery-1.10.2.js, which doesn't have Highcharts added to it.
You are actually including both libraries, jQuery and Highcharts twice. Don't do that.
Just in case this helps anyone, this was happening for me when I was using AngularJS and mistakenly, a self closing ng-view tag. Angular ended up loading twice so if relevant ensure your ng-view tag is
<ng-view></ng-view>
instead of
<ng-view/>
Took a while to figure out, hopefully it will save somebody else time.