EDIT: Here's a fiddle, thanks to JordanD for getting it displaying something:
jsfiddle.net
EDIT(2): From what I can tell, this is how a single series chart displays. Adding a second series (a second element in the data array) causes the chart to display as I expected it to, but with one series, it is basically centered instead of justified. Therefore, it's not 'broken', it just doesn't behave as I expected it to.
The data series is in the form of an array of objects in the form of:
name: 'string'
data: ['array', 'of', 'data']
As can be seen in the image, my x-axis categories are displaying as a string. It's being set as
categories: dates
Where dates is an array with an array of dates in the first index. It appears that the only thing displaying in the categories is the first element of the array. Even if I try
categories: ['this', 'is', 'a', 'test']
the only thing that will show is 'this'.
and here is the console log to accompany it with a small sample of the data:
and here is the call to instantiate the chart:
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
What I'm trying to get is for the x-axis labels (and the columns themselves) to be spaced out to take up the full width of the chart.
The problem is that you have 9 series and each point have the same x, so each serie starts on the same tick and you have result which you have.
Solutions:
use one serie and set up a color for each point
use pointStart for each serie
set data as pairs [x,y] but xAxis should be category type.
If I understand your problem correctly an easy fix might be to add a data type to your axis.
type : 'datetime'
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date,
type : 'datetime'
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
Related
Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.
You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis
I am tried to get the series from the already displayed highchart and use that series to plot a new chart in another one html div, i have written below code to achieve this,finally i get the series from existing graph but can't render to the new html div
var data = chart.series; // series from already displyed
jQuery('#commonModal_res').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series: data,
});
note : throwing too many recursion error
The problem occurs because you're trying to assign the complete and already built series object, instead of configuration object which is required. In order to make it work, you need to assign the configuration object by this way:
$('#new_con').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series:charts[0].userOptions.series,
});
Then your chart should be rendered properly.
Additionaly, you can access appropriate chart by the Highcharts.charts array on global Highcharts object, where all charts are stored, just like that:
series: Highcharts.charts[0].userOptions.series,
In this case creating new charts array is unnecessary.
Live example: http://jsfiddle.net/cqfj5t34/
I'm trying to create a chart where the data that I pass to the series.data property exactly match the values that I go to the categories property on the y-axis. I tried to put the data in decimal form but then the spline points did not match the various categories.
Categories for me represents a array of times.
This is my chart:
Highcharts.chart('container', {
chart: {
type: 'spline'
},
yAxis: {
min: 0,
max: 2,
reversed: true,
tickInterval: 1,
categories: ['0:30', '0:40', '1:00'],
},
series: [{
data: [1, 0.4, 0.3]
}]
});
What I would like to do is assign the values [0:30 ',' 0:40 ',' 1:00 '] to series.data property. But unfortunately you can not assign a string type to data.
How can I get around the problem?
Instead of a decimal value, use index of the specific yAxis category to display value in the right place and modify tooltip to display a category value.
API Reference:
http://api.highcharts.com/highcharts/tooltip.formatter
Example:
http://jsfiddle.net/8wefsL70/1
I need to convert this Highcharts.JS chart to C3.JS chart
http://i.imgur.com/iwk3pyO.png
This was the Highcharts.JS code:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.
https://jsfiddle.net/joefclarin/dh5epj0v/
Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:
Instead of
regions: [
{start: 0, end: 1, class: 'red-color'}
]
You need to hack the end value according to how many items are less than 1 in your categories?. You code would be probably like this:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
then in your chart option:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
In your case, fctGetItemLessThan1() - 1 = 9, the result is as follow
I can get the noData overlay working when there are no series data values, and I can get the x-axis displaying along with the noData label by setting a xAxis.max value, but I can't get the x-axis labels displaying.
Any ideas?
Ideally I would be able to do this without any fake series data (as without data I don't have any series names to provide). This is used in a column chart of well defined x values (like in the js fiddle below, with known fruits, where only each series counts are dynamic)
Closest I've been able to get is this jsfiddle:
http://jsfiddle.net/eLdn6Lfc/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
max:3
},
series: [{
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
});
You also need to set min limit to x-axis if there is no data.
Working solution here
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
min: 0,
max: 3
},
series: [{
showInLegend: false,
data: []
}],
lang: {
noData: "No Soup For You!"
},
});