i can see 2 y axes but how can i scale the second? Where i have to put code? I get data from database using json.php which i don't include because i am sure i get results...as i said i can see lines........
function InitHighChart()
{
$("#chart").html("Wait, Loading graph...");
var options = {
chart: {
renderTo: 'chart',
borderColor: '#a1a1a1',
borderWidth: 2,
borderRadius: 13,
alignTicks: false,
height: 550
},
credits: {
enabled: false
},
title: {
text: 'Ενεργός Ισχύς / Τάση',
x: -20
},
xAxis: {
categories: [{}],
labels: {
step: 15,
rotation: -75
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value} MWatt',
},
title: {
text: 'Ενεργός Ισχύς',
}
}, { // Secondary yAxis
title: {
text: 'Τάση',
},
labels: {
format: '{value} V',
},
opposite: true
}],
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "json.php",
data: 'show=impression',
type:'post',
dataType: "json",
success: function(data){
options.xAxis.categories = data.datetime;
options.series[0].name = '...';
options.series[0].data = data.ActiveData;
options.series[1].name = '...';
options.series[1].data = data.VoltageData;
var chart = new Highcharts.Chart(options);
},
});
}
Have you assigned any series to second y axis? That might be the problem.
API: http://api.highcharts.com/highcharts#series.yAxis
series: [{
data: [1, 2, 3, 4, 5, 3, 5]
}, {
data: [3, 3, 5, 4, 6, 6, 3, 3, 4, 6],
yAxis: 1
}]
jsFiddle: http://jsfiddle.net/boog4dpe/
in your code you should add line in
$.ajax({
url: "json.php",
data: 'show=impression',
type:'post',
dataType: "json",
success: function(data){
options.xAxis.categories = data.datetime;
options.series[0].name = '...';
options.series[0].data = data.ActiveData;
options.series[1].name = '...';
options.series[1].data = data.VoltageData;
options.series[1].yAxis = 1; //added line
var chart = new Highcharts.Chart(options);
},
});
Related
I am working on jasper but i don't want to sort the data in the query as many other element of the report using the same query.
So i would like to sort it on the pie chart itself as example on this fiddle http://jsfiddle.net/highcharts/3bDMe/1/. How can it be done without button click? I meant as the chart load it automatically sort by slice value ascending.
$(function () {
$(document).ready(function () {
// Build the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 6.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 88.5],
['Opera', 26.2],
['Others', 30.7]
]
}]
});
$('#sort').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y - a.y;
});
var newData = {};
for (var i = 0; i < chart.series[0].data.length; i++) {
newData.x = i;
newData.y = chart.series[0].data[i].y;
newData.color = Highcharts.getOptions().colors[i];
chart.series[0].data[i].update(newData, false);
// Workaround:
chart.legend.colorizeItem(chart.series[0].data[i], chart.series[0].data[i].visible);
}
chart.redraw({ duration: 2000 });
});
});
});
In the load event you can create a new data array with sorted values and use setData method to apply changes:
chart: {
...,
events: {
load: function() {
var data = this.series[0].data,
newData = [];
data.forEach(function(point) {
newData.push({
y: point.y,
name: point.name
})
});
newData.sort(function(a, b) {
return a.y - b.y;
});
this.series[0].setData(newData);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6vzd8ak7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData
I'm a newbie in html and javascript.
I'm Trying to make a spline chart with csv data file but the chart only shows the points.
Could anyone help me? Thanks in advance.
The parsing csv code follows below:
jQuery.get(dataFilePath, null, function(csv, state, xhr) {
var lines = [],
date,
// set up the two data series
lightLevels = [];
// inconsistency
if (typeof csv !== 'string') {
csv = xhr.responseText;
}
// split the data return into lines and parse them
csv = csv.split(/\n/g);
jQuery.each(csv, function(i, line) {
// all data lines start with a double quote
line = line.split(',');
date = parseInt(line[0], 10)*1000;
lightLevels.push([
date,
parseFloat(line[1], 10)
]);
});
options.series[0].data = lightLevels;
chart = new Highcharts.Chart(options);
});
});
});
The graph code is:
chart: {
type: 'spline',
backgroundColor: '#464344',
renderTo: 'container',
zoomType: 'x',
spacingRight: 20,
},
navigator: {
enabled: true,
height: 15
},
scrollbar: {
enabled: true,
height: 5
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'minute',
count: 30,
text: '30m'
}, {
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'minute',
count: 180,
text: '3h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'all',
text: 'All'
}],
inputDateFormat: '%b %e/%H:%M',
inputEditDateFormat: '%b-%e/%H:%M',
inputDateParser: function(value) {
value = value.split(/[:\.]/);
return Date.UTC(
1970,
0,
1,
parseInt(value[0]),
parseInt(value[1]),
parseInt(value[2]),
parseInt(value[3])
);
},
},
title: {
text: 'Pistas Foam - Cloro Livre (mg/l)'
},
subtitle: {
text: 'Clique e arraste na area do grafico para zoom'
},
xAxis: {
type: 'datetime',
maxZoom: 1 * 1800000
},
yAxis: {
title: {
text: 'Cloro Livre mg/l (0 - 5)'
},
min: 0,
startOnTick: false,
showFirstLabel: false
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y;
}
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1.0,
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+
this.y,
width: 200
});
}
}
},
}
},
series: [{
name: 'Cloro Livre',
marker: {
radius: 2
}
}]
};
I am creating a chart and populating a random data every 5 minute. I set the xAxis data range to 5 hour and when start with initial data, it's width is full in chart but when continuously add point, the data width is decreasing. How do I do to make it not decrease the series width?
I have the following code:
$(function () {
var current_time = (new Date()).getTime()+300000;
var now_time = (new Date()).getTime();
var zone_name = ['A','B','C'];
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function() {
var chartsss = $('#container').highcharts();
setInterval(function() {
for(var i=0;i<zone_name.length;i++)
{
var seriessx = chartsss.series[i];
seriessx.addPoint([current_time, Math.random()], false, true);
seriessx.addPoint([current_time, Math.random()], false, true);
}
chartsss.redraw();
current_time += 300000;
}, 1000);
}
}
},
plotOptions: {
series: {
marker: {
enabled: false
}
},
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth:3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: false,
symbol: 'circle',
fillColor: '#ff0000',
radius: 4,
lineWidth: 1
}
}
}
},
},
title: {
text: 'Daily Zone'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
minute: '%H:%M',
hour: '%H:%M'
},
tickPosition: 'inside',
tickInterval: 3600 * 1000,
minRange:5 * 3600 * 1000,
maxRange:5 * 3600 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: (function(){
var seriesx = [];
for(var i=0;i<zone_name.length;i++)
{
var datax = [];
var time = (new Date()).getTime();
now_time=current_time;
for(var j = -59 ;j <= 0;j++)
{
datax.push({
x: now_time,
y: Math.random()
});
now_time+=300000;
}
seriesx.push({
name:zone_name[i],
data: datax
});
}
current_time=now_time;
return seriesx;
})()
});
});
});
JsFiddle Link: http://jsfiddle.net/jedipalm/YLFhD/4/
Image when started chart: http://i.stack.imgur.com/rE8m3.jpg
Image when continuously add point in few second :http://i.stack.imgur.com/J8GtA.jpg
sorry for my bad English.
Why you are adding twice the same point? Highcharts doesn't support two points in one series with the same x-value. Removed one of addPoint() and works fine: http://jsfiddle.net/YLFhD/8/
try following code:
for(var j = -120 ;j <= 0;j++)
{
datax.push({
x: now_time,
y: Math.random()
});
now_time+=300000;
}
http://jsfiddle.net/YLFhD/6/
I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link
I'm trying to retrieve from a JSON formatted file this series name and data
[
{ "name":"gfs00", "data": [ [1359676800000, 30], [1359687600000, 32]]
},
{ "name":"gfs06", "data": [ [1359676800000, 28], [1359687600000, 29]]
}
]
Here's the highchart code:
var data_temp;
$.getJSON('dati/performance_gfs/precipitazioni/pioggia_live_data.php',
{ run: runs_gfs} ,function(data_temp){
for (var i = 0; i <data_temp.length ;i++){
chart.addSeries({
data:data_temp,
});
}
});
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container_temperatura_windchill_heatindex',
defaultSeriesType: 'line',
zoomType: 'x',
},
title: {
text: 'Ensemble'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // Primary yAxis
id:0,
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}],
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 24 * 3600000, // one hour
pointStart: Date.UTC(2012, 9, 6, 0, 0, 0)
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
this.y;
}
},
series: []
});
});
}
As can be seen I don't know how to assign the series names and data from the JSON file which is correct what I need is something like http://jsfiddle.net/vXdxv/1/
Try the following:
for (var i = 0; i <data_temp.length ;i++){
chart.addSeries(data_temp[i], false);
});
chart.redraw();