I am new to programming with JavaScript and am having some troubles implementing a HighCharts chart. The API I am using is markit (https://github.com/markitondemand/DataApis/blob/master/MarkitTimeseriesServiceSample.js) to produce a chart as shown halfway down this page http://dev.markitondemand.com/
Now I thought I had to add that js script in place of the js shown in this fiddle (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/) but it doesn't seem to be working.
I think it may be because I am not assigning where I actually want to put it but I am not 100% sure.
Please see below for my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
/**
* Version 1.1, Jan 2012
*/
var Markit = {};
/**
* Define the TimeseriesService.
* First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
* Second argument is duration (int) for how many days of history to retrieve.
*/
Markit.TimeseriesService = function(symbol,duration){
this.symbol = symbol;
this.duration = duration;
this.PlotChart();
};
Markit.TimeseriesService.prototype.PlotChart = function(){
//Make JSON request for timeseries data
$.ajax({
beforeSend:function(){
$("#chartDemoContainer").text("Loading chart...");
},
data: {
symbol: this.symbol,
duration: this.duration
},
url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
dataType: "jsonp",
context: this,
success: function(json){
//Catch errors
if (!json.Data || json.Message){
console.error("Error: ", json.Message);
return;
}
this.BuildDataAndChart(json);
},
error: function(){
alert("Couldn't generate chart.");
}
});
};
Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
var dateDS = json.Data.SeriesDates,
closeDS = json.Data.Series.close.values,
openDS = json.Data.Series.open.values,
closeDSLen = closeDS.length,
irregularIntervalDS = [];
/**
* Build array of arrays of date & price values
* Market data is inherently irregular and HighCharts doesn't
* really like irregularity (for axis intervals, anyway)
*/
for (var i=0; i<closeDSLen;i++){
var dat = new Date(dateDS[i]);
var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
var val = closeDS[i];
irregularIntervalDS.push([dateIn,val]);
}
//set dataset and chart label
this.oChartOptions.series[0].data = irregularIntervalDS;
this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";
//init chart
new Highcharts.Chart(this.oChartOptions);
};
//Define the HighCharts options
Markit.TimeseriesService.prototype.oChartOptions = {
chart: {
renderTo: 'chartDemoContainer'
},
title:{},
subtitle: {
text: 'Source: Thomson Reuters DataScope / Markit On Demand'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
marker: {
lineWidth: 1
}
}
},
series: [{
name: "Close price",
lineWidth: 2,
marker: {
radius: 0
}
}]
//,credits:{ enabled:false },
};
new Markit.TimeseriesService("GOOG", 365);
/**
* Need help? Visit the API documentation at:
* http://dev.markitondemand.com
*/
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thanks a lot for the help.
In your <div> change the id to #chartDemoContainer
Replace your jQuery libraries with these,
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And here's a working version of your example - http://jsbin.com/behicetivi/edit?html,output
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
/**
* Version 1.1, Jan 2012
*/
var Markit = {};
/**
* Define the TimeseriesService.
* First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
* Second argument is duration (int) for how many days of history to retrieve.
*/
Markit.TimeseriesService = function(symbol,duration){
this.symbol = symbol;
this.duration = duration;
this.PlotChart();
};
Markit.TimeseriesService.prototype.PlotChart = function(){
//Make JSON request for timeseries data
$.ajax({
beforeSend:function(){
$("#chartDemoContainer").text("Loading chart...");
},
data: {
symbol: this.symbol,
duration: this.duration
},
url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
dataType: "jsonp",
context: this,
success: function(json){
//Catch errors
if (!json.Data || json.Message){
console.error("Error: ", json.Message);
return;
}
this.BuildDataAndChart(json);
},
error: function(){
alert("Couldn't generate chart.");
}
});
};
Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
var dateDS = json.Data.SeriesDates,
closeDS = json.Data.Series.close.values,
openDS = json.Data.Series.open.values,
closeDSLen = closeDS.length,
irregularIntervalDS = [];
/**
* Build array of arrays of date & price values
* Market data is inherently irregular and HighCharts doesn't
* really like irregularity (for axis intervals, anyway)
*/
for (var i=0; i<closeDSLen;i++){
var dat = new Date(dateDS[i]);
var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
var val = closeDS[i];
irregularIntervalDS.push([dateIn,val]);
}
//set dataset and chart label
this.oChartOptions.series[0].data = irregularIntervalDS;
this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";
//init chart
new Highcharts.Chart(this.oChartOptions);
};
//Define the HighCharts options
Markit.TimeseriesService.prototype.oChartOptions = {
chart: {
renderTo: 'chartDemoContainer'
},
title:{},
subtitle: {
text: 'Source: Thomson Reuters DataScope / Markit On Demand'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
marker: {
lineWidth: 1
}
}
},
series: [{
name: "Close price",
lineWidth: 2,
marker: {
radius: 0
}
}]
//,credits:{ enabled:false },
};
new Markit.TimeseriesService("GOOG", 365);
/**
* Need help? Visit the API documentation at:
* http://dev.markitondemand.com
*/
</script>
</head>
<body>
<div id="chartDemoContainer" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Related
I trying to get highcharts to draw a linked graph. It works when I have not so much data in my data set. Now I have tried to put a dataset with ~30.000 points. I see the mouse over with the points, but the line is not plot?
I have read about turboThreshold: and have set it to turboThreshold: 40000 but it does still not plot the line??
Any ideas what I do wrong?
/Jesper
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.chart {
min-width: 200px;
max-width: 1250px;
height: 350px;
margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<title>Highcharts Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<script type='text/javascript'>//<![CDATA[
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('http://vels.dk/beer/getdata.php?name=velsdk002', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
//text: dataset.name,
text: null,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
crosshair: true,
events: {
setExtremes: syncExtremes
}
},
yAxis: {
title: {
text: dataset.name
},
opposite: true, //flytter skala til højre
labels: {
align: 'left',
x: 0,
y: -2
},
plotLines: [{
value: dataset.min,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Final Gravity - XX SG',
x: 30
}
}, {
value: dataset.max,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Starting Gravity - XX SG',
x: 30
}
}]
},
plotOptions: {
series: {
turboThreshold: 40000,
marker: {
enabled: false
}
}
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
//]]>
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>
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'm trying to use highcharts to visualize some numbers out of my database :)
After fetching them from the db I'm encoding the outcome (currently 2 categories) as JSON:
Name
Category
Data
[{"name":"Something 1","category":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,0,1,0,0,0,1,0,0,7,6,3,4,4,10,8,9,7,12,5,8,2,0]},{"name":"Something 2","category1":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,1,1,0,0,0,0,2,1,4,2,3,2,4,3,4,6,3,5,3,5,2,1]}]
which is later be used by my example.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Diagram</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Something and Anything',
x: -20 //center
},
subtitle: {
text: 'bla bla bla',
x: -20
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 30,
formatter: function() {
return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
}
}
},
yAxis: {
title: {
text: 'Orders'
},
plotLines: [{
value: 0,
width: 0,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +':00 => '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Bla Bla Bla Highcharts Container -->
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
so far so good - what I finally want to add is the possibility of adding a datepicker now.
My "data.php" file is already able to handle a "Date" Parameter:
data.php?dateParam=2014-05-08
But still I'm not finding a valid way to add the datepicker into my code.
Also wanted to let you know that I'm pretty new to JS and aware of the fact
that this script could have been written way better...
So long and thanks for all the cheese,
Jo3rg
A few tips
if you use categories, dateFormat will not work, it is based on timestamp
you should set type of xAxis (i.e category) or datetime
if you use datetime, your dates should be parsed to timestamp (Date.UTC functon or Date.parse()
in the series you should define which data is used, becuase your json is invalid (incorrect structure for highcharts)
I'm working on getting a Highcharts bar chart together dynamically changes with Ajax calls. I think I'm really close to figuring it out but it's not displaying and I'm not seeing the problem. I believe I can update points the way I've done it inside the setInterval function. I'm hoping someone can eyeball it and give me suggestions...thanks a lot
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
<!--Ajax Function-->
var flag = 1;
var xmlhttp;
var url="http://mysite.com/web/ajax_info.txt";
//ajax call
function loadXMLDoc(url, cfunc){
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url, true);
xmlhttp.send();
}
function myFunction(){
loadXMLDoc(url+'?_dc='+(new Date()).getTime(), function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
flag = 1;
}
});
}
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Active Tribble Sales'
},
subtitle: {
text: 'Source: TribbleInternational.com'
},
xAxis: {
categories: [
'Tribbles'
]
},
yAxis: {
min: 0,
title: {
text: 'Active Sales (%)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Good',
data: [80]
}, {
name: 'Bad',
data: [1]
}]
},
function(chart){
setInterval(function() {
myFunction();
if(flag == 1){
var point = chart.series[0].points[0],
var point2 = chart.series[1].points[0],
newVal,
inc = Math.round((Math.random() - .5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
point2.update(1);
}
else{
var point2 = chart.series[0].points[0],
var point = chart.series[1].points[0],
newVal,
inc = Math.round((Math.random() - .5) * 20);
newVal = point2.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point2.y - inc;
}
point2.update(newVal);
point.update(1);
}
flag = 0; //reset flag after point update.
}, 3000);
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<div id="container" style="min-width: 300px; max-width: 300px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Check the syntax i.e the braces are closed correctly
as for as i noticed
series: [{
name: 'Good',
data: [80]
}, {
name: 'Bad',
data: [1]
}]
},
should be })
since //
chart = new Highcharts.Chart({
and
}
flag = 0; //reset flag after point update.
}, 3000);
// } is missing
});
});
pls check it