Wrap Label Text In Fuion Charts (Pie-Chart) - javascript

Length of the text is too long to fit in my column in a row
label issue
is there any way to solve this issue in Fusion charts?
Below is the code for pie chart -
var initMemberInvestedSectorWiseCharts = function (membersInvestedSectorWiseData) {
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'pie2d',
renderAt: 'members-invested-sectorwise',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": ``,
"subCaption": "",
"numberPrefix": "",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fusion",
},
"data": membersInvestedSectorWiseData
}
}
);
chartObj.render();
});
}

Simply area your cursor withinside the components bar in which you need to feature the smash and press the ALT+ENTER keys. Hit ENTER again, and you`ll see the textual content wrap on lines. You now have the textual content organized the manner you want it withinside the spreadsheet and withinside the graph.

Related

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

FusionCharts Gauges have same code but different outputs

For a project i'm creating a dashboard and i would like 3 gauges on the platform. Those gauges are placed in a bootstrap card with a column value of 4. In the dashboard there are 3 cards next to eachother.
I'm able to render the gauges for every card and every gauge has the same properties but outputs to a different diff and with a different value for the gauge dial.
In the screenshot you can see the issue:
Every Gauge has a data set:
const performanceChart = {
chart: {
caption: "Gauge 3",
lowerlimit: "0",
upperlimit: "100",
showvalue: "1",
numbersuffix: "%",
theme: "fusion",
showtooltip: "0"
},
colorrange: {
color: [
{
minvalue: "0",
maxvalue: "50",
code: "#F2726F"
},
{
minvalue: "50",
maxvalue: "75",
code: "#FFC533"
},
{
minvalue: "75",
maxvalue: "100",
code: "#62B58F"
}
]
},
dials: {
dial: [
{
value: "{{$performance}}"
}
]
}
};
And a function to render it:
FusionCharts.ready(function() {
var performance = new FusionCharts({
type: "angulargauge",
renderAt: "performance-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: performanceChart,
}).render();
});
All the functions are the same but the datasource and the renderAt: are different.
How does this problem occur? And how can i solve the issue where every added gauge grows.
I tried replicating the issue and could not find any erroneous behavior in the gauge width or gauge dial value if the same code is provided for the different gauges.
Please refer to this fiddle to find my way of replicating the behavior: http://jsfiddle.net/omk32qwu/
for (let i = 1; i <= 3; i++) {
var performance = new FusionCharts({
type: "angulargauge",
renderAt: `container${i}`,
width: "100%",
dataFormat: "json",
dataSource: performanceChart,
}).render();
}
Please replicate the behavior where you are getting the different dial values for the same dial value provided in the code and share with me.
Hope this would help.

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.

How to disable showing a single chart in legend area?

I have a line chart with multiple lines in it just like in an example: http://nvd3.org/examples/line.html.
Is it possible by passing parameters to the chart to hide a label for any chart in legend?
For example, hide Sine Wave label from legend but keep the chart line itself as it is.
you can remove the classic legend, create your own html legend based on your data, and Use the nvd3 options > chart callback
chart: any;
this.options = {
chart: {
showLegend: false, ...
callback: (chart) => {
this.chart = chart;
}
EDIT : to update your chart => this.chart.update() and add a "disabled" flag for each of your data rows like :
data[0] = { "key": label,
"color": color,
"disabled": false,
"values": { "label": labelValue, "value": val };

Kendo UI Column Chart with Sparse Data displays incorrectly

I am using KendoUI to display a column chart, but when I have sparse data (there is not a data point for every single category/series combination), the charts are completely wrong. I am hoping I am just doing something wrong!
Take the following data:
Category Series Value
---------------------------
1 Foo 10
2 Foo 12
2 Bar 9
I would like to create a chart where:
the series are grouped, and keys are in the legend
the categories are displayed along the x-axis, sorted ascending
the values are the height of the columns
If I generate the chart, I get the following result:
There are several things wrong with this chart:
The column for the third data point (2, Bar, 9) displays in the first column in orange - should be in the second column
The axis label for category 2 is displayed first - should be second
There is no axis label for category 1
However, if I add a 4th data point to my data source, the data displays correctly:
Category Series Value
---------------------------
1 Foo 10
2 Foo 12
2 Bar 9
1 Bar 7
I have a JS fiddle that illustrates the problem at http://jsfiddle.net/blackstarzes/eep2tn2g/1/
For completeness, the code I have:
HTML
<div id="chart"></div>
JS
var dr = [
{
"Category": "1",
"Series": "Foo",
"Value": 10
},
{
"Category": "2",
"Series": "Foo",
"Value": 12
},
{
"Category": "2",
"Series": "Bar",
"Value": 9
},
];
//Uncomment the following line to see the correct data
//dr.push({"Category": "1", "Series": "Bar", "Value": 7});
var ds = new kendo.data.DataSource({
data: dr,
group: { field: "Series"},
sort: [{field: "Category", dir: "asc"}]
})
$("#chart").kendoChart({
dataSource: ds,
seriesDefaults: {
type: 'column',
labels: {
visible: true,
template: "#=kendo.format('{0:0}', value)#"
}
},
legend: {
visible: true,
position: "bottom"
},
series: [{
field: "Value"}],
categoryAxis: {
field: "Category"
},
tooltip: {
visible: true,
template: "#= dataItem.Series # #= dataItem.Category # #= dataItem.Value #"
}
});
Thanks in advance for the help!

Categories