Related
I build FusionCharts multilevelpie graph. But huge indents appear.
500 x 500
With a decrease in space, the graph is greatly reduced.
padding 1
100% x 100%
When doing a full size chart, the indents become too large.
padding 2
When I reduce the space of the graph, the graph becomes too small.
My code:
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "#",
"plottooltext": "$label",
"theme": "fusion",
},
"category": {{ pie }},
}
}
);
fusioncharts.render();
});
You can adjust the size of the outer part of the pie using pieRadius attribute at the chart object level, take a look at this sample -
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '400',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue",
"pieRadius": "170"
},
"category": [{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
},
{
"label": "Noodles",
"color": "#f8bd19",
"value": "9.99"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "10.08"
},
{
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
},
{
"label": "Handbags",
"color": "#e44a00",
"value": "6.3"
},
{
"label": "Shoes",
"color": "#e44a00",
"value": "6.72"
}
]
},
{
"label": "Baby {br}Products",
"color": "#008ee4",
"value": "22.5",
"category": [{
"label": "Bath &{br}Grooming",
"color": "#008ee4",
"value": "9.45"
},
{
"label": "Feeding",
"color": "#008ee4",
"value": "6.3"
},
{
"label": "Diapers",
"color": "#008ee4",
"value": "6.75"
}
]
},
{
"label": "Electronics",
"color": "#33bdda",
"value": "30",
"category": [{
"label": "Laptops",
"color": "#33bdda",
"value": "8.1"
},
{
"label": "Televisions",
"color": "#33bdda",
"value": "10.5"
},
{
"label": "SmartPhones",
"color": "#33bdda",
"value": "11.4"
}
]
}
]
}]
}
});
topProductsChart.render();
});
Here is a live demo - http://jsfiddle.net/cebu68vt/
I want to show dynamic data in fusion charts which is coming from API. I'm using fusion charts to show value in angular chart. How to assign JSON data to value field of chart property. i have decoded the dataframe and getting the value like "24" in the console log . which i need to show in fusion chart angular chart.
sample data
{"id":4753666,"timestamp":"2017-02-17","dataFrame":"TEVOOjbb==","fcnt":243,"port":2,"rssi":-113,"snr":-4.19,"sf_used":9,"decrypted":true}
code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script>
<script>
var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope, $http) {
$http.get('https://example.com', {
headers: { 'Authorization': 'Basic passwordbase64==' }
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
$scope.decodedFrameNew = $scope.decodedFrame.substring(4);
$scope.distanceinFeet = $scope.decodedFrameNew * 11.5*2;
$scope.Value = $scope.distanceinFeet / 148;
$scope.ValueinCm = $scope.Value.toFixed(2);
console.log($scope.ValueinCm )
});
});
var myData = {
"chart": {
"caption": "Bin 1",
"lowerLimit": "0",
"upperLimit": "14",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "5",
"code": "#e44a00"
}, {
"minValue": "5",
"maxValue": "10",
"code": "#f8bd19"
}, {
"minValue": "10",
"maxValue": "14",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "34"
}]
}
};
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource={{decodedFrame}}></fusioncharts>
</div>
</body>
You can following link to store JSON:link
And link for program : link
And you can follow below code which is executing successfully.
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script>
<script>
var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope, $http) {
/*$http.get('https://example.com', {
headers: { 'Authorization': 'Basic passwordbase64==' }
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);*/
//Here you can plot you response json in fusioncharts
var myChart = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Bad",
"upperLimitDisplay": "Good",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "67"
}]
}
}
});
// Render the chart.
myChart.render();
//});
});
// var myData = {
// "chart": {
// "caption": "Bin 1",
// "lowerLimit": "0",
// "upperLimit": "14",
// "showValue": "1",
// "valueBelowPivot": "1",
// "theme": "fint"
// },
// chart: {
// caption: "Harry's SuperMart",
// subCaption: "Top 5 stores in last month by revenue",
// },
// data:[{
// label: "Bakersfield Central",
// value: "880000"
// },
// {
// label: "Garden Groove harbour",
// value: "730000"
// },
// {
// label: "Los Angeles Topanga",
// value: "590000"
// },
// {
// label: "Compton-Rancho Dom",
// value: "520000"
// },
// {
// label: "Daly City Serramonte",
// value: "330000"
// }]
// }
// "colorRange": {
// "color": [{
// "minValue": "0",
// "maxValue": "5",
// "code": "#e44a00"
// }, {
// "minValue": "5",
// "maxValue": "10",
// "code": "#f8bd19"
// }, {
// "minValue": "10",
// "maxValue": "14",
// "code": "#6baa01"
// }]
// },
// "dials": {
// "dial": [{
// "value": "34"
// }]
// }
// };
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div id="chart-container">FusionCharts will load here...</div>
<!-- <fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource="myData"></fusioncharts> -->
</div>
</body>
</html>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%#taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts#3.12.0/fusi`enter code here`oncharts.js"></script>
<script type="text/javascript" enter code heresrc="https://unpkg.com/fusioncharts#3.12.0/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts#3.12.0/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/feature/node-commonjs-support/package/fusioncharts-jquery-plugin.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="chart-container">FusionCharts will render here...</div>
<div id="chart-container2">FusionCharts will render here</div>
<div id="chart-container3" style="margin-left: 54%;margin-top: -56%;">FusionCharts will render here</div>
<div id="chart-container4" style="margin-left: 54%;">FusionCharts will render here``
</div>
<script type="text/javascript">
jQuery('document').ready(function () {
$("#chart-container").insertFusionCharts({
type: "column2d",
width: "500",
height: "300",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Course Admission",
"xAxisName": "Course Name",
"yAxisName": "NO Of Admission",
"numberPrefix": " ",
"theme": "fint"
},
"data": [{
"label": ""fgf",
"value": "10"
}, {
"label": "gfdfg",
"value": "10"
}]
}
});
});
jQuery('document').ready(function () {
$("#chart-container2").insertFusionCharts({
type: 'doughnut2d',
renderAt: 'chart-container2',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "cvbcvb",
"subCaption": "bcvb",
"numberPrefix": " ",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "310",
"showLabels": "0",
"showPercentValues": "1",
"showLegend": "1",
"legendShadow": "0",
"legendBorderAlpha": "0",
"defaultCenterLabel": "Total cbvc: 500",
"centerLabel": "Revenue from $label: $value",
"centerLabelBold": "1",
"showTooltip": "0",
"decimals": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0"
},
"data": [
{
"label": "cvbcv",
"value": "55"
},
{
"label": "cvbc",
"value": "22"
}
]
}
});
});
jQuery('document').ready(function () {
$("#chart-container3").insertFusionCharts({
type: 'area2d',
renderAt: 'chart-container3',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "fghfghProcess",
"subCaption": "week",
"xAxisName": "Day",
"yAxisName": " ",
"numberPrefix": " ",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"plotBorderAlpha": "10",
"usePlotGradientColor": "0",
"plotFillAlpha": "50",
"showXAxisLine": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showValues": "1",
"showAlternateHGridColor": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [
{
"label": "Mon",
"value": "41"
},
{
"label": "Tue",
"value": "46"
},
{
"label": "Wed",
"value": "55"
},
{
"label": "Thu",
"value": "4"
},
{
"label": "Fri",
"value": "5"
},
{
"label": "Sat",
"value": "58"
},
{
"label": "Sun",
"value": "6"
}
]
}
})
});
/* jQuery('document').ready(function () {
$("#chart-container4").insertFusionCharts({
*/
jQuery('document').ready(function () {
$("#chart-container4").insertFusionCharts({
type: 'bar2d',
renderAt: 'chart-container4',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "gfhfgResults",
"subCaption": "2017",
"yAxisName": "Status",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placeValuesInside": "1",
"valueFontColor": "#ffffff",
"showAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"alignCaptionWithCanvas": "0",
"showAlternateVGridColor": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [
{
"label": "gf1",
"value": "88"
},
{
"label": "gfhf 2",
"value": "73"
},
{
"label": "gfhf 3",
"value": "5"
},
{
"label": "gfhh 4",
"value": "52"
},
{
"label": "gfh5",
"value": "33"
}
]
}
})
.render();
});
</script>
</body>
</html>
If I have multiple charts, say a stacked bar and a pie chart on my page. I would like to interact (e.g. click) on one of it and see some visual update on the other chart.
I tried creating them using FusionCharts in the following manner:
FusionCharts.ready(function() {
var pieChart = new FusionCharts({
type: 'pie2d',
renderAt: 'pieContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"enableMultiSlicing": "0",
"bgcolor": "FFFFFF",
"showvalues": "1",
"showpercentvalues": "1",
"showborder": "0",
"showplotborder": "0",
"showlegend": "1",
"legendborder": "0",
"legendposition": "bottom",
"enablesmartlabels": "1",
"use3dlighting": "0",
"showshadow": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78"
},
"data": [{
"label": "Services",
"value": "26"
}, {
"label": "Hardware",
"value": "32"
}, {
"label": "Software",
"value": "42"
}]
}
}).render();
var stackedBar = new FusionCharts({
type: 'stackedBar2D',
renderAt: 'barContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"xaxisname": "Month",
"yaxisname": "Revenue",
"bgcolor": "FFFFFF",
"outcnvbasefontcolor": "666666",
"numberprefix": "$",
"showvalues": "0",
"numvdivlines": "10",
"showalternatevgridcolor": "1",
"alternatevgridcolor": "e1f5ff",
"divlinecolor": "e1f5ff",
"vdivlinecolor": "e1f5ff",
"basefontcolor": "666666",
"tooltipbgcolor": "F3F3F3",
"tooltipbordercolor": "666666",
"canvasbordercolor": "666666",
"canvasborderthickness": "1",
"showplotborder": "1",
"plotfillalpha": "80",
"showborder": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Product A",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "Product B",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "42000",
"color": "91C728",
"displayvalue": "Target",
"showontop": "1"
}]
}],
"styles": {
"definition": [{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "Canvas",
"styles": "CanvasAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div>
<span id="barContainer">FusionCharts XT will load here!</span>
<span id="pieContainer">FusionCharts XT will load here!</span>
</div>
Now how to update the other chart on interacting one of the chart? Say by clicking or hovering plots on one of the chart, has its visual update in another chart.
**Note: ** The data is not relevant in this case. Only the chart to chart interactivity needs to be established. There is no restriction on JS library being used and can be entirely based on the responder choice.Any help is highly appreciable.
With highcharts, you could override the click function, then update whichever properties you want.
See: http://api.highcharts.com/highcharts#chart.events
I do not know how it is with FusionCharts, although I think syncing data between different type of charts should be possible, but I was using a lot amCharts and if you have no restriction on library then I put this quick tips link to show you what you can fairly quickly implement there.
http://www.amcharts.com/tips/automatically-syncing-pie-chart-data-column-chart-hover/
I am relatively new to both MVC and FusionCharts. I Have a View where the Model contains all the data I need, I need to pass this(or rather specific data from the model) to the FusionChart.
I have a FusionChart that I got from their site(FusionCharts), which has hard coded values, but have no idea how to replace this with the data from my model. Below is my FusionChart :
FusionCharts.ready(function () {
var hourlySalesChart = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container2',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xaxisname": "Week of Year",
"showvalues": "0",
"numvdivlines": "2",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"captionFontSize": "13",
"subcaptionFontSize": "13",
"subcaptionFontBold": "0",
"showBorder": "0",
"showPlotBorder": "0",
"showXAxisLine": "1",
"showShadow": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"showalternatevgridcolor": "1",
"usePlotGradientColor": "0",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"legendBorderAlpha": "0",
"legendShadow": "0",
"alignCaptionWithCanvas": "0"
},
"categories": [
{
"category": [
{ "label": "0" },
{ "label": "5000.00" },
{ "label": "4000.00" },
{ "label": "6000.00" },
{ "label": "8000.00" },
{ "label": "10000.00" },
{ "label": "12000.00" },
{ "label": "14000.00" },
{ "label": "16000.00" }
]
}
],
"axis": [
{
"title": "Revenue",
"titlepos": "left",
"tickwidth": "10",
"numberPrefix": "$",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Revenue",
"linethickness": "3",
"data": [
{ "value": "137500" },
{ "value": "124350" },
{ "value": "156700" },
{ "value": "131450" },
{ "value": "208300" },
{ "value": "219900" },
{ "value": "227500" },
{ "value": "254300" },
{ "value": "155900" },
{ "value": "105650" },
{ "value": "120950" },
{ "value": "127500" }
]
}
]
}, {
"title": "Orders",
"axisonleft": "0",
"titlepos": "right",
"numdivlines": "8",
"tickwidth": "10",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Orders",
"data": [
{ "value": "22567" },
{ "value": "21348" },
{ "value": "24846" },
{ "value": "19237" },
{ "value": "20672" },
{ "value": "23403" },
{ "value": "30278" },
{ "value": "26719" },
{ "value": "21940" },
{ "value": "24396" },
{ "value": "22340" },
{ "value": "25439" }
]
}
]
},
{
"title": "Footfalls",
"titlepos": "RIGHT",
"axisonleft": "0",
"numdivlines": "5",
"tickwidth": "10",
"numberSuffix": "",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Footfalls",
"data": [
{ "value": "68473" },
{ "value": "57934" },
{ "value": "78925" },
{ "value": "69213" },
{ "value": "74892" },
{ "value": "81123" },
{ "value": "90086" },
{ "value": "91174" },
{ "value": "68934" },
{ "value": "80934" },
{ "value": "73634" },
{ "value": "84453" }
]
}
]
}
]
}
}).render();
});
I have also tried populating a string with the XML data and then did the following :
FusionCharts.ready(function () {
var hourlySalesChart = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container2',
width: '600',
height: '350'
});
hourlySalesChart.setXMLData(#Model.strChartData); // - This gives an error : Incorrect Syntax
hourlySalesChart.render();
If anyone could help point me to the right direction, I would greatly appreciate it.
Thanks!
I'm trying render a column chart using json for xAxis categories and the series. Unfortunately no column chart been generated as shown in picture below.
Here is my JSON structure (already validate using JSON validator online)
{
"Graph": {
"Series": [
{
"name": "John",
"data": [
"51",
"84",
"61",
"45",
"51",
"0",
"0",
"53",
"83",
"50",
"41",
"45",
"0",
"0",
"0",
"40",
"52",
"60",
"48",
"0",
"0",
"60",
"0",
"67",
"58",
"0",
"0",
"0",
"0",
"0"
]
},
{
"name": "Doe",
"data": [
"1",
"0",
"0",
"1",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"1",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0"
]
}
],
"Categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30"
]
}
}
Here is my javascript
var dchart = {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Applicants'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding:0.1,
events: {
legendItemClick: function () {
return false;
}
}
},
series: {
dataLabels:{
enabled:true,
formatter: function() {
if(this.y>0){
return '<div style="text-align:center; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">' + this.y + '</div>';
}
}
}
}
},
series: []
}
$.getJSON("<%=request.getContextPath()%>/c/MonthlyGraphAjax?method=ApplicantByDaily", function(data){
/*xAxis categories*/
for(var x=0;x<data.Graph.Categories.length;x++){
dchart.xAxis.categories.push(data.Graph.Categories[x])
}
/*series*/
for(var z=0;z<data.Graph.Series.length;z++){
dchart.series.push(data.Graph.Series[z])
}
$("#columnGraphContainer").highcharts(dchart)
})
Can anyone help me solved this problem? I think the below code causing the problem
/*series*/
for(var z=0;z<data.Graph.Series.length;z++){
dchart.series.push(data.Graph.Series[z])
}
Sorry for the inconvinience, here is the jsfiddle link for clear view of my problem. Highchart With No Column Bar
HighCharts was expecting numeric values for the data series, but received strings instead and didn't know how to display those on the graph. If you change your input from type String to type Number, it will fix your problem.
"Series": [
{
"name": "John",
"data": [
51,
84,
61,
...
]
}
]
I've forked your fiddle here with a working solution: http://jsfiddle.net/autoboxer/s8symkdz/.
Cheers,
autoboxer