Using C3.js, I am trying to generate a graph whose x-axis is a linear list of kilometres, and y-axis is the corresponding time - in format MM:SS.
The best I have been able to generate is the result of the below, which is the reverse of what I'm looking for. This produces a graph with times on the x-axis and kilometres on the y-axis. Could anyone advise how I could convert the below to a generate a graph with the x-axis KMs, and y-axis times. Thank you.
var km_chart = c3.generate({
"data": {
"x": "time",
"y": "kms",
"columns": [
["time", "04:00", "04:00", "04:15", "04:30", "04:15"],
["kms", 1, 2, 3, 4, 5]
]
},
"axis": {
"x": {
"type": "category"
}
},
"bindto": "#km_chart"
});
The simpliest solution would be to rotate your graph with:
"axis":{
<your stuff>
rotate: true
}
The y-axis is only accepting values, so you can switch your x/y-axis with rotate or you have to convert your time into some value. You could use 1234 as 12:34 for example.
Related
I wanted to know if it is possible to make highcharts tick lines point inwards rather than outwards? I didn't see any obvious setting in the API.
But this is quite typical in scientific plots.
So I would like that the tick markers should go upwards instead of downwards?
Thanks
You can achieve it by setting xAxis.tickPosition = 'inside':
Highcharts.chart('container', {
xAxis: {
tickPosition: 'inside'
},
series: [{
data: [
439,
525,
571,
696,
970,
119,
137,
154
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/8earkyLp/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickPosition
I am currently working on some flot graphs that display single and multiple sets of data relating to time. Below is an example image of a single set of data on the graph.
Single data set
A date time picker allows a user to compare two time ranges where the second data set draws over the initial set. The issue I'm having is that when the second dataset is drawn over the first the whole graph shifts upwards revealing a large white space where the hidden ticks should be, see the example image below.
Multiple dataset
As you can see the data sets are different time ranges therefore can't be on the same axis as they are a comparison. Here's my options for the axes.
xaxes: [{
tickColor: "#fff",
mode: "time",
timeformat: timeFormat,
minTickSize: tickSize,
font: {
style: "normal",
color: "#666666"
},
axisLabel: xLabel,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 11,
axisLabelColour: "#666666",
axisLabelFontFamily: 'Open Sans',
axisLabelPadding: 20
},
{
ticks: [],
mode: "time",
timeFormat: timeFormat
}],
applying the option show: false on the second xaxis removes the shifting completely however because it is false my tooltips for the graph points are also removed.
I m using flot.time, flot.tooltip and flot.axislabels if needed to know.
This is my first question so any feedback would be great :)
My example on JSFiddle.
It all comes down to 2 main changes. Assign your compare graph data to second x-axis:
var dataSet = [{
data: [
[1467669600000, 12],
[1467709200000, 14]
],
label: 'data1',
xaxis: 1
}, {
data: [
[1467583200000, 15],
[1467622800000, 13],
[1467662400000, 16]
],
label: 'data2',
xaxis: 2
}];
For aesthetics, you should hide the second x-axis, so it won't mirror the same hours (set show: false)
{
"show": false,
"mode": "time",
"timeformat": "%H:%M",
"tickSize": [2, "hour"],
"min": 1467583200000,
"max": 1467666000000,
"timezone": "browser"
}
I want to overlay two datetime x-axis which are not from the same daterange but have the same number of points (point index x from series 1 should be next to point index x from series 2).
I tried to achieve this with two x-axis where one being hidden.
I basically seems to work but the bars only align at certain zoom levels.
Zoomed-In:
Zoomed-Out:
Here is a jsfiddle with the settings I tried:
"xAxis": [{
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
visible: false
}, {
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
}
I think you want to use categories - that way you will get points axis evenly spaced, take a look: http://jsfiddle.net/8wahvryx/2/
"xAxis": [{
"type": "category",
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
}, {
"type": "category",
visible: false
}]
And if you don't want to change your data format, you can override keys from array (by default it is [x, y]) to support names:
plotOptions: {
column: {
keys: ['name', 'y']
}
},
Note: In categorised axis, point.name is used as category name below the point. Use xAxis.labels.formatter or xAxis.labels.format to change timestamps to hours.
The solution from #pawel fus might work in most cases, unfortunately did not for for me.
I ended up using the exact same values for the x-axis of both series and only set a different name for each value.
JS FIDDLE
I am using ChartJs http://www.chartjs.org/ in my project.
While using Line Chart, I populate data with numbers. The requirement is to convert the numbers to lacs/crores.
When I convert the numbers to lacs/crores & apply these values to the Chart, the Chart doesn't display any lines, but i can see the actual data converted in lacs/crores as a tooltip.
var lineChartData = {
"datasets": [{
"data": [
numConvertion(10000000),
numConvertion(12000000),
numConvertion(18000000),
numConvertion(22000000)],
"pointStrokeColor": "#fff",
"fillColor": "rgba(220,220,220,0.5)",
"pointColor": "rgba(220,220,220,1)",
"strokeColor": "rgba(220,220,220,1)"
}],
"labels": [
"Jun-2015",
"July-2015",
"Aug-2015",
"Sep-2015", ]
};
How to solve this issue for displaying numbers in lacs/crores format in chart.js?
You should use the chart's scaleLabel option to format your Y axis label. I have updated the jsfiddle
I am trying to create a fiddle, mocking up the image attached
in following jsfiddle
http://jsfiddle.net/2TuCW/162/
The problem is I want the plotLines between blue line and green column.
I tried changing the zIndexes of plotLines (10) , between blue line (15) and green column (5) in following fiddle
http://jsfiddle.net/2TuCW/163/
//plotLines zIndex
"plotLines" : [
{
"color": '#E5E7EB',
"zIndex": 10,
"width": 2,
"value": 20
},
....
....
//Series data z-index
"series": [{
"type":"column",
"data": [35,39,49,50,57,58],
"zIndex":5
....
....
"series": [{
"type":"line",
"data": [35,39,49,50,57,58],
"zIndex":15
But it is not working as expected. Please suggest how to achieve it.
It is related with fact that all series have the same zIndex.
Related topic: https://github.com/highslide-software/highcharts.com/issues/3321
Try to adjust the values of the plotLines.
If you want a plot line to be between blue line and green column the value of the plotLines has to be between the data of blue line and data of column.
Unfortunately, it seems that plotLines can either be in front of all series or behind all series. This is because all series are grouped under a common element. A plotLine element is a sibling to the group element, not a sibling to the individual series elements.
This issue relates to the fact that all series are drawn within the same group, and therefore have the same z-index related to other groups. A related GitHub issue has discussion and code examples.
See this one example solution, proposed by Torstein Hønsi (Highcharts creator). I've made a modified, minimal, reproducible example here:
/**
* Plugin to allow plot band Z indexes in between series
*/
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
var chart = this.axis.chart;
proceed.call(this);
if (!chart.seriesGroup) {
chart.seriesGroup = chart.renderer.g('series-group')
.attr({ zIndex: 3 })
.add();
}
if (this.svgElem.parentGroup !== chart.seriesGroup) {
this.svgElem
.attr({ zIndex: this.options.zIndex })
.add(chart.seriesGroup);
}
return this;
});
Highcharts.chart('container', {
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 3.5,
zIndex: 10
}]
},
series: [{
data: [7988, 12169, 15112, 22452, 34400, 34227],
zIndex: 9
}, {
data: [8105, 11248, 8989, 11816, 18274, 18111],
zIndex: 11
}]
});
The code uses Torsteins plugin to allow the plotline in between series. See the GitHub issues for discussion on caveats and potential improvements.