I am attempting to add a HighCharts chart to my app using the 'rallychart' component. The chart I am looking to recreate can be seen here:
http://jsfiddle.net/sdWr3/
It uses a combination of 'line' and 'columnrange' elements to achieve the desired effect. I can get both types of charts to render separately using the 'rallychart' by setting the configuration as follows:
chartConfig:
chart : {
type : 'line' //Or 'columnrange'
}
}
If I do not specify this setting, and instead specify the chart type in the series object, like I have in the previous example, I get the following error message when trying to render the chart:
I'm not sure if there is an error in my configuration, or if this could perhaps be a problem with the component itself.
I submitted a bug. A simplified code, that does not use a combination of chart types, but only columnrange still returns the same error if type: 'columnrange' is set in the series. It works if it is set
chartConfig: {
chart:{type: 'columnrange'}
}
but that does not help in the case when we want a mixed type chart. When I tested a different type in the series, e.g. column, it worked, which seems to indicate that this issue does not affect all types.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this._makeChart();
},
_makeChart:function(){
var _series = [
{
type : 'columnrange',
name : 'Range',
data : [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
],
pointWidth: 4
}
];
this.add(
{
xtype: 'rallychart',
viewConfig: {
loadMask: false
},
id: 'chart',
chartConfig: {
//chart:{type: 'columnrange'}
chart:{}
},
chartData: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: _series
}
});
}
});
There is another detail. Notice that I set categories inside chartData, and not in xAxis. See in source that chartConfig.xAxis.categories is overwritten:
chartConfig.xAxis.categories = this.chartData.categories;
If it is not defined in chartData, but defined in chartConfig.xAxis, the values in xAxis will have not effect.
Related
I'm trying to allow X axis label overlapping on a column chart in HighCharts but it doesn't seem to 'take'. In the API, it seems to say this should be done as follows:
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December','January2', 'February2', 'March2', 'April2', 'May2', 'June2', 'July2', 'August2', 'September2', 'October2', 'November2', 'December2','January3', 'February3', 'March3', 'April3', 'May3', 'June3', 'July3', 'August3', 'September3', 'October3', 'November3', 'December3'],
labels: {
allowOverlap: true,
}
},
It seems simple enough but it doesn't seem to be working for me. Is this a bug or is there some other setting needed?
https://jsfiddle.net/khfyxLq1/
Thank you!
David
To show all of the categories you need to also set step to 1.
xAxis: {
categories: [...],
labels: {
allowOverlap: true,
step: 1
}
}
Live demo: https://jsfiddle.net/BlackLabel/gc2hetpj/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.step
I am trying to plot a chart with only two data points from a CSV file that holds many more data points with a datetime x-Axis.
In the end the user should be able to compare two years of his choice out of the whole dataset.
From the API documentation I know that I can pick a range of data points from a CSV with startRow and endRow:
https://api.highcharts.com/highcharts/data.startRow
But that would only plot one specific point, as you can see in my fiddle.
Is there any other way to programmatically show specific points?
Highcharts.chart('container', {
chart: {
type: 'column',
polar: false,
},
title: {
text: ''
},
subtitle: {
text: ''
},
data: {
csv: document.getElementById('csv').innerHTML,
startRow: 3,
endRow: 4,
googleSpreadsheetKey: false,
googleSpreadsheetWorksheet: false
},
series: [{
name: 'val'
}],
yAxis: [{
title: {
text: ''
},
opposite: true,
labels: {
align: 'right',
reserveSpace: true
}
}],
xAxis: [{
type: 'datetime',
opposite: false
}],
pane: {
background: []
},
responsive: {
rules: []
},
legend: {
title: ''
},
plotOptions: {
series: {
animation: false
}
}
});
Edit:
I forgot to mention, that i only want to load the CSV once. After that the user should be able to select/update data points without reloading the data.
For showing ranges of values dynamically, I used Axis min and max settings like this:
$(this).highcharts().update({
xAxis:{
min: Date.UTC(selectedStart,0,0),
max: Date.UTC(selectedEnd,11,31)
}
});
The whole dataset is loaded once and the chart axis gets updated on user interaction.
Now I am looking for something similar just not for a range but a comparison of two values off of the whole dataset.
Highcharts data module provides a function called parsed that allows you to modify the fetched data programmatically before it's applied to the chart.
From Highcharts API (https://api.highcharts.com/highcharts/data.parsed):
parsed: function
A callback function to access the parsed columns, the
two-dimentional input data array directly, before they are
interpreted into series data and categories. Return false to stop
completion, or call this.complete() to continue async.
Live demo: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/parsed/
I made a barchart with dates. Currently, to remove the dates, you must click on the dates in the legend. I wish delete multiple dates at once.
Let's take an example. My dates range from 1960 to 2015. If I would have on my chart the dates from 2000 to 2005, so I would like that if you click on 1960 and 1999, then all the dates between are deleted / hidden. It goes faster when many dates.
How to do ?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
colors:[
'#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#2b908f',
'#f45b5b',
'#91e8e1',
'#DA70D6',
'#1E90FF',
'#E0F000'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
categories: [
'',
],
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2004',
data: [49.9],
},
{
name: '2005',
data: [83.6]
},
{
name: '2006',
data: [48.9]
},
{
name: '2007',
data: [69.1]
},
{
name: '2008',
data: [83.6]
},
{
name: '2009',
data: [40.9]
},
{
name: '2010',
data: [69.9]
},
{
name: '2011',
data: [83]
},
{
name: '2012',
data: [28.9]
},
{
name: '2013',
data: [40.9]
},
{
name: '2014',
data: [81.6]
},
{
name: '2015',
data: [24.9]
},
{
name: '2016',
data: [46.4]
}]
});
});
Thanks
Rather than having each year as its own series, I would recommend that you place the years as the values in your x-axis (as categories) and then use Highcharts' native zoom function to allow users to select a certain date range.
I've updated your fiddle with some changes, which I explain below: https://jsfiddle.net/brightmatrix/hr28s27L/
First, in your chart option, I added zoomType: 'x' to allow users to use their mouse to zoom in on specific years. The value x means they can only zoom horizontally (across), which makes for a "cleaner" interaction.
chart: {
type: 'column',
zoomType: 'x'
},
Second, I updated your x-axis with the years as the categories/values:
xAxis: {
categories: ['2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
},
Lastly, I updated your series to show just the data points, which are then plotted on the y-axis:
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4]
}]
Here is what happens when a user clicks and drags their mouse cursor:
The shaded box is what they are selecting. Once they release the cursor, the chart will automatically adjust to show only what they chose. A "Reset Zoom" button will appear at the top right to allow them to go back to all years:
Update (July 19, 2016): I did some research on adding a simple slider element to this chart that allows users to choose from a range of years.
An updated version of my fiddle that shows this example chart with sliders can be found here: https://jsfiddle.net/brightmatrix/uvat8u05/.
The code to handle the sliders is shown below. I discovered that explicitly setting the slider values to integers using the parseInt() function solved a couple of problems:
You can correctly compare the slider values to make sure users can't choose an end year that is earlier than the start year.
The setExtremes() function correctly shows a single year when users choose the same start and end year.
All x-axis labels are shown at all times. Before I added parseInt(), some labels disappeared when users chose different values in the sliders.
Please be sure to read the comments I've left in both the HTML and Javascript panes, as I've included additional details on why I made certain code decisions.
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// convert the slider values to integers to make sure setExtremes() works as expected
var slider1Val = parseInt($('input[name="slider1"]').val());
var slider2Val = parseInt($('input[name="slider2"]').val());
if (slider2Val < slider1Val) {
// warn the user if they try to choose an end year that is later than the start year
alert("You can't choose an end year that is earlier than your start year.");
} else {
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes(slider1Val, slider2Val);
}
});
I hope this information is helpful for you.
I am trying to write a script that produces a col chart. The data is from an MySQL query that produces the following array content:
97.2,63.9,33.4,28.9,325.2,114.9,46.1,56.7,104.9,4.5,42.2,56.4,10.5
When I run the script I get an error:
SyntaxError: missing ] after element list
I have tracked down to where I thik the error is but can not see whats wrong.
Inside the jQuery function I have an PHP echo statement which populates the $data variable with the data, $data[] = $row_An['AValue'];.
The values are correct as seen in FireFox dev console. Can anyone see why I am getting the error.
$(function () {
<?php
$data[] = $row_An['AValue'];
?>
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'AN'
},
xAxis: {
categories: ['Inbound', 'Outbound', 'InService']
},
yAxis: {
title: {
text: ''
}
},
series: [{
data: [97.2,63.9,33.4,28.9,325.2,114.9,46.1,56.7,104.9,4.5,42.2,56.4,10.5],
pointStart: 0,
pointInterval
}]
});
});
Many thanks in advance
what's value in pointInterval ? its wrong to leave that without any value
series: [{
data: [97.2,63.9,33.4,28.9,325.2,114.9,46.1,56.7,104.9,4.5,42.2,56.4,10.5],
pointStart: 0,
pointInterval //here is error you should provide value or remove it
}]
Also, these two properties PointInterval and PointStart are part of plotOptions.series
your number of categories don't match with number of data points ,correct them
categories: ['Inbound', 'Outbound', 'InService']
The API doesn't show a proper example how to use connectNulls property. I had a few attempts but no luck. Here is what I have:
Attempt 1:
plotOptions :
{
line: { connectNulls : true}
},
This results in: TypeError: Cannot read property 'x' of undefined
Attempt 2:
plotOptions :
{
series:
{
gapSize: null,
line: { connectNulls : true}
}
},
This doesn't give me any errors, so I assume this is closest to be the correct way, however nothing changes: the points from either side of null points are not connected.
Can anyone share a code snipped that shows the correct way of doing it?
The highcharts API has two examples for the connectNulls property: one for true, and one for false.
http://api.highcharts.com/highcharts#series.connectNulls
The true example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-true/
A snippet from the true example:
plotOptions: {
series: {
connectNulls: true
}
},
The false example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-false/
A snippet from the false the example:
plotOptions: {
series: {
// connectNulls: false // by default
}
},
The default of false is a thoughtful choice, because when you connect values when there is no data, the results can lead to false assumptions on the part of the viewer of the chart.
UPDATE
Here's a Highstock example:
$(function() {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
connectNulls: true,
data : [
[1112832000000,43.56],
[1112918400000,43.74],
[1113177600000,41.92],
[1113264000000,null],
[1113350400000,null],
[1113436800000,37.26],
[1113523200000,35.35],
[1113782400000,35.62],
[1113868800000,37.09],
[1113955200000,35.51],
[1114041600000,37.18],
[1114128000000,35.50],
[1114387200000,36.98],
[1114473600000,36.19],
[1114560000000,35.95],
[1114646400000,35.54],
[1114732800000,36.06]
],
tooltip: {
valueDecimals: 2
}
}]
});
});