I'm new to Highcharts, and so far have only have had success getting my test chart to display when it's saved in a seperate .js file. The total highcharts_weight.js code is:
$(function () {
var weightchart = new Highcharts.Chart({
chart: {
renderTo: "weight_chart",
type: 'line'
},
title: {
text: 'weight loss history'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b'
}
},
yAxis: {
title: {
text: 'Weight'
}
},
series: [{
name: 'Weight loss history',
data: [[Date.UTC(2013, 1, 1), 87.2],[Date.UTC(2013, 0, 1), 90.2]]
}]
});
});
That shows up fine on my webpage.
But, if I try putting the code somewhere else, and change the chart name in the .js file, nothing shows up except a blank space where the chart should be.
I've tried putting this code inside brackets in my root header in application.html.erb and inside brackets in the partial I want to use to render this table in, but then nothing shows up. Right now, I have it in application.html.erb, in the header,
<script>
$(function () {
var weightchart = new Highcharts.Chart({
chart: {
renderTo: "weight_chart",
type: 'line'
},
title: {
text: 'weight loss history'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b'
}
},
yAxis: {
title: {
text: 'Weight'
}
},
series: [{
name: 'Weight loss history',
data: [[Date.UTC(2013, 1, 1), 87.2],[Date.UTC(2013, 0, 1), 90.2]]
}]
});
});
</script>
and it does not work. Any ideas?
if you want to run the chart soon after your DOM is constructed then better use
$(document).ready(function() {
chart = new Highcharts.Chart({})
});
this may solve the problem.
Related
I'm fairly new to Highcharts. We were previously using Logi Analytics, which did
a lot of stuff in the background that we had no control over. Now that were trying to re-create the same charts, were running into issues on how to do some of these things. I am trying to use the same data set for multiple series elements. For example, I will have a column chart, then a line chart on top of it. If it helps, I keep this code in a .ts file and compile into JS to deploy. Here's what I currently have that works:
let myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
series: {
events: {
//do something
}
}
},
title: {
text: 'My Title'
},
xAxis: {
categories: dataCategories
},
yAxis: {
title: {
text: 'Percentages'
}
},
series: [
{
name: 'Data Table',
data: data,
cursor: 'pointer'
}
]
});
My data is embedded with Java. Example of data:
let data =
[
{
'location': 'someplace',
'dept': '999',
'deptDescription': '999 DEPT',
'code': '',
'name': 'NO NAME',
'hours1': 32.5,
'hours2': 4.7,
'hours3': 0.0,
'hours4': 0.0
}
];
How I set my yAxis and categories:
for (let row of data) {
row.y = row.hours1;
dataCategories.push(row.deptDescription);
}
I want to use the same data because I have the same x axis and my data contains the new y axis as well. Possibly something like this:
series: [
{
type: 'column'
name: 'Data Table',
data: data,
cursor: 'pointer'
},
{
type: 'line',
name: 'Data Table2',
data: data,
cursor: 'pointer'
}
]
I have been trying to customize an excellent jsfiddle that I was fortunate enough to be directed to in an earlier question here: Switching between many Highcharts using buttons or link text
I am very new to javascript programming (and highcharts also) and I am having some difficulties in retrieving my own data from a database. Currently I have set up my charts like the following:
$('chart1').ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'column',
marginTop: 40,
marginBottom: 75
},
legend: {
enabled: false
},
title: {
text: 'Revenues',
x: 25 //center
},
xAxis: {
title: {
text: ''
},
categories: []
},
yAxis: {
showInLegend: false,
tickAmount: 11,
endOnTick: false,
startOnTick: true,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '.', ',');
}
},
title: {
text: '<?php echo $unitCurr; ?>'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
}
},
series: []
}
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
At the bottom you will notice that I am using JSON to retrieve information from my database and everything works just fine. In my earlier question I was asking about how to switch charts using buttons instead and was directed to the following jsfiddle: http://jsfiddle.net/jlbriggs/7ntyzo6u/
This example consists of 3 charts but I have just been trying to manipulate the first chart in order to find out if I could make my own data display instead of the random data that is being generated:
var chart,
chartOptions = {},
chartData = {};
chartData.chart1 = randomData(25);
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
But no matter how much I tried, I just can't seem to change the "data: chartData.chart1" in such a way that it retrieve the arrays I get from my $.getJSON function. Can any of you help me explain why, for instance, the below code doesn't work?. Here I try to exchange the ChartData.chart1 array for my database data. I'm not experienced enough to tell whether its the whole random number generation part of the code that prevents it from working or if it's my understanding thats severely lacking. (I have made sure that the data from data.php is indeed available, since I can display it in a normal array when I try).
var chart,
chartOptions = {},
chartData = {};
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartData.chart1 = json[6]['data'];
});
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
Any assistance you can provide will be greatly appreciated!
You're actually very close to something that will work. Your problem is related to the timing of async calls relative to inline code, and also the way assignments work in javascript.
As a quick example, here's some code:
x = {foo:5};
y = x.foo;
x.foo = 9;
At the end of this, x.foo is 9, but y is still 5.
Your line of code
chartData.chart1 = json[6]['data'];
doesn't execute until after the call to the server completes; it's contained within a call back function. However, this section of code
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
executes immediately. See the problem? You've cooked the current value of chartData.chart into chartOptions.chart1 BEFORE the server call has completed. That's why you're not seeing your data.
Instead, try something like this:
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: []
}]
};
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.series[0].data = json[6]['data'];
});
Now when your data comes back, you're putting it into the object that is actually being used to render the chart (once you click on the right button). Keep in mind that it's going to be empty until the server call completes.
I render a chart using highcharts the x-axis is of 'datetime' type . When I have single point in the chart the x-axis label is shown as 00:00:00:0000 instead of ('18 Nov') the given date value.
This seems to happen in highcharts version 3.0.1 where as not in 3.0.7
I did found an issue here https://github.com/highslide-software/highcharts.com/issues/1572
But in case of datetime type for x-axis how can I fix this?
Is there any workaround without upgrading to latest version because that would involve verifying all other charts, which is not possible for now in my case.
Code:
var data1 = Date.UTC(2013, 10, 18);
var a = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
width: 600,
height: 400
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
}
}
},
series: [{
name: 'Total Points Estimated',
data: [[data1,0]]
}],
title: {
text: 'Release Burn-Up report'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
gridLineDashStyle: 'shortdot',
title: {
text: 'Date'
},
},
yAxis: {
gridLineDashStyle: 'shortdot',
min: 0,
title: {
text: 'Backlog Effort'
}
}
});
Fiddle link : http://jsfiddle.net/WdDqc/1/
Try to set minRange, for example to one day, otherwise Highcharts won't know what kind of label should be displayed. See docs.
I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Chart Title'
},
subtitle: {
text: 'Chart subtitle'
},
xAxis: {
categories: [<%= GraphDate %>]
,
labels:
{
rotation: -45,
align: 'right',
style:
{
}
}
},
yAxis: {
min: 160,
title: {
text: 'Temp'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 400,
y: 0,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' +
this.x + ': ' + this.y + ' ºC';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:
[<%= GraphSeries %>],
});
I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?
series: [{
color: 'yellow',
data: [
[<%= GraphSeries %>]
]},
Edit:
$(document).ready(function () {
chart = new Highcharts.Chart({
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
}
Top level config can contain colors field. It's an array from which series colors will be picked.
See here.
Here's working piece from my project
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart:{
renderTo:'perfchart',
type:'line',
marginRight:130,
marginBottom:25
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
title:{
text:'Historical system performance',
x:-20 //center
},
Appearance:
See the code (and the plot that it renders) below.
The snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.
Colors is a Chart object so the easiest way is to pass an array of colors (as hex strings):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'],
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
series: [{
name: 'series I',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
},
{
name: 'series II',
data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
}
]
});
});
})
The color can be configured as part of the series. Try something like this:
series: [
{
name: 'series I',
color: '#ffffff',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
}
];
I'm using the HighStock stock charting library to generate a basic OHLC stock chart. I want to perform some action when the chart is generated (and after it's regenerated by changing the displayed time frame). I'm trying to do this using the plotOptions.ohlc.events.show event (documentation).
The problem I'm having is the even isn't firing at all. If I follow the example for the click event, the alert fires correctly when I click the series.
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'divChart',
height: 450
},
rangeSelector: {
selected: 2
},
xAxis: {
maxZoom: 14 * 24 * 3600000
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 250,
height: 100,
offset: 0,
lineWidth: 2
}],
title: {
text: 'Stock Chart'
},
series: [{
type: 'ohlc',
name: 'Prices',
id: 'prices',
data: ohlc
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1
}],
// The event I am trying to bind to
plotOptions: {
series: {
events: {
show: function () {
alert("show");
}
}
}
}
});
Is this the correct way to fire an event when the chart is redrawn?
If so, why isn't the event firing, and how do I fix it?
Change the chart part to something similar
chart: {
renderTo: 'container',
events: {
redraw: function(){ // or load - refer to API documentation
alert('Chart Loaded');
}
}
},
They've got a nice API browser - might come in handy
http://www.highcharts.com/ref/#chart-events--load