Load JSON to Highchart Series

Load JSON to Highchart Series - javascript

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

Related

Flatten a JavaScript tree, tried some solutions

Given this tree, is there an easy way to convert it to a flat array with the following conditions?
JS ES5, jQuery used too
respecting the order of presentation
add a "level" property that shows the level of indentation, starting from 0
[
{
"root": "0",
"id": "1",
"name": "Frutta",
"status": "1",
"position": "1",
"children": [
{
"root": "1",
"id": "4",
"name": "Agrumi",
"status": "1",
"position": "3",
"children": []
},
{
"root": "1",
"id": "5",
"name": "Pere",
"status": "1",
"position": "4",
"children": []
}
]
},
{
"root": "0",
"id": "2",
"name": "Ortaggi",
"status": "1",
"position": "1",
"children": [
{
"root": "2",
"id": "7",
"name": "Da foglia",
"status": "1",
"position": "6",
"children": [
{
"root": "7",
"id": "9",
"name": "Insalate",
"status": "1",
"position": "1",
"children": []
}
]
},
{
"root": "2",
"id": "8",
"name": "Da fiore",
"status": "1",
"position": "7",
"children": []
},
{
"root": "2",
"id": "21",
"name": "Da frutto",
"status": "1",
"position": "16",
"children": []
},
{
"root": "2",
"id": "22",
"name": "Da radici",
"status": "1",
"position": "17",
"children": []
},
{
"root": "2",
"id": "23",
"name": "Da fusto",
"status": "1",
"position": "8",
"children": []
},
{
"root": "2",
"id": "24",
"name": "Da bulbi",
"status": "1",
"position": "18",
"children": []
}
]
},
{
"root": "0",
"id": "15",
"name": "Colori",
"status": "1",
"position": "14",
"children": [
{
"root": "15",
"id": "3",
"name": "Banane",
"status": "1",
"position": "2",
"children": [
{
"root": "3",
"id": "6",
"name": "Mele",
"status": "1",
"position": "5",
"children": []
}
]
},
{
"root": "15",
"id": "16",
"name": "Blu/Viola",
"status": "1",
"position": "10",
"children": []
},
{
"root": "15",
"id": "17",
"name": "Verde",
"status": "1",
"position": "11",
"children": []
},
{
"root": "15",
"id": "18",
"name": "Bianco",
"status": "1",
"position": "12",
"children": []
},
{
"root": "15",
"id": "19",
"name": "Giallo/Arancio",
"status": "1",
"position": "13",
"children": []
},
{
"root": "15",
"id": "20",
"name": "Rosso",
"status": "1",
"position": "14",
"children": []
}
]
},
{
"root": "0",
"id": "25",
"name": "Persone",
"status": "1",
"position": "24",
"children": [
{
"root": "25",
"id": "26",
"name": "Fabrizio",
"status": "1",
"position": "2",
"children": [
{
"root": "26",
"id": "27",
"name": "Uomo",
"status": "1",
"position": "21",
"children": []
}
]
},
{
"root": "25",
"id": "28",
"name": "Ivan",
"status": "1",
"position": "1",
"children": []
}
]
},
{
"root": "0",
"id": "29",
"name": "Category",
"status": "1",
"position": "25",
"children": []
}
]
The result expected should be this:
[
{
"root": "0",
"id": "1",
"name": "Frutta",
"status": "1",
"position": "1"
"level": 0
},
{
"root": "1",
"id": "4",
"name": "Agrumi",
"status": "1",
"position": "3",
"level": 1
},
{
"root": "1",
"id": "5",
"name": "Pere",
"status": "1",
"position": "4",
"level": 1
},
{
"root": "0",
"id": "2",
"name": "Ortaggi",
"status": "1",
"position": "1",
"level": 0
},
{
"root": "2",
"id": "7",
"name": "Da foglia",
"status": "1",
"position": "6",
"level": 1
},
{
"root": "7",
"id": "9",
"name": "Insalate",
"status": "1",
"position": "1",
"level": 2
},
...
I found this function, but has some disadvantages:
var flattenTree = function(treeObj, idAttr, parentAttr, childrenAttr, levelAttr) {
if (!idAttr) idAttr = 'id';
if (!parentAttr) parentAttr = 'root';
if (!childrenAttr) childrenAttr = 'children';
if (!levelAttr) levelAttr = 'level';
function flattenChild(childObj, parentId, level) {
var array = [];
var childCopy = $.extend({}, childObj);
childCopy[levelAttr] = level;
childCopy[parentAttr] = parentId || "0";
delete childCopy[childrenAttr];
array.push(childCopy);
array = array.concat(processChildren(childObj, level));
return array;
};
function processChildren(obj, level) {
if (!level) level = 0;
var array = [];
obj[childrenAttr].forEach(function(childObj) {
array = array.concat(flattenChild(childObj, obj[idAttr], level+1));
});
return array;
};
var result = processChildren(treeObj);
return result;
};
I should build first another array starting with "children" as root
[
"children": <my original array here>
]
the levels start from 1, not 0 (I tried putting level = -1 with no luck)
Here is a working fiddle: https://jsfiddle.net/yLke452z/
Thank you

You could take a recursive method for Array#flatMap and store the level for the next call.
const
flatTree = (level = 0) => ({ children = [], ...object }) => [
{ ...object, level }, ...children.flatMap(flatTree(level + 1))
];
var tree = [{ root: "0", id: "1", name: "Frutta", status: "1", position: "1", children: [{ root: "1", id: "4", name: "Agrumi", status: "1", position: "3", children: [] }, { root: "1", id: "5", name: "Pere", status: "1", position: "4", children: [] }] }, { root: "0", id: "2", name: "Ortaggi", status: "1", position: "1", children: [{ root: "2", id: "7", name: "Da foglia", status: "1", position: "6", children: [{ root: "7", id: "9", name: "Insalate", status: "1", position: "1", children: [] }] }, { root: "2", id: "8", name: "Da fiore", status: "1", position: "7", children: [] }, { root: "2", id: "21", name: "Da frutto", status: "1", position: "16", children: [] }, { root: "2", id: "22", name: "Da radici", status: "1", position: "17", children: [] }, { root: "2", id: "23", name: "Da fusto", status: "1", position: "8", children: [] }, { root: "2", id: "24", name: "Da bulbi", status: "1", position: "18", children: [] }] }, { root: "0", id: "15", name: "Colori", status: "1", position: "14", children: [{ root: "15", id: "3", name: "Banane", status: "1", position: "2", children: [{ root: "3", id: "6", name: "Mele", status: "1", position: "5", children: [] }] }, { root: "15", id: "16", name: "Blu/Viola", status: "1", position: "10", children: [] }, { root: "15", id: "17", name: "Verde", status: "1", position: "11", children: [] }, { root: "15", id: "18", name: "Bianco", status: "1", position: "12", children: [] }, { root: "15", id: "19", name: "Giallo/Arancio", status: "1", position: "13", children: [] }, { root: "15", id: "20", name: "Rosso", status: "1", position: "14", children: [] }] }, { root: "0", id: "25", name: "Persone", status: "1", position: "24", children: [{ root: "25", id: "26", name: "Fabrizio", status: "1", position: "2", children: [{ root: "26", id: "27", name: "Uomo", status: "1", position: "21", children: [] }] }, { root: "25", id: "28", name: "Ivan", status: "1", position: "1", children: [] }] }, { root: "0", id: "29", name: "Category", status: "1", position: "25", children: [] }],
flat = tree.flatMap(flatTree());
console.log(flat);
.as-console-wrapper { max-height: 100% !important; top: 0; }
ES5 with Array#reduce.
function flatTree(level) {
return function(result, object) {
var children = object.children || [],
item = Object.keys(object).reduce(function (o, k) {
if (k !== 'children') o[k] = object[k];
return o;
}, {});
level = level || 0;
item.level = level;
return result.concat(item, children.reduce(flatTree(level + 1), []));
};
}
var tree = [{ root: "0", id: "1", name: "Frutta", status: "1", position: "1", children: [{ root: "1", id: "4", name: "Agrumi", status: "1", position: "3", children: [] }, { root: "1", id: "5", name: "Pere", status: "1", position: "4", children: [] }] }, { root: "0", id: "2", name: "Ortaggi", status: "1", position: "1", children: [{ root: "2", id: "7", name: "Da foglia", status: "1", position: "6", children: [{ root: "7", id: "9", name: "Insalate", status: "1", position: "1", children: [] }] }, { root: "2", id: "8", name: "Da fiore", status: "1", position: "7", children: [] }, { root: "2", id: "21", name: "Da frutto", status: "1", position: "16", children: [] }, { root: "2", id: "22", name: "Da radici", status: "1", position: "17", children: [] }, { root: "2", id: "23", name: "Da fusto", status: "1", position: "8", children: [] }, { root: "2", id: "24", name: "Da bulbi", status: "1", position: "18", children: [] }] }, { root: "0", id: "15", name: "Colori", status: "1", position: "14", children: [{ root: "15", id: "3", name: "Banane", status: "1", position: "2", children: [{ root: "3", id: "6", name: "Mele", status: "1", position: "5", children: [] }] }, { root: "15", id: "16", name: "Blu/Viola", status: "1", position: "10", children: [] }, { root: "15", id: "17", name: "Verde", status: "1", position: "11", children: [] }, { root: "15", id: "18", name: "Bianco", status: "1", position: "12", children: [] }, { root: "15", id: "19", name: "Giallo/Arancio", status: "1", position: "13", children: [] }, { root: "15", id: "20", name: "Rosso", status: "1", position: "14", children: [] }] }, { root: "0", id: "25", name: "Persone", status: "1", position: "24", children: [{ root: "25", id: "26", name: "Fabrizio", status: "1", position: "2", children: [{ root: "26", id: "27", name: "Uomo", status: "1", position: "21", children: [] }] }, { root: "25", id: "28", name: "Ivan", status: "1", position: "1", children: [] }] }, { root: "0", id: "29", name: "Category", status: "1", position: "25", children: [] }],
flat = tree.reduce(flatTree(), []);
console.log(flat);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Manipulating Data in Vue for Chart Options

I am hitting a rest api giving me a dataset on a piece of equipment. I need to get the first column of datas as an array and I seem to not get it right. I have tried computed and methods in vue but it always returns []. Does anyone know what I may be doing wrong? {{datas}} prints out my JSON with no issues but when i add {{ getDate }} it returns can't find date of undefined.
Thanks
<template>
<v-app>
<!-- <v-data-table :headers="headers" :items="datas" class="elevation-1">
<template slot="items" scope="props">
<td class="text-xs-right">{{props.item.date}}</td>
<td class="text-xs-right">{{props.item.iron}}</td>
<td class="text-xs-right">{{props.item.chromium}}</td>
<td class="text-xs-right">{{props.item.lead}}</td>
</template>
</v-data-table>-->
<p>{{ datas }}</p>
<!-- <p v-for="data in datas">{{ data.date }}</p> -->
{{ getDates }}
<center>
<chart :options="chartOptionsBar"></chart>
</center>
<chart :options="chartOptionsLine"></chart>
<p>108J View</p>
</v-app>
</template>
<script>
import axios from "axios";
export default {
name: "E108J",
components: {},
data() {
return {
datas: [],
chartDates: [],
chartOptionsLine: {
xAxis: {
data: ["q", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 24
}
},
color: ["#127ac2"]
},
chartOptionsBar: {
xAxis: {
data: ["Q1", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "bar",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 36
}
}
}
};
},
mounted() {
axios
.get("http://localhost:3000/E108J")
.then(response => (this.datas = response.data));
},
computed: {
getDates() {
let chartdates;
for (let i = 0;i< this.datas.length; i++) {
chartdates = this.data[i];
}
return chartdates;
}
}
};
</script>
JSON Data:
[
{
date: "10/18/2018",
iron: "0",
chromium: "0",
lead: "3",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "1",
barioum: "0",
phosphorous: "3",
zinc: "2",
molybden: "1",
tin1: "0",
vandium: "2",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.41",
tan: "0.32",
kfish: "22",
water: "0.0022",
pc0: "455",
pc1: "139",
pc2: "25",
pc3: "11",
pc4: "1",
pc5: "0",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "11/2/2018",
iron: "0",
chromium: "0",
lead: "2",
copper: "0",
tin: "3",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "10",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "7",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "213.56",
tan: "0.19",
kfish: "29",
water: "0.0029",
pc0: "339",
pc1: "39",
pc2: "21",
pc3: "8",
pc4: "0",
pc5: "0",
pciso0: "16",
pciso1: "12",
pciso2: "12"
},
{
date: "11/29/2018",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "2",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "1",
zinc: "1",
molybden: "0",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "217.67",
tan: "0.18",
kfish: "21",
water: "0.0021",
pc0: "921",
pc1: "223",
pc2: "40",
pc3: "18",
pc4: "1",
pc5: "0",
pciso0: "17",
pciso1: "15",
pciso2: "12"
},
{
date: "12/13/2018",
iron: "0",
chromium: "0",
lead: "1",
copper: "0",
tin: "0",
aluminum: "1",
nickel: "0",
silver: "0",
silicon: "0",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "2",
zinc: "0",
molybden: "2",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.46",
tan: "0.26",
kfish: "22",
water: "0.0022",
pc0: "581",
pc1: "101",
pc2: "39",
pc3: "24",
pc4: "7",
pc5: "4",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "1/14/2019",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "4",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "222.35",
tan: "0.29",
kfish: "13",
water: "0.0013",
pc0: "663",
pc1: "140",
pc2: "13",
pc3: "11",
pc4: "2",
pc5: "0",
pciso0: "17",
pciso1: "14",
pciso2: "11"
}
]

First, to be safe, check that datas exists in your computed property. It is set to an array initially, but if invalid data comes back it could cause an error. So you could check something right inside your computed property like if(this.datas && this.datas.length), and only if that is true try to fill in chartdates. Otherwise, return an empty array.
Second, based on the JSON you included, the date can be extracted in the for loop using
this.datas[i].date
What you have now would get the whole object inside { .. } instead of just the date. There's also a typo using this.data[i] when it should be this.datas[i].
Finally, to make chartdates an array you need to set chartdates[i] to each ith value, otherwise only the last value will be stored in chartdates as Steven pointed out.

Try this:
<div v-if="datas.length > 0">
<p>{{ datas }}</p>
{{ getDates }}
</div>

In this lines of code
getDates() {
let chartdates;
for (let i = 0;i< this.datas.length; i++) {
chartdates = this.data[i];
}
return chartdates;
}
may be this.data[i] is replace by this.datas[i];

Display json data in fusion charts

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>

Interaction with multiple charts in a page

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/

FusionCharts 3.3.1 - escape label and tooltip

I have FusionCharts 3.3.1-sr2.19840 . How do I escape tooltips for html code? If I have an <input> in tooltip or even a <script> with some alert in it, it will trigger my JavaScript code... this is a huge problem. Is there a property to escape tooltips and labels?
Here is a print screen with the tooltip unescaped:

You should use the "& lt;" and "& gt;" to escape the tag. I have created a fiddle to solve the problem.
http://jsfiddle.net/subramaniashiva/4jgfeejx/
FusionCharts.ready(function () {
var ageGroupChart = new FusionCharts({
type: 'pie3d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Visitors by Age Group",
"subCaption": "Last year",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "0",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"showHoverEffect": "1",
"showLegend": "1",
"legendBgColor": "#ffffff",
"legendBorderAlpha": '0',
"legendShadow": '0',
"legendItemFontSize": '10',
"legendItemFontColor": '#666666'
},
"data": [{
"label": "Teenage",
"value": "1250400",
"tooltext": "<input type=\"text\"> Teenage"
}, {
"label": "Adult",
"value": "1463300",
"tooltext": "<input type=\"text\"> Adult"
}, {
"label": "Mid-age",
"value": "1050700",
"tooltext": "<input type=\"text\"> Mid-age"
}, {
"label": "Senior",
"value": "491000",
"tooltext": "<input type=\"text\"> Senior"
}]
}
}).render();
});

Develop Reference

JavaScript is the programming language of the Web.

Load JSON to Highchart Series - javascript

Related

Flatten a JavaScript tree, tried some solutions

Manipulating Data in Vue for Chart Options

Display json data in fusion charts

Interaction with multiple charts in a page

FusionCharts 3.3.1 - escape label and tooltip

Categories

Resources