I have a simple json document :
[ {
"x" : "a",
"y" : 2
}, {
"x" : "b",
"y" : 8
}, {
"x" : "c",
"y" : 4
}, {
"x" : "d",
"y" : 15
} ]
I want to visualize it using Highcharts having 4 series. I could success, however, the data appeared only as one series (see the next Figure).
Here is part of the code:
var options = {
.
.
.
series: [{ }]
};
.
.
.
var data = JSON.parse(json);
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([data[i].x, data[i].y]);
options.xAxis.categories.push( data[i].x );
}
options.series[0].data = seriesData;
var chart = new Highcharts.Chart(options);
also updating the series
chart.series[0].update({
type: type,
});
works fine.
using
options.series.push({name: data[i].x, data: [data[i].x, data[i].y]});
creates 4 series but not appropriately visualized and also updating the series
chart.series[0].update({
type: type,
});
doesn't work, therefore, I want to focus in the first mentioned method.
any hints?
EDit: code which partially works for me:
var options = {
chart: {
renderTo: 'container',
type: 'column' //default
},
title: {
text: ''
},
yAxis: {
title: {
enabled: true,
text: 'Count',
style: {
fontWeight: 'normal'
}
}
},
xAxis: {
title: {
enabled: true,
text: '',
style: {
fontWeight: 'normal'
}
},
categories: [],
crosshair: true
} ,
plotOptions: {
pie: {
innerSize: 125,
depth: 80
},
column: {
pointPadding: 0.2,
borderWidth: 0,
grouping: false
}
},
series: [{ }]
};
// Set type
$.each(['column', 'pie'], function (i, type) {
$('#' + type).click(function () {
chart.series[0].update({
type: type
});
});
var data = get the data fom json file**
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([data[i].x, data[i].y]);
options.xAxis.categories.push( data[i].x );
}
options.series[0].data = seriesData;
var chart = new Highcharts.Chart(options);
});
});
You have to decide whether you want to have 4 different series and update all 4 series at once or you want to have one series an then build e.g. legend on your own.
If you want to have 4 series, set grouping to false, set xAxis categories and each point should be mapped to one series with one point - the point.x should have the index of the series.
const series = data.map((point, x) => ({ name: point.x, data: [{ x, y: point.y }]}))
const chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
grouping: false
}
},
xAxis: {
categories: data.map(point => point.x)
},
series: series
});
Then you can update your all 4 series:
chart.series.forEach(series => series.update({
type: series.type === 'column' ? 'scatter' : 'column'
}, false))
chart.redraw()
example: http://jsfiddle.net/pdjqrj5y/
Related
Highcharts is working when not calling Gantt chart in other views. I've played around trying to get this Gantt chart to work. Looks like there is a conflict with import map only calling highcharts and highcharts.ganttChart is not found. I've tried added the src url through a script tag directly in the html view but still getting this error.
Error msg <
Uncaught (in promise) TypeError: Highcharts.ganttChart is not a function
>
Javascript controller
```
import {Controller} from "#hotwired/stimulus"
export default class extends Controller {
connect() {
let today = new Date(),
day = 1000 * 60 * 60 * 24;
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
let dateFormat = Highcharts.dateFormat;
let series
let chart; // global
async function requestData() {
const response = await fetch('http://localhost:3000/api/v1/charts/index');
if (response.ok) {
const data = await response.json();
series = data.map(function (job, i) {
let data = job.deals.map(function (phase) {
return {
id: 'deal-' + i,
project: phase.project,
client: phase.client,
phase: phase.phase,
start: new Date(phase.from).getTime(),
end: new Date(phase.to).getTime(),
y: i
};
});
return {
name: job.name,
data: data,
current: job.deals[job.current]
};
});
setTimeout(requestData, 1000);
console.log(series);
chart = Highcharts.ganttChart('container', {
series: series,
title: {
text: 'Crew Schedule'
},
tooltip: {
pointFormat: '<span>Client {point.client}</span><br/>' +
'<span>Project: {point.project}</span><br/>' +
'<span>Phase: {point.phase}</span><br/>' +
'<span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
},
lang: {
accessibility: {
axis: {
xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.',
yAxisDescriptionSingular: 'The chart has a tabular Y axis showing a data table row for each point.'
}
}
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true,
selected: 0
},
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
valueDescriptionFormat: 'Assigned to {point.project} from {point.x:%A, %B %e} to {point.x2:%A, %B %e}.'
},
series: {
descriptionFormatter: function (series) {
return series.name + ', job ' + (series.index + 1) + ' of ' + series.chart.series.length + '.';
}
}
},
xAxis: {
currentDateIndicator: true
},
navigator: {
enabled: true,
liveRedraw: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25,
accessibility: {
enabled: false
}
},
yAxis: {
min: 0,
max: 3,
reversed: true,
categories: []
}
},
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Crew'
},
categories: series.map(function (s) {
return s.name;
})
}]
}
}
})
}
return chart;
}
window.addEventListener('load', (event) => {
requestData();
});
}
}
my problem is that the primary and secondary yAxis zero is not on the same level. The screenshot can describe my problem better. Is there any possibility to fix this?
Here is the JSFiddle
Highcharts.chart('container', {
title: {
text: 'Stückzahl'
},
xAxis: {
categories: ['5007.205.1.1.1', '5007.225.1.1.1', '5007.285.1.1.1'],
labels:{
enabled: false
}
},
credits: {
enabled: false
},
legend:{
enabled: false
},
yAxis: [{
title: {
text: 'Stückzahl',
},
opposite: false
},{
title: {
text: 'FOR[%]',
},
opposite: true,
max:100,
min:0
}],
series: [
{
type: 'column',
name: 'Sollwert',
pointWidth:30,
grouping: false,
color: 'rgba(0,0,0,0.1)',
data: [2000, 1500, 1600],
yAxis: 0
},{
dataLabels:{
enabled:true
},
type: 'column',
grouping: false,
pointWidth:20,
name: 'John',
data: [1941, 975, 1936],
yAxis: 0
},{
dataLabels:{
enabled:true
},
color:'#ef703e',
grouping: false,
pointWidth:20,
type: 'column',
data: [-27, -15, -350],
yAxis: 0
},{
color:'black',
data: [80,60,99],
yAxis: 1,
type: 'line'
}]
});
To post this question, I need to describe my problem better. So ignore these last lines :/
There is an experimental wrap on Highcharts User Voice - multiple axis alignment control. It was written some time ago but it still works.
The wrap:
/**
* Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis
* will be computed first, then all following axes will be aligned to the threshold.
* Author: Torstein Hønsi
* Last revision: 2016-11-02
*/
(function (H) {
var Axis = H.Axis,
inArray = H.inArray,
wrap = H.wrap;
wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
var chart = this.chart,
primaryAxis = chart[this.coll][0],
primaryThreshold,
primaryIndex,
index,
newTickPos,
threshold;
// Find the index and return boolean result
function isAligned(axis) {
index = inArray(threshold, axis.tickPositions); // used in while-loop
return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
}
if (chart.options.chart.alignThresholds && this !== primaryAxis) {
primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;
threshold = (this.series[0] && this.series[0].options.threshold) || 0;
primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);
if (this.tickPositions && this.tickPositions.length &&
primaryIndex > 0 &&
primaryIndex < primaryAxis.tickPositions.length - 1 &&
this.tickAmount) {
// Add tick positions to the top or bottom in order to align the threshold
// to the primary axis threshold
while (!isAligned(this)) {
if (index < primaryIndex) {
newTickPos = this.tickPositions[0] - this.tickInterval;
this.tickPositions.unshift(newTickPos);
this.min = newTickPos;
} else {
newTickPos = this.tickPositions[this.tickPositions.length - 1] + this.tickInterval;
this.tickPositions.push(newTickPos);
this.max = newTickPos;
}
proceed.call(this);
}
}
} else {
proceed.call(this);
}
});
}(Highcharts));
All you need to do is set alignThresholds in chart options.
Highcharts.chart('container', {
chart: {
alignThresholds: true
},
live example: http://jsfiddle.net/f3urehs0/
I have some error while exporting the chart. I am using the exporting.js from Highcharts
Export PNG, JPEG, PDF received the below error.
Export SVG ok. But can't see the image.
Oops..,
Something went wrong while converting. recveived error from phantomjs:ERROR: While rendering, there's is a timeout reached
function renderChartPie(divId, chartType, chartTitle, chartCriteria, chartData, categories) {
var data = jQuery.parseJSON(chartData);
var cat = jQuery.parseJSON(categories);
var options = createOptionPie(divId, chartType, chartTitle, chartCriteria, cat);
options.series = [{
data : data
}];
var chart = new Highcharts.Chart(options);
}
function createOptionPie(divId, chartType, chartTitle, chartCriteria, categories) {
var options = {
colors : [ '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
'#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a',
'#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
'#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ],
chart : {
renderTo : divId,
type : chartType,
events: {
load: function() {
var text = this.renderer.text('<br/>' + chartCriteria, 0, 445).css({
fontSize : 9
}).add();
var image = this.renderer.image('../../theme/50x71.png', 630, 409, 70, 51)
.add();
}
}
},
credits : {
enabled : false
},
legend : {
align: 'right',
verticalAlign: 'middle',
layout : 'vertical'
},
title : {
text : chartTitle
},
tooltip: {
formatter: function() {
return this.point.name +': '+ Highcharts.numberFormat(this.y,0) ;
}
},
xAxis : {
categories : categories
},
yAxis: {
},
plotOptions: {
pie: {
allowPointSelect : true,
showInLegend : true
}
},
series : []
};
return options;
}
The problem with timeout, because calling function (export) is limited. If problem will still appear, please prepare your own exporting server. Instructions are available here: http://www.highcharts.com/component/content/article/2-news/56-improved-image-export-with-phantomjs
In a project, I'm using something very similar to this fiddle: http://jsfiddle.net/Z3vhg/
The code for this dynamically updating data-grouped columns chart is the following:
$('#container').highcharts('StockChart', {
chart : {
type: 'column',
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.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
yAxis: {
offset: 30
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Random data',
dataGrouping: {
groupPixelWidth: 60
},
data : (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for( i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
The problem can be observed in the fiddle above: as the data updates and adds new points, the first point on the x axis is shifted, but since data grouping is used, the column remains there but gives the impression that the first column value is actually changing...
Any help appreciated, as it may be a weird combination issue.
Am trying to plot Spline graph using data fetched from MySQL.
<script>
var chart;
function requestData()
{
$.ajax({
url: 'get_hourly_data.php',
datatype: "json",
success: function(data)
{
chart.series[0].addPoint(data);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Response time (ms)',
margin: 80
}
},
series: [{
name: 'Time',
data: [],
}]
});
});
</script>
get_hourly_data.php
<?php
// Query to fetch half an hour data from current time
$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";
$result = mysql_query($query,$db);
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
$response_time = $item['response_time']*1;
$ret = array($current_time, $response_time);
echo json_encode($ret);
}
?>
My JSON data looks like this
[1357536877000,0.012178182601929][1357536881000,0.0123610496521][1357536891000,0.011971950531006][1357536895000,0.011821985244751][1357536916000,0.010467052459717]
If I limit only one return value by replacing query mentioned below in get_hourly_data.php am able to plot graph with one value but not for group of values. Requirement is to fetch half an hour data from now and plot spline chart.
$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2' limit 1";
I suppose am doing something wrong when adding server data to graph .Probably after jQuery success function .Am first time stackoverflow user and new to jQuery. Could someone please guide me?
Posting code which works perfectly.
<script>
var chart;
function requestData()
{
$.ajax({
url: 'get_hourly_data.php',
datatype: "json",
success: function(data)
{
chart.series[0].setData(data);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Response time (ms)',
margin: 80
}
},
series: [{
name: 'Time',
data: [],
}]
});
});
</script>
get_hourly_data.php:
$ret = array();
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
$response_time = $item['response_time']*1;
$y = rand(0, 100);
$ret[] = array($current_time, $response_time);
}
echo json_encode($ret);
You are echoing inside the while loop. You need to create an array of array for the data.
You need your JSON to look like
[[1357536877000,0.012178182601929],[1357536881000,0.0123610496521],[1357536891000,0.011971950531006],[1357536895000,0.011821985244751],[1357536916000,0.010467052459717]]
Something like this may work
$dataArr=new array();
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
$response_time = $item['response_time']*1;
$dataArr[] = array($current_time, $response_time);
}
echo json_encode($dataArr);
$query = "SELECT UNIX_TIMESTAMP(current_ts) * 1000, response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";
$dataArr = new array();
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)'];
$response_time = $item['response_time'];
$dataArr[] = array($current_time, $response_time);
}
echo json_encode($dataArr);
On success function
success: function(data)
{
data = jQuery.parseJSON(data);
chart.series[0].addPoint(data);
}