I have spent many hours learning JavaScript and HighCharts today. I am trying to get this chart to display. I managed to get the JSON to work but I would prefer to get the CSV to work as all of my files are in CSV. I have gone through the JavaScript debugger a lot and see that my data is saving correctly but yet the data does not draw. The axis and title do display. Attached is my code. Thanks in advance for help. For whatever reason, the JSFiddle doesn't work so feel free to look at what I mean at: www.teratuple.com/data/dataVolume.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id = "container" style = "width:100%; height:400px;"></div>
<script>
var seriesData = [];
var chart;
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 1 // all
},
xAxis: {
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Volume (mm3)'
}
},
title: {
text: 'Volume Differential'
},
series: [{
data: [],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
};
$.get('www.teratuple.com/data/volumeData.csv', function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0) {
seriesData.push([parseInt(items[0]), parseFloat(items[1])]);
}
});
options.series.data = seriesData;
chart = new Highcharts.StockChart(options);
});
});
</script>
</body>
</html>
The series property is meant to be an array so set your series data via
options.series[0].data = seriesData;
Related
I try to show temperature on a webapge (using Echarts.js) within 24 hours based on whole hours.
I have added a sample html.doc which i try.
Somehow it does not show the data.
Here is my example code:
The staqck-overflow editor keeps complaining that i had to add more details, please view the code.
That is full code.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 80%;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
var now = new Date(2019,10,7);
var nowPlusOneday = +now + 24*3600*1000-1;
var data =[];
data.push([new Date(2019,10,7,1,5),19]); data.push([new Date(2019,10,7,2,10),34]);
data.push([new Date(2019,10,7,3,9),12]); data.push([new Date(2019,10,7,4,11),16]);
data.push([new Date(2019,10,7,5,13),29]); data.push([new Date(2019,10,7,6,16),14]);
data.push([new Date(2019,10,7,7,45),18]);
// specify chart configuration item and data
var option = {
title: {
text: 'Temperatuur'
},
legend: {
orient: 'horizontal',
top: 'bottom',
left: 'right'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'time',
min: now,
max: nowPlusOneday,
splitNumber: 12,
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
min: 'dataMin',
max: 'dataMax',
type: 'value',
splitLine: {
show: true,
},
axisLabel: {
formatter: '{value} °C'
}
},
dataZoom: [{
startValue: '2001-06-06'
}, {
type: 'inside'
}],
series: {
name: 'Temperatuur',
type: 'line',
data: data.map(function (item)
{
return item[1];
}),
markLine: {
silent: false
}
}
// use configuration item and data specified to show chart
myChart.setOption(option);
</script></body></html>
This is my output:
output of html file
All help is welcome.
Thanks in advance.
Anand
I want to use data passed through a django (2.0) view to my html template - but in JavaScript. I need it to plot an area chart with Highcharts. This is the code
context = {
'values': butler.serve(progress) #this works fine
}
return render_to_response('appfolder/charts.html', context) #this works fine too
And this is the charts.html file
<script>
var values_data = "{{ values }}";
console.log(values_data); //output works
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="{% static 'appfolder/js/charts/progress.js%}"</script>
and this is my progress.js file
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Progress'
},
subtitle: {
text: 'Source: <a href="http://example.com">' +
'empty for now</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000000 + 'mn';
}
}
},
tooltip: {
pointFormat: '{series.name} churned out USD <b>{point.y:,.0f}</b><br/>million in revenue in {point.x}'
},
plotOptions: {
area: {
pointStart: 2015,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Company',
data: values_data
}]
});
console.log(values_data); //output also works
When I load the page, the chart doesn't plot. However I console.log(values_data) gives me an array in my browser console:
[911523597.25, 911523597.25, 911523597.25, 911523597.25, 803997322.63, 802981867.89, 726720570.4, 679697869.95, 911523597.25, 911523597.25, 911523597.25, 911523597.25]
Any ideas on how to fix this?
values_data is a string. You need to call JSON.parse to convert it to an array before passing it to Highcharts.
I am new on highchart. I have gone through the help portal of this and I am unable to fulfill my requirement so need you help/guide to complete this task .
My task is to read the data from a csv/TXT file which contains TPS details as per below format and show it on a dynamic running chart ( it's ok if the chart will refresh in one minute ) .
DATA format:
16:08:02,3
16:08:04,5
16:08:05,1
16:09:01,10
The above file is appending on every second , will read the last one minute data from file and plot this on chart .
I have tried this using below code. Don't know what I am missing.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TPS Example</title>
<script type="text/javascript" src="C:/Backup/SUNIL/Software/library/jquery-2.2.0.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'TPS Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 3,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
</head>
<body>
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
<div id="container" style="min-width: 50px; height: 200px; margin: 0 auto"></div>
</body>
</html>
You probably have incorrect paths to your script files.
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
The code works fine: http://jsfiddle.net/tmp3pty2/
i want to add a range selector in my Chart, but i don´t know how to do it. i´ve tried some example from jsfiddle , but it´s not working.
Here is my code:
<meta http-equiv="refresh" content="65;url=http://localhost/23-1_chart.php"/>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/XXX.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>
</head>
<body>
<div id="chart" style="height: 400px; margin: 0 auto"></div>
<script>
$(function() {
//Highcharts with mySQL and PHP - Ajax101.com
var Voc_value = [];
var time = [];
var switch1 = true;
$.get('23-1_values.php', function(data) {
data = data.split('/');
for (var i in data) {
if (switch1 == true) {
time.push(data[i]);
switch1 = false;
} else {
Voc_value.push(parseFloat(data[i]));
switch1 = true;
}
}
time.pop(); // cursor
$('#chart').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'VOC-Value-A.ROOM'
},
subtitle : {
text : 'Room A'
},
xAxis : {
title : {
text : 'time'
},
categories : time
},
yAxis : {
title : {
text : 'VOC-value in ppm'
},
labels : {
formatter : function() {
return this.value + 'VOCvalue'
}
}
},
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : 'ppm'
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{
name : 'VOC-value in ppm',
data : Voc_value
}]
});
});
});</script>
First i read the sql values and put it in 23-1_values.php.
My sql values are reading from this php-page 23.1_values.php and then the chart is build. I have the datetime (day-hour-min-s) in the abscissae axis and the ppm value in the ordinate axis
I´m getting too much values and want to reduce the dateformat and add a range selector in the chart.
How can i do it?
Thanks
i don´t really know what i have done, but it is working now. Thank you very much for helping me.Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XXXXXXXXX</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("XXX.php", function(data) {
// Create a timer
var start = + new Date();
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '24h'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},
yAxis: {
title: {
text: 'XX'
}
},
title: {
text: 'XX'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'XX',
type: 'area',
data: data,
tooltip: {
valueDecimals: 1,
valueSuffix: ' ppm'
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
},
}/*,
{
name: 'Temperatur',
type: 'area',
data: datarasp,
tooltip: {
valueDecimals: 1,
valueSuffix: ' °C'
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
},
}*/]
});
});
});
</script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
Hope it will help someone
I want to draw multiple line for this type of graph of your library : http://www.highcharts.com/stock/demo/basic-line
I found this sample on internet: http://jsfiddle.net/yildirim_timur/Hb3Q7/
Below you can see my html file. I tried to do couple of things but couldn't make it. How can i make my chart to be able to draw multiple lines as well? (it is for an ipad app project)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Senior Project Timur Aykut YILDIRIM - IH Technology</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/result-light.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script type='text/javascript'>
var serviceDataURL = "http://xx.xx.xxx.xxx:83/get_item_data_ios?generic=";
function setDictionary(x){
return x;
} // no need for this method
var dict = "web service query string will be here";
$(function() {
$.getJSON(serviceDataURL.concat(dict), function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
navigation: {
buttonOptions: {
enabled: false,
width: 60
}
},
rangeSelector : {
buttonSpacing: 20,
buttonTheme: { // styles for Q,Y,YTD,ALL buttons
fill: 'none',
stroke: 'none',
'stroke-width': 15,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
selected : 3, // 3=ALL buton at first
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d',
buttons:[
{
type: 'month',
count: 3,
text: 'QQ'
},
{
type: 'year',
count: 1,
text: 'YY'
},
{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'ALL'
},
]
},
title : {
text : 'My Total Market'
},
credits: {
text: " ",
href: " ",
},
series : [{
name : 'Total Market',
data : arr,
tooltip: {
valueDecimals: 2
}
}],
exporting: {
enabled: false
}
}, function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector').attr('readonly',1); // burda webviewı engelledik
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
},0)
});
});
});
//]]>
</script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 500px;"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</body>
</html>
Right now you have:
series : [{
name : 'Total Market',
data : arr,
tooltip: {
valueDecimals: 2
}
}]
So you have just one object inside series. If you want multiple series then should be something like that:
series : [{
name : 'Total Market I',
data : arr_1,
tooltip: {
valueDecimals: 2
}
},{
name : 'Total Market II',
data : arr_2,
tooltip: {
valueDecimals: 2
}
}]
Edit:
To add multiple series, push them to array:
var mySeries = [];
mySeries.push({
name : 'Total Market I',
data : arr_1
});
mySeries.push({
name : 'Total Market II',
data : arr_2
});
mySeries.push({
name : 'Total Market III',
data : arr_3
});
Then create chart:
series: mySeries