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
Related
I have created a chart using the HighCharts javascript library, the problem I have is that my y-Axis labels are cut by the Y-Axis vertical line. I would like to add more space in the y-axis label gutter area to allow for the labels to be fully visible and so i can add some annotations to the in that area, see image below:
Ideally I would like to add 40px, to the Y-Axis gutter. I have read through the api reference and tried using "yAxis.labels.padding", "yAxis.margin" and "yAxis.offset".
My code is as follows:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#container {
height: 400px;
width: 350px;
}
.highcharts-tick{display: none;}
.highcharts-grid-line{opacity: 0.2}
</style>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id=container2></div>
<script type="text/javascript">
$(function() {
const options = {
chart: {
backgroundColor: '#1B191B', // Background Color
type: 'line',
zoomType: "",
},
rangeSelector : {
enabled: false,
selected : 2,
inputEnabled: false
},
title: {
text: 'APPLE INC', // Title of the Chart
align: 'left',
style: {
color: '#dedbde', // Custom CSS for the title
fontWeight: 'bold'
}
},
scrollbar: { enabled: false },
exporting: {
enabled: false
},
yAxis: {
lineWidth: 2,
tickWidth: 1,
labels: {
style: {
color: '#dedbde'
},
align: 'right',
},
opposite: true,
offset: -1
},
xAxis: {
labels: {
style: {
color: '#dedbde'
}
},
gridLineWidth: 1,
},
navigator: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [],
type: 'areaspline',
threshold: null,
color: '#5861B3',
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
}
const url = 'https://demo-live-data.highcharts.com/aapl-c.json'
const chart = Highcharts.stockChart('container', options)
$.getJSON(url, function(data) {
chart.series[0].setData(data)
// Execute callback
if (chart.options.chart.events && chart.options.chart.events.dataLoad) {
const dataLoad = chart.options.chart.events.dataLoad.bind(chart)
dataLoad(data)
}
})
})
</script>
</body>
</html>
Been banging my head around this for while, but I cant seem to figure it out any help would be very much appreciated. Thanks
In Highstock, the yAxis is inverted by default, so aligning the labels is reversed as well.
The only thing you need to change is setting yAxis.labels.align to 'left'.
Demo:
https://jsfiddle.net/BlackLabel/10ae8g9d/
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 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;
I was just trying highstock sample chart with its sample data in the picture. i downloaded it with highstock library, it's in the basic-line folder under examples. I wanted to style its buttons and etc. Buttons are being partially displayed on each other.
I wanted to fix it by inputBoxWidth which i found here: link
It only made it worst by ruining upper right positioned input boxes. I want buttons to be as wide as i want and no problem with them. How can i achieve this?
*ps: I also wonder how to remove/edit elemnts that i circled in red. The link at bottom right side of the graph and button at above the "To: " input box. Because i cannot find them in my html file.
edit: i deleted link at bottom right side
edit2: i also deleted exporting button
And here is my file:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock 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() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 15,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
selected : 1,
buttons: [
{
// quarter button
type: 'month',
count: 3,
text: 'Q'},
// year button
{
type: 'year',
count: 1,
text: 'Y'},
// ytd button
{
type: 'ytd',
text: 'YTD'},
// all button
{
type: 'all',
text: 'ALL'}]
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="/Users/ihtechnology/Desktop/IH57/highstock.js"></script>
<script src="/Users/ihtechnology/Desktop/IH57/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
You can use buttons theme and set width in that way:
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
width:40,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
http://jsfiddle.net/dLGH9/
I want to get the correct x axis label when user zooms the chart and click on a specific bar
when clicking on the bar on (02/14/14 - xaxis) the alert shows the (02/19/14 - xaxis) label.
It returns the correct date when the zoom(selection) is not firing. but after zooming the chart and clicking on the bar it populate a wrong date.
I am new to flot charts. please help me. thanks.
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Stack Zoom Click</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="plot.css" rel="stylesheet" type="text/css">
<link href="master.css" rel="stylesheet" type="text/css">
<!--\[if lte IE 8\]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><!\[endif\]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.valuelabels.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.selection.js"></script>
<script type="text/javascript">
$(function() {
var dataset = \[{
data: \[
\[1391279400000, -588\],\[1391365800000, -1324\],\[1391452200000, -1525\],\[1391538600000, -588\],\[1391625000000, -1525\],\[1391711400000, -588\],
\[1391797800000, -1324\],\[1391884200000, -1525\],\[1391970600000, -588\],\[1392057000000, -1234\],\[1392143400000, -588\],\[1392229800000, -1324\],
\[1392316200000, -1525\],\[1392402600000, -588\],\[1392489000000, -1525\],\[1392575400000, -588\],\[1392661800000, -1324\],\[1392748200000, -1525\],
\[1392834600000, -588\]
\],
color:'#9D538E',
label: "Out"
},
{
data: \[
\[1391279400000, 3221\],\[1391365800000, 2496\],\[1391452200000, 1050\],\[1391538600000, 3221\],\[1391625000000, 1050\],\[1391711400000, 3221\],
\[1391797800000, 2496\],\[1391884200000, 1050\],\[1391970600000, 2221\],\[1392057000000, 1050\],\[1392143400000, 3221\],\[1392229800000, 2496\],
\[1392316200000, 1050\],\[1392402600000, 3221\],\[1392489000000, 1050\],\[1392575400000, 3221\],\[1392661800000, 2496\],\[1392748200000, 1050\],
\[1392834600000, 2221\]
\],
color:'#702BD7',
label: "Intake"
}, {
data: \[
\[1391279400000, 1000\],\[1391365800000, -1000\],\[1391452200000, -475\],\[1391538600000, 1000\],\[1391625000000, -475\],\[1391711400000, 1000\],
\[1391797800000, -1000\],\[1391884200000, -475\],\[1391970600000, 1000\],\[1392057000000, -475\],\[1392143400000, 1000\],\[1392229800000, -1000\],
\[1392316200000, -475\],\[1392402600000, 1000\],\[1392489000000, -475\],\[1392575400000, 1000\],\[1392661800000, -1000\],\[1392748200000, -475\],
\[1392834600000, 1000\]
\],
color:'#2082F2',
label: "Net"
}\];
var plot = $.plot("#placeholder", dataset, {
xaxis: {
mode: 'time',
timeformat: "%m/%d/%y",
tickSize: \[1, "day"\],
},
series: {
bars: {
fill: 1,
show: true,
barWidth: 100*100*4000,
},
valueLabels: {
show: true,
showAsHtml: true,
},
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 2,
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
}
});
var overview = $.plot("#overview", dataset, {
xaxis: {
mode: 'time',
ticks: \[\]
},
yaxis: {
ticks: \[\],
},
series: {
bars: {
fill: 1,
show: true,
},
},
grid: {
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
},
selection: {
mode: "x"
},
legend: {show: false}
});
// now connect the two
$("#placeholder").bind("plotselected", function (event, ranges) {
//Reset Chart resolution dropdown
$(".chartResolution").val("0");
// do the zooming
plot = $.plot("#placeholder", dataset, {
xaxis: {
mode: 'time',
min: ranges.xaxis.from,
max: ranges.xaxis.to,
},
series: {
bars: {
fill: 1,
show: true,
barWidth: 100*100*4000,
},
valueLabels: {
show: true,
showAsHtml: true,
},
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 2,
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
}
});
// don't fire event on the overview to prevent eternal loop
//overview.setSelection(ranges, true);
});
//bind the plotselected function
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
var tickClicked = item.series.xaxis.ticks\[item.dataIndex+1\].label;
alert(tickClicked);
}
});
});
</script>
</head>
<body style="background-color:#222222; color:white;">
<div id="content">
<div class="demo-container" style="margin-top:1%;">
<div id="placeholder" class="demo-placeholder"></div>
<p class="notifyMessage">Please click and drag and select a range to zoom Revert to all data</p>
<div id="overview" class="psycho" style="width:950px;height:150px;"></div>
</div>
</div>
</body>
</html>][1]
The problem is this line of code:
var tickClicked = item.series.xaxis.ticks[item.dataIndex+1].label;
When your plot is unzoomed you have one tick per datapoint (bar). When you zoom, however, you end up with in between ticks, so the finding a tick by item.dataIndex isn't going to work.
I'm guessing you care more about the data associated to the bar (and not really the tick) so get the bar x value and format it back to a date string.
var tickClicked = $.plot.formatDate(new Date(item.datapoint[0]),"%m/%d/%Y");
EDITS
Instead of making another .plot call on zoom redraw the chart with (this is how I do it in my applications using flot):
var opts = plot.getOptions();
opts.xaxes[0].min = ranges.xaxis.from;
opts.xaxes[0].max = ranges.xaxis.to;
opts.yaxes[0].min = ranges.yaxis.from;
opts.yaxes[0].max = ranges.yaxis.to;
plot.setupGrid();
plot.draw();