Has anyone managed to integrate highcharts with jquerymobile properly?
If i request a page containing some chart directly (i.e. http://mysite.com/mobile/page.html) the charts will initialize and render as expected. Instead, if i try to navigate to the same page using the anchor links, the page renders but the charts don't. I am using the "pageshow" event to initialize the charts.
Any feedback will be largely appreciated!
I had this same problem when I first started coding with jQuery Mobile... You have to bind your scripts on pagecreate, ie:
$(document).delegate("#page-id", "pagecreate", function() {
// highcharts, etc.
}
With jQuery mobile you need to put your page specific scripts and styles inside the page-content div. See "Known Limitations" in documentation.
I have tried what Tsar mentioned and for me it worked. What I did was:
Added the script within the head tag,
and added the div with the ID(rederTo) used in the script within the "page-content".
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Acura</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script src="libs/hightcharts/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
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 id="ge" data-role="page">
<div data-role="header">
//header
</div>
<div data-role="content">
<div id="container"></div>
</div>
</div>
</body>
</html>
Related
I am using the following code in my MVC application on visual studio to generate a pie chart using the chartjs JavaScript framework. The text does get displayed in the console on the browser. But the chart is not visible.
The following error I get is undefined based on this property [#Html.Raw(ViewBag.ProductSalesCountName)]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pie Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script>
var PieChartData =
{
labels: [#Html.Raw(ViewBag.ProductSalesCountName)],
datasets: [{
label: 'ProductWise Sales Count',
backgroundColor: [
"#f990a7",
"#aad2ed",
"#9966FF",
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [#ViewBag.ProductSalesCount]
}]
};
window.onload = function () {
var ctx1 = document.getElementById("Piecanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'pie',
data: PieChartData,
options:
{
title:
{
display: true,
text: "ProductWise Sales Count"
},
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="Piecanvas"></canvas>
</div>
<div style="text-align: center">
Disclaimer:- This data is for demo it is
not real data it wont relate to any company
</div>
</body>
</html>
This is because your serialization does not produce a valid javascript array.
First remove the square brackets from #Html.Raw(ViewBag.ProductSalesCountName)
And in the controller use Newtonsoft.Json for the serialization.
ViewBag.ProductSalesCountName=
Newtonsoft.Json.JsonConvert.SerializeObject(list);
I am trying to create a polymer custom element to display a Highchart and getting this error:
'Highcharts Error #13 Rendering div not found
This error occurs if the chart.renderTo option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.'
Can anyone please explain how to load the chart into the template div id="container"? Any links to working highcharts/polymer elements greatly appreciated :)
My code (I'm using polymer starter kit so linking to polymer/webcomponents from the elements.html and have in index.html):
<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>
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
});
</script>
</dom-module>
New code:
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: function() {
var el = new Highcharts.Chart
({
chart: {
type: 'bar',
// renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
this.$.container.appendChild(el);
}
});
</script>
</dom-module>
Try, to use
ready: function() {
var el = new Highcharts.Chart({.....});
//selector for element with id container
this.$.container.appendChild(el);
}
I got the chart loading like this, thanks for help:
<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>
<dom-module id="bar-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "bar-chart",
ready: function () {
$(this.$.container).highcharts({
chart: {
type: 'bar',
renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
}
});
</script>
</dom-module>
Hey you can use Highchart-Chart to do the same thing.
<!-------------------------------------|
Normal Import is done the way below:
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">
For the sake of a demo I will use a CDN
--------------------------------------->
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">
<highcharts-chart type="bar" x-axis='{"categories": ["London","Paris","Madrid"]}' title="Hi" x-label="Cities" data='[1000,2500,1500]' y-label="Sales"></highcharts-chart>
Click Run code snippet to see the chart!
That's it! There are more examples here with real-time data.
I'm adding this answer since I could not find this solution anywhere else and unfortunately the Highchart-Chart package with Polymer 1.x did not work for me either.
I noticed that the element was being created/rendered, but it wasn't being properly appended to the custom Polymer element (e.g. my-chart).
The only way that worked was to use this.appendChild(this.$.container); after creating the Highchart.
Your code would then be:
<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>
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: this.$.container // Renders to div#container in this module only
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
});
this.appendChild(this.$.container); // Add highcharts to Polymer element DOM
</script>
</dom-module>
NOTE: Highcharts.chart({...}) did not need to be stored to a variable.
This should avoid the param 1 is not Node error.
my json.data file is in the same directory as my index.html file. data.json file looks like this:
{
data:
[
[1369540800000,20]
]
}
when I do:
alert(JSON.stringify(jsonData, null, 4));
I get this back, so I get the values. Still dont know what is wrong.
{
"data":[
[
1369540800000,
10
],
[
1369541700000,
20
]
]
}
my html file including java script to build the charts is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>HIGHTCHARTS</title>
<style>
body
{
font: 10px arial;
}
</style>
<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 type="text/javascript">
$(function () {
var chart;
$.getJSON('data.json', function(jsonData) {
chartOptions.series = jsonData;
chart = new Highcharts.Chart(chartOptions);
});
var chartOptions = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: []
};
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
I see the chart title but I dont see any charts or data points. What am I missing here?
Your data is not in the right format. Familiarize yourself with how to format data for Highcharts.
These may help:
http://api.highcharts.com/highcharts#series.data
http://docs.highcharts.com/#preprocesssing-data-from-a-file
Notably:
1) your dates must be either a javascript time stamp (epoch time, in milliseconds), or a date.Utc declaration
2) your structure needs to be like:
[[date, value],[date,value],[date,value]]
this is what I had to do to make it work:
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'area'
},
xAxis: {
type: 'datetime'
},
series: [{}]
};
$.getJSON('dude.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
I am trying to use highcharts to build a charts. I have the below code:
my data.json file looks like this:
{"DATETIME":[1369540800,1369541700,1369542600,1369543500,1369544400,1369545300,1369546200,1369547100,1369548000,1369548900],"CPU":[14.84,13.6333333333333,14.7666666666667,13.5333333333333,17.8666666666667,15.9333333333333,14.2333333333333,13.3,10.8333333333333,9.76666666666667]}
HIGHTCHARTS
<style>
body
{
font: 10px arial;
}
</style>
<script src="jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(data) {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'CPU UTILIZATION'
},
xAxis: {
categories: ['Date']
},
yAxis: {
title: {
text: '% CPU Utilization'
}
},
series: [{
data: data,
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
I dont see any values, dada.json file is in the same directory as index.html file. Any ideas what I am missing here?
Your JSON should have data name instead of datetime. Morever I see only dates, not y values.
"DATETIME":
should be
"data":
I'm new to Highcharts and have been tinkering with it a bit on jsFiddle.
A fiddle independent example would look something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
xAxis: {
type: 'datetime'
},
series: [{
color: 'rgba(223, 83, 83, .5)',
data:
[[Date.UTC(2012,10,15,12,25,47), 90.7000],
// Many more data points here, see fiddle for complete list
[Date.UTC(2013,2,7,11,37,18), 199.5000],
[Date.UTC(2013,2,7,11,37,18), 199.5000]]
}]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>
</body>
</html>
Anyways, I have a series that consists of a large set (~16k) of (datetime,float) Cartesian points that I wish to visualize on a scatter plot. I got what I wanted, but it appears to make my browser really sluggish. Particularly if I re-size the window or hover over tooltips. Looking for any advice or tips to optimize the performance or point out (no pun intended) something else I should be doing instead for this kind of visualization.
A couple of things you could do are to remove animation on the chart itself, and the tooltip. Also if you can get away with it, you could only render a tooltip for every 10th point.
http://jsfiddle.net/Jx5n2/3653/
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy',
animation:false
},
tooltip:{
animation:false,
formatter:function(){
if(this.x % 10 != 0) return false;
return 'The value for <b>'+ this.x +
'</b> is <b>'+ this.y +'</b>';
}
},