We Keep Coding

Way to add linebreaks to the label for a dataset in chart.js?

I am creating a bar chart usng chart.js and am trying to add a line break to the label for the dataset (which is used as a title for the whole bar chart). I see it is possible to pass an array for the labels for each piece of data which adds a line break but this does not seem to work for the top level label. I have included my code below.
processCharts[key] = new Chart(ctx, {
"type":"horizontalBar",
"data": {
"labels":["Actual", "Target"],
"datasets":[{
"label": key.split(" "),
"data":[actual, target],
"fill":false,
"backgroundColor":[
"#B3CE3A",
"#B1C1C8",
],
"borderWidth":1}]},
"options":
{ "responsive":"true",
"maintainAspectRatio": false,
"legend": {
boxwidth:
},
"scales":{
"xAxes":[{
"ticks":{
"beginAtZero":true,
callback: function(label, index, labels) {
return formatTime(label);
}
}}],
"yAxes": [{
"ticks": {
"padding": 0
}
}]
},
},
plugins: [{
beforeInit: function(chart) {
if (/\n/.test(chart.data.datasets[0].label)) {
chart.data.datasets[0].label = chart.data.datasets[0].label.split(/\n/);
}
}
}]
});
Unfortunately when it splits the key I get for example "Emergency,Change" where I want a newline between the words.
Any help would be much appreciated

Getting the weather forecast data to load in amcharts dataloader

I am very new to programming. So please bear with me.
I want to show the real time weather forecast data, specifically the temperature and precipitation vs time period using amcharts.
The weather data I am taking from openweathermap.org. Sample: "https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22"
And I want it to use in the following standard amcharts example with dataloader.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "dark",
"dataLoader": {
"url": "data/serial2.json",
"showErrors": true,
"complete": function ( chart ) {
console.log( "Loading complete" );
},
"load": function ( options, chart ) {
console.log( "File loaded: ", options.url );
},
"error": function ( options, chart ) {
console.log( "Error occured loading file: ", options.url );
}
},
"categoryField": "year",
"startDuration": 1,
"rotate": false,
"categoryAxis": {
"gridPosition": "start"
},
"valueAxes": [{
"position": "top",
"title": "Million USD",
"minorGridEnabled": true
}],
"graphs": [{
"type": "column",
"title": "Income",
"valueField": "income",
"fillAlphas":1,
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
}, {
"type": "line",
"title": "Expenses",
"valueField": "expenses",
"lineThickness": 2,
"bullet": "round",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
}],
"legend": {
"useGraphSettings": true
},
"creditsPosition": "top-right",
"responsive": {
"enabled": true
}
});
function reloadData() {
chart.dataLoader.loadData();
}
The problem I am facing is that the weather data is a complex json and I am not being able to simply replace the catagory field and value field with the temperature and precipitation.
Can anyone guide me how to go about this? Any lead will be much aprreciated.
Thank you!

Given that your source JSON is in a complex format that doesn't directly work with AmCharts, you have to use the dataLoader's postProcess callback to take the response and adapt it to your needs. If you look at the openweathermap sample API response documentation, you'll see that it maps out each field and what they correspond to. The main properties of interest are: main.temp, dt, rain.3h and snow.3h. You'll want to pull this information out for each point and assign it to your array. Your API response has each point under the list array, so you'll want to loop through that.
Here's what the postProcess method will look like:
"dataLoader": {
"url": "YOUR API URL HERE",
"postProcess": function(jsonData) {
var newData = []; //dataProvider for your chart
//loop through your API response's list array for the data you need
jsonData.list.forEach(function(periodInfo) {
//set up the data point with the converted timestamp,
//converted temperature, and placeholder for precipitation
var dataPoint = {
"date": periodInfo.dt * 1000, //convert to milliseconds
"temperature": periodInfo.main.temp - 273.15, //convert kelvin to celsius
"precipitation": 0
};
//check if we have a value for rain precipitation before adding it to our precipitation property
if (periodInfo.rain !== undefined && periodInfo.rain['3h'] !== undefined) {
dataPoint.precipitation += periodInfo.rain['3h'];
}
//check if we have a value for snow precipitation before adding it in
if (periodInfo.snow !== undefined && periodInfo.snow['3h'] !== undefined) {
dataPoint.precipitation += periodInfo.snow['3h'];
}
//finally, add it to your new data array
newData.push(dataPoint);
});
//return the new array to be assigned to the chart's dataProvider
return newData;
}
},
Now you have your data mapped, you have to update your makeChart call to look for those properties by creating graph objects with the corresponding valueField properties (temperature and precipitation), setting your categoryField to date and create a categoryAxis with parseDates enabled and a minPeriod set to hh since the data is hourly. You might also want to create a second value axis for your precipitation values.
Here's a snippet of the updated makeChart properties:
//create value axes for both temperature and precip values
"valueAxes": [{
"id": "temperature",
"title": "Temperature (C)"
}, {
"id": "precipitation",
"title": "Precipitation (mm)",
"position": "right"
}],
"synchronizeGrid": true, //make sure the grids from both axes are synchronized
"graphs": [{
"bullet": "round",
"valueField": "temperature"
},{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "precipitation",
"valueAxis": "precipitation" //plot this against the precipitation value axis
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"minPeriod": "hh" //make sure we plot hourly data correctly
},
Here's a demo using a static JSON file of the above API response to illustrate this. I added some other quality of life settings such as a cursor and setting the precision. I recommend looking at the AmCharts API documentation for more information.

AmChart multiples date values

I'm trying to create a chart with multiples date values but it's not working. I thing that the logic is good and that amChart doesn't like this date format. Any ideas ?
The working exemple :
var chart = AmCharts.makeChart( "chartdiv", {
type: "xy",
dataProvider: [ {
"ax": 16.10, <--------
"ay": 2,
"bx": 16.11, <--------
"by": 2
}, {
"ax": 16.20, <--------
"ay": 3,
"bx": 16.21, <--------
"by": 3
}],
graphs: [ {
"xField": "ax",
"yField": "ay"
}, {
"xField": "bx",
"yField": "by"
} ],
} );
What I'm trying to get :
var chart = AmCharts.makeChart( "chartdiv", {
type: "xy",
dataProvider: [ {
"ax": "2017/04/27 09:16:10", <--------
"ay": 2,
"bx": "2017/04/27 09:16:11", <--------
"by": 2
}, {
"ax": "2017/04/27 09:16:20", <--------
"ay": 3,
"bx": "2017/04/27 09:16:21", <--------
"by": 3
}],
graphs: [ {
"xField": "ax",
"yField": "ay"
}, {
"xField": "bx",
"yField": "by"
} ],
} );
http://jsfiddle.net/Lktv4s4b/1/

For date-based data, you have to specify a dataDateFormat for your chart object so that AmCharts knows how to correctly parse your date. Since you're using an XY chart, you also have to tell AmCharts that you have a date-based value axis (XY charts only have value axes, unlike Serial charts) and you have to specify which one is date-based. Going by your data, your X axis is date-based, so you need to at least tell it that the bottom value axis' type is "date":
AmCharts.makeChart("chartdiv", {
type: "xy",
dataDateFormat: "YYYY/MM/DD JJ:NN:SS",
valueAxes: [{
position: "bottom",
type: "date"
}], //you can also specify the second value axis' properties if needed, but it will create a numeric y-axis for you by default if you don't
// ... rest of your properties omitted ...
});
Updated fiddle: http://jsfiddle.net/Lktv4s4b/2/

Format X axis interval in the Chart - Kendo UI

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.

Force date Axis in Kendo Dataviz to have all values

I'm making a chart using Kendo and have run into a problem.
I'm getting a load of data and passing it into the chart, the data has a date and a value, and my js looks like this:
chart.kendoChart({
title: {
text: "title"
},
seriesDefaults: {
type: "line"
},
dataSource: {
data: []
},
series: [{
name: "Value",
field: "value"
}]
categoryAxis: [{
type: "date",
field: "date",
baseUnit: "months",
min: "2013-07-22T00:00:00",
max: "2014-07-22T00:00:00"
}]
});
The problem is that if there is no Data returned (i.e. an empty array as above) I'd still like to see the Month date labels along the bottom, but there is nothing there (there are still default value labels up the y-axis).
I have looked at the Kendo documentation and cannot find anything there, nor any similar questions on stackoverflow. Can anyone help? Let me know in comments if there is anything I need to clarify/provide. Thanks.

Filling your data with null values for months which have no data can resolve your issue.
Please see this Fiddle as an example:
Also see the sample code below:
var _data=[{"weight":200,"createddate":"1/1/2014"},
{"weight":200,"createddate":"2/1/2014"},
{"weight":200,"createddate":"3/1/2014"},
{"weight":149.91,"createddate":"4/1/2014"},
{"weight":null,"createddate":"5/1/2014"},
{"weight":null,"createddate":"6/1/2014"},
{"weight":null,"createddate":"7/1/2014"},
{"weight":null,"createddate":"8/1/2014"},
{"weight":null,"createddate":"9/1/2014"},
{"weight":null,"createddate":"10/1/2014"},
{"weight":null,"createddate":"11/1/2014"},
{"weight":null,"createddate":"12/1/2014"}]
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Red"],
seriesDefaults: {
type: "column",
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
}],
categoryAxis: {
type: "date",
baseUnit: "months"
}
});