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>
Related
I am currently in a berlin start up hustleing to get our website up and running and I get by with HTML AND CSS but a big noob when it comes down to Jquery. Anyway I came across Chart.js and would love to visualize our company success by means of a polar area chart. Yet I want to remove the legend and the grey grid/lines in the background.
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
I dont know how to get the options going to get rid off the background grids/numbers. Does anyone know the command to remove the grids in the background?
Would appreciate your help and probs name my 2nd born after you :)
Love from Berlin,
A
You can simple toggle the display of legend and also the scale, on Graph.js you can pass a options element.
options: {
legend: {
display: false
},
scale: {
display: false
}
}
Check the updated snippet below:
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
},
options: {
legend: {
display: false
},
scale: {
display: false
}
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Maybe you just forgot the "
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
I have the following code, which work fine locally. Iwas trying to change the bootstrap theme to one of the jqgrid themes. I looked online for theme changing and it didnt seem to work .
Here is my code below and fiddle link:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../js/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../js/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jLp data </title>
</head>
<body>
<div style="margin-left:20px">
<table id="nplGrid"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#nplGrid").jqGrid({
url: 'json/data-bcp.json',
datatype: "json",
colModel: [
{ label: 'Id', name: 'Id', width: 45 },
{ label: 'Symbol', name: 'Symbol', width: 90 },
{ label: 'Quantity', name: 'Quantity', width: 100 },
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
{ label: 'Value', name: 'Value', width: 80, sorttype: 'integer' },
{ label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' }
],
loadonce: true,
viewrecords: true,
footerrow: true,
caption: "<b>Brokerage Client Portfolio</b>",
hidegrid:false,
userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
height: 170,
altRows: true,
rowNum: 150
});
});
</script>
</body>
</html>
I already checked old threads, but still I could not solve it.
It's regading jquery think but I already put jquery in the file.
can someone tell me what is the issue here?
Code is about displaying the graph and on button click of slice display nother graph.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>
<html>
Highcharts depends on jQuery. So you must include jQuery before highcharts.
<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>
You need to refer to JQuery before refering to highchart scripts.
A few changes would be:
refer to just one JQuery
Inclose your script in $(document).ready(function(){});
Please see the updated code:
<html lang="en">
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
<script>
$(document).ready(function(){
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
</script>
<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
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]
}]
});
});
});