I have tried several times using other examples available but still no luck
here's the code https://jsfiddle.net/mrbfqay6/
P.S: you just need to add a random amount in first input field and then click submit to generate graph. Thanks
function renderChart(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 20,
events: {
load: function() {
// nothing to do here right now
}
}
},
title: {
text: 'Some random data'
},
xAxis: {
tickPixelInterval: 50
},
yAxis: {
title: {
text: 'Value'
}
},
exporting: {"enabled":true},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
}, plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: ' Amortization',
data:amort_data,
}
,{
name: 'Saving',
data: wow_saving,
stack:'wow'
},
{
name: 'Financing',
data: lease_data,
stack: 'wow'
}
]
});
}
You have defined options for exporting twice:
chart = Highcharts.chart({
exporting: {
"enabled": true
},
...,
exporting: {
enabled: false
},
...
});
Which results in disabled exporting. You just need to enable it.
Live demo: https://jsfiddle.net/BlackLabel/na5rc2s9/
API Reference: https://api.highcharts.com/highcharts/exporting.enabled
Related
in my code im trying to display all the enrolled students per year and i want to summarize them all in 1 column per year.
is there anyway to add filter or most likely in the code itselft to combine all the data per year?
var strCampus = "ORT";
$(function() {
$.getJSON("http://localhost:37590/Get_OGSData/" + strCampus, function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
rangeSelector: {
selected: 1
},
title: {
text: 'On Going Students per Year'
},
subtitle: {
text: 'Click each column to see details'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.YEAR;
})
},
yAxis: {
title: {
text: 'On Going Students'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
//format: '{point.y:.1f}'
}
}
},
tooltip: {
enabled: false,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.OGS * 1;
})
}]
});
});
});
i want to combine all the data per year in 1 column
You can use dataGrouping with options below:
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['year', [1]]
]
}
Live demo: http://jsfiddle.net/BlackLabel/me3Lzur6/
API reference: https://api.highcharts.com/highstock/series.column.dataGrouping
I would like to make the transition from pre-version 5.0.0 Highcharts and highcharts-ng version 0.0.12 to the latest versions.
I know there are some critical changes in the chart object, as well as with how highcharts-ng works in the latest versions. I have been searching for an example on how to set my Angular environment up using these latest versions, but it seems there is a great shortage on resources using these versions.
I was hoping you could help me with setting this up.
I have tried numerous changes myself, but I keep getting errors I did not get with the older versions of the scripts. Errors such as:
"Unable to get property of 'series' of undefined or null reference
(at $doCheck
(http://localhost:50262/app/vendorScripts/highcharts-ng.js:51:16))",
"Cannot set property 'getChartObj' of undefined" (at HighChartNGController.$onInit (highcharts-ng.js:36)),
"Multiple definitions of a property not allowed in strict mode (ChartFactory)"
This is my working solution pre-latest versions:
Here is my ChartFactory:
'use strict';
angular.module('portalDashboardApp')
.factory('ChartFactory', function () {
return {
getChartConfig: function () {
return {
options: {
chart: {
type: 'bar',
height: 400,
spacingTop: 30,
spacingBottom: 10,
spacingLeft: 10,
spacingRight: 50,
zoomType: 'x',
backgroundColor: false,
resetZoomButton: {
position: {
x: 0,
y: 40
}
}
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
y: -30
}
},
tooltip: {
formatter: function () {
return '<b>' + this.y + ' ' + this.series.name + '</b>';
}
},
plotOptions: {
column: {
stacking: ''
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
},
showInLegend: true
},
series: {
animation: true,
point: {
events: {
click: function () {
}
}
},
dataLabels: {
enabled: true,
format: ''
}
}
},
exporting: {
sourceWidth: 1600,
sourceHeight: 800,
// scale: 2 (default)
chartOptions: {
subtitle: null
},
buttons: {
contextButton: {
text: 'Export Chart'
}
}
}
},
title: {
text: false
},
xAxis: {
type: 'category'
},
yAxis: {
gridLineWidth: 1,
title: {
text: 'Count'
},
labels:
{
enabled: true,
format: '{value}'
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
series: [{}],
loading: false
};
}
};
});
This is how I would create a chart in my Angular controller:
I would inject my ChartFactory
Get my data from mt API call
And then set up, customize and apply my data for my chart using these methods:
function volumeGraphConfig(timeline_data, time_trend) {
$scope.VolumeGraphChartConfig = ChartFactory.getChartConfig();
$scope.VolumeGraphChartConfig.chart.type = 'column';
}
function populateVolumeData(timeline_data, time_trend) {
$scope.VolumeGraphChartConfig.xAxis.categories = timeline_data;
$scope.VolumeGraphChartConfig.series = [{
name: 'Twitter',
data: time_trend.Twitter,
color: twitterColor
}, {
name: 'Instagram',
data: time_trend.Instagram,
color: instagramColor
}, {
name: 'Youtube',
data: time_trend.Youtube,
color: youtubeColor
}];
$scope.VolumeGraphChartConfig.tooltip = {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <strong>{point.y}</strong> mentions<br/>',
shared: false
};
}
I would then display my chart using this HTML div:
<highchart id="FacebookVolume" config="volumeGraphChartConfig"></highchart>
How can I change this to work with the latest versions? Thank you!
The first two errors:
Cannot set property 'getChartObj' of undefined
Unable to get property of 'series' of undefined or null reference
happen when your config object is undefined.
For your case, you need to use the same variable you declared on your $scope
<highchart id="FacebookVolume" config="VolumeGraphChartConfig"></highchart>
(capital V)
I am using HighCharts to make a graph with columns, drilldown series and scatter. The problem which I am having, is that the HighChart is created before the $.getJSON function is succesfully exicited. I have found several other articles, but non yet where two $.getJSON functions are called. The code which I am using:
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container_genomefraction',
type: 'column',
events: {
// Declare the events changing when the drilldown is activated
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
},
title: {text : "Gbp"}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
// Declare the events changing when the drillup is activated
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
},
title: {text : "Percentages"}
}, false, false);
}
}
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: [{
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},{
min: 0,
title :{
text : 'input'
},
labels: {
format : '{value}'
},
opposite: true
}],
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null, // inherit from series
size : 50
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
// Declare an empty series
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
// Declare an empty drilldown series
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
// Your $.getJSON() request is now synchronous...
$.ajaxSetup({
async: false
});
// Get the input into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
// Get the drilldown estimated and total size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
$.ajaxSetup({
async: true
});
});
My JSONs are formatted:
fraction.json
[{"name":"1","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3}]},{"name":"input","dataLabels":"{enabled,false}","yAxis":1,"type":"scatter","data":[{"y":38,"name":1,"drilldown":1},{"y":"","name":2,"drilldown":2},{"y":27,"name":3,"drilldown":3}],"tooltip":{"headerFormat":"<span style='font-size:11px'>{series.name}<\/span><br>","pointFormat":"<span style='color:{point.color}'>{point.name}<\/span>: <b>{point.y}<\/b><br\/>"}}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]}]
When the page is loaded, the graph displays the values of the previous search done and when I reload the page, the correct data is shown. Could someone please help me out?
Add the second getJSON method in the first getJSON success callback like this:
//Get the genome fraction into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
//Get the drilldown estimated and total genome size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
I'm trying to put two Rally charts inside a container to have a control over their layout. Unfortunately, for some reason, it doesn't work.
Plase see the code (the full HTML provided for convinience):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
launch: function () {
//Write app code here
var me = this;
me._createAtTheStartAddedChart();
me._createStateChart();
console.log('chart 1', me._atTheStartAddedChart);
console.log('chart 2', me._stateChart);
me._chartContainer = Ext.create('Ext.Container', {
itemId: 'cont',
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'middle'
}
,
items: [
me._atTheStartAddedChart,
me._stateChart
]
});
me.add(me._chartContainer);
},
_createAtTheStartAddedChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
var chart = me._createChart(series);
me._atTheStartAddedChart = chart;
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
var chart = me._createChart(series);
me._stateChart = chart;
},
_createChart: function (series) {
var chart = Ext.create('Rally.ui.chart.Chart', {
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
return chart;
}
});
Rally.launchApp('CustomApp', {
name:"Random App Name42726",
parentRepos:""
});
});
</script>
</head>
<body>
</body>
</html>
The charts are created successfully, but they are not displayed at all. There is no error related to their display, so I don't even know where to look for the issue.
Maybe someone knows how to put the charts horizontally (I don't really need Ext.Container here, any other container will be fine as well)?
There is also an error Uncaught Highcharts error #16: www.highcharts.com/errors/16 (Highcharts already defined in the page), not sure what's the reason for it as well.
I made those charts display - you may see full app and the screenshot showing both pie charts in this repo.
Here is the js file. The main change was where in the code the chart was added to container. I moved that to _createChart function. Highchart error 16 does not prevent the charts from loading. You may eventually create two containers and add the charts to separate containers, but this works in its simplest form:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
items: [
{
xtype: 'container',
itemId: 'mychart',
columnWidth: 1
}
],
launch: function() {
this._createAtTheStartAddedChart();
this._createStateChart();
},
_createAtTheStartAddedChart: function () {
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
this._createChart(series);
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
this._createChart(series);
},
_createChart: function (series) {
var chartDiv = this.down("#mychart");
chartDiv.add({
xtype: 'rallychart',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
}
});
I'm trying to have the correct time on my charts but even if I use the useUTC = false in this code :
success: function(data) {
var options= {
chart: {
renderTo: 'rendu_graph<?=$instance_graph?>',
type: 'spline'
},
global: {
useUTC: false
},
title: {
text: 'Graph des relevés des sondes'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +Highcharts.dateFormat('%d %b %Y %H:%M', this.x)+ ' : ' + this.y;
}
},
series: []
}
All option works fine but i still have the time stamp for 00:00 and hight chart show me 22h00. I'm in a GMT+2 (in real +1 but it's summer time so we have a GMT+1 +1 => GMT+2)
Why is this happening?
You should useUTC like this:
Highcharts.setOptions({
global: {
useUTC: false
}
});