I'm using AmCharts to display a chart. It's a floating bar chart displaying sent out surveys to a user. The bars are representing the openFrom to openUntil time, the time window a user has to submit the survey. They're listed in a timeline. I want AmCharts to understand the x-axis has dates as datatype so I can leverage the date functions (relative spacing, showing change of year bold, scrolling in time etc)
The following data is used to plot the chart as seen in the screenshots:
[{
"survey":"Survey DEF",
"openFrom":"05-04-2016",
"openUntil":"04-05-2016",
"status":"Nog niet geopend.", // translates to Not opened yet
"color":"#ededed"
},{
"survey":"Survey DEF",
"openFrom":"01-01-2016",
"openUntil":"31-01-2016",
"status":"Nog niet geopend.",
"color":"#ededed"
},{
"survey":"Survey GHI",
"openFrom":"06-12-2015",
"openUntil":"31-12-2015",
"status":"Ingestuurd op 07-12-2015", // Translates to Submitted at 07-12-2015
"color":"#27ae60"
},{
"survey":"Survey ABC",
"openFrom":"01-12-2015",
"openUntil":"15-12-2015",
"status":"Geopend, nog geen reactie.", // Translates to Opened, not submitted yet
"color":"#e67e22"
},{
"survey":"Survey GHI",
"openFrom":"31-01-2015",
"openUntil":"05-05-2015",
"status":"Geen reactie ontvangen", // Translates to Not submitted
"color":"#c0392b"
}]
Using this code:
var chart = AmCharts.makeChart('chart-container', {
'type': 'serial',
'dataLoader': {
'url': urlToJSONFetchScript
},
'language': 'nl',
'categoryAxis': {
'position': 'right',
'axisAlpha': 0.2,
'gridAlpha': 0.05
},
'valueAxes': [{
'type': 'date',
'minimumDate': '31-01-2015',
'maximumDate': '04-05-2016',
'axisAlpha': 0.2,
'gridAlpha': 0.05
}],
'categoryField': 'survey',
'graphs': [{
'balloonText': '<div style="text-align: left"><strong>[[survey]]</strong><small><br/>[[openFrom]] - [[openUntil]]<br/>[[status]]</small></div>',
'type': 'column',
'dateFormat': 'DD-MM-YYYY',
'openField': 'openFrom',
'valueField': 'openUntil',
'colorField': 'color',
'lineColorField': 'color',
'fillAlphas': 0.65,
'lineAlpha': 0.95
}],
'rotate': true,
'dataDateFormat': 'DD-MM-YYYY'
});
It get's me this chart:
This all looks good, but I'd like to use parseDates zo the x-axis doesn't have string-labels, but relatively spreads the dates and also displaying year changes. When I add 'parseDates': true to categoryAxis the chart rotates and is rendered all wrong. I've been searching in the API documentation for a while but I can't find any solution. What am I missing?
Result with parseDates set to true in categoryAxis options:
If I understand you correctly, the issue is that you need to display all month labels, as well as the year on January.
For this, you will need to set boldPeriodBeginning: true as well as markPeriodChange: true to display year instead of January label.
To make the chart display all months, you'll also need to disable auto grid by setting autoGridCount: false, as well as set gridCount to some larger number, say 25.
Please note that this is all for Value Axis. Enabling parsing of dates for category axis does not make a lot of sense, since you have arbitrary categories,
like "Survey DEF".
'valueAxes': [ {
'type': 'date',
'minimumDate': '31-01-2015',
'maximumDate': '04-05-2016',
'autoGridCount': false,
'gridCount': 25,
'boldPeriodBeginning': true,
'markPeriodChange': true,
'axisAlpha': 0.2,
'gridAlpha': 0.05
} ]
Here's the live chart with the above changes.
As of V3.18 of JavaScript Charts, it is also possible to make the value axis scrollable. To enable that, use valueScrollbar property of the chart. I.e.:
"valueScrollbar": {
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
}
It's an instance of ChartScrollbar, so you can use any properties available in this class.
Related
I'm using Chartkick and Chart.js to visualize a data set of two lines, however, only the first tick on the x-axis displays
I've tried passing options to the dataset as per the chart.js docs, indicating that I would not like the ticks to auto skip.
<%= line_chart [
{ name: "Successes", data: #successful_requests },
{ name: "Errors", data: #error_requests }
],
dataset:{
scaleShowValues: true,
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
},
legend: "bottom",
messages: { empty: "Awaiting your first request!" }
%>
I expect the chart to show a dataset an x-axis that is labeled at all points on the x-axis.
From the docs:
autoSkip
If true, automatically calculates how many labels can be shown and hides labels accordingly.
maxTicksLimit
Maximum number of ticks and gridlines to show.
The autoSkip option controls whether some of the labels on the axes ticks are automatically skipped when the label texts would otherwise overlap. To control the number of ticks being displayed, what you're looking for is maxTicksLimit and related options. For your use case, you should probably set maxTicksLimit depending on the size of your data sets.
Also, these options can't be set on the datasets directly. Instead, you need to pass them through Chartkick to Chart.js by using the library option. So, something like this should achieve what you're trying to do:
<%= line_chart [
{ name: "Successes", data: #successful_requests },
{ name: "Errors", data: #error_requests }
],
library: {
scales: {
xAxes: [{
ticks: {
maxTicksLimit: #successful_requests.size
}
}]
}
},
legend: "bottom",
messages: { empty: "Awaiting your first request!" }
%>
Note that I'm assuming both your data sets are always of the same length.
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 have the following code which display the line on the chart. I could not able to find how to format the x axis. I would like to show every thousand interval similar to y axis (0,1000,2000,3000,4000, etc). I am using Kendo UI.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
categoryAxis: {
labels: {
step: 1000,
format: "n0"
},
},
series: [{
type: "area",
line: {
style: "smooth"
},
field: "x",
categoryField: "y"
}],
});
}
Here is my fiddle:
http://jsfiddle.net/nDS3S/37/
If I get right, your code doesn't works because the step doesn't really mean that would be shown a label for each 1000, but in fact it will show a label for each serie. So your chart doesn't have 1000 series, that is why only 0 was displayed.
If you change your step to 5, you will see the labels, but displaying the exactly number for that specific serie.
Check this out.
I'm afraid you can't achieve what you want.
I want to add a data label to specific point in the 'Area' chart. I'm using 'Highchart' for making graph. I want a data label in chart design as following image. What should I try ? I tried dataLabel defined in 'line' chart but it applies dataLabel to each point in the chart. I want it to be applied for specific point. Also, it should not show value of that point as a dataLabel but it should show series.name on that point.
For the relevant point in your data use the object notation and enabled data labels. You can use format and formatter to display the desired information.
Example of your series would be:
series: [{
name: 'My series name',
data: [5, 10, 30, 100, 200, 300, 600,
{
y: 900,
dataLabels: {
enabled: true,
format: '{series.name}'
}
},
700, 400, 100]
}]
Or see this more elaborate JSFiddle example.
I know how to disable hover on highcharts, and I edit the answer to disable hove on special slice as this demo, but it doesn't work.
I edit series attribute as the following:
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
{
name: 'Other',
y: 35,
tooltip: { enabled: false }
} // second half of pie
]
How can I disable hover for special slices on pie charts using highcharts ?
You were pretty close with your custom tooltip property idea. I personally rather using custom names as well, therefor instead of adding a tooltip data object, i'd use a custom property named tooltipDisabled:
{name: 'Other', y: 35, tooltipDisabled:true} // second half of pie
And then, using a tooltip formatter function (a callback function called when a point is hoverd, which is totally override-able), I'd discriminate the points with this property:
tooltip: {
useHTML:true,
formatter: function(){
return this.point.tooltipDisabled ? false : this.point.name +"<br><span style='font-size:18px;vertical-align:middle'>•</span>"+this.series.name+": <b>"+this.y+"</b>";
}
returning false, as you have probably guessed, disables the tooltip.
(as you can see I also added useHTML:true, so highcharts renders the bullet next to the point name.
See fiddle: http://jsfiddle.net/e7brd9do/2/