I have created a simple grouped column chart here;
I want to create a drill down report with following dataset:
[{
"category" : "Quantitative",
"counts" : [
{
"topic" : "Compound Interest",
"correct" : 0
"incorrect" : 1
"missed" : 0
},
{
"topic" : "Pipers and Cistern",
"correct" : 0
"incorrect" : 0
"missed" : 1
},
{
"topic" : "Simplification",
"correct" : 0
"incorrect" : 0
"missed" : 1
}
]
},
{
"category" : "Quantitative",
"counts": [ ...again some objects with counts]
}]
Where when we click on any of the columns in Quantitative, we should go to drill down report for Quantitative and it should also change category names. How can we achieve that ? I am using Highcharts React Wrapper
Highcharts drilldown does not support what you are expecting. However, you can achieve it making a custom drilldown functionality.
On load event add Go back button using Highcharts.SVGRenderer and hide it. On click the button update the chart with level 0 (main) data.
On point event callback update the chart with drilldown data and new categories. In the nutshell:
Code:
var drilldownData = [{
"category": "Quantitative_1",
"counts": [{
"topic": "Compound Interest",
"correct": 2,
"incorrect": 7,
"missed": 4
},
{
"topic": "Pipers and Cistern",
"correct": 5,
"incorrect": 3,
"missed": 1
},
{
"topic": "Simplification",
"correct": 2,
"incorrect": 5,
"missed": 2
}
]
}, {
"category": "Quantitative_2",
"counts": [{
"topic": "Compound Interest",
"correct": 2,
"incorrect": 8,
"missed": 11
},
{
"topic": "Pipers and Cistern",
"correct": 3,
"incorrect": 6,
"missed": 3
},
{
"topic": "Simplification",
"correct": 2,
"incorrect": 11,
"missed": 8
}
]
}];
var data = [{
"name": "Correct",
"color": "#0098ad",
"data": [{
y: 8,
drilldown: "Quantitative_1",
className: 'drilldown'
},
9,
7
]
}, {
"name": "InCorrect",
"color": "#BF350A",
"data": [{
y: 8,
drilldown: "Quantitative_2",
className: 'drilldown'
},
7,
10
]
}, {
"name": "Missed",
"color": "#F7A35B",
"data": [
4,
4,
3
]
}];
var categories = [
"Quantitative",
"Verbal Ability",
"Logical Reasoning"
];
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var chart = this;
chart.customBtn = chart.renderer.button('◁ Go back', 40, 10, function() {
chart.update({
xAxis: {
categories: categories
},
series: JSON.parse(JSON.stringify(data))
}, true);
chart.customBtn.hide();
}).add().hide();
}
}
},
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": [
"downloadPNG",
"downloadSVG",
"separator",
"label"
]
}
}
},
"title": {
"text": null
},
"xAxis": {
"categories": categories,
"title": {
"text": "Section",
"style": {
"fontWeight": "bold",
"color": "#000"
}
}
},
"yAxis": {
"allowDecimals": false,
"min": 0,
"title": null
},
"tooltip": {},
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
},
point: {
events: {
click: function() {
var point = this,
chart = point.series.chart,
drilldown = this.drilldown,
data = drilldownData.find(elem => elem.category === drilldown),
categories = [],
series = [{
name: 'Correct'
}, {
name: 'InCorrect'
}, {
name: 'Missed'
}];
if (drilldown && data) {
data.counts.forEach(function(count, i) {
categories.push(count.topic);
series[i].data = [{
y: count.correct,
drilldown: null
}, {
y: count.incorrect,
drilldown: null
}, {
y: count.missed,
drilldown: null
}];
});
chart.update({
xAxis: {
categories: categories
},
series: series
});
chart.customBtn.show();
}
}
}
}
}
},
"series": JSON.parse(JSON.stringify(data))
});
.drilldown {
cursor: pointer;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/zdm4cLty/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/plotOptions.column.point.events.click
Related
So I have two tables in my database. I want a DataGrid UI to print all my columns except the categoryId I want to print a label instead (like in selection valueOptions) :
const columns: GridColDef = [
{
"field": "title",
"headerName": "Titel",
"width": 350,
"editable": true
},
{
"field": "categoryId",
"headerName": "Kategorie",
"width": 250,
"editable": true,
"type": "singleSelect",
"valueOptions": [
{
"value": "miv560972ynqzk9",
"label": "stuff 1"
},
{
"value": "1t7n08l9tfdwotn",
"label": "stuff 2"
},
]
}
]
const rows: GridRowsProp = [
{
"categoryId": "miv560972ynqzk9",
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": "1t7n08l9tfdwotn",
"title": "Test",
},
]
So I want something like this:
const rows: GridRowsProp = [
{
"categoryId": { value:"miv560972ynqzk9", label: "stuff1"},
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": { value: "1t7n08l9tfdwotn", label: "stuff2" },
"title": "Test",
},
]
Environment:
OS: Windows
Browser: Google Chrome
Framework: Angular#14
Library: Echarts#5.4.0
Reproduction Link:
https://jsfiddle.net/AimanKhan11/51kuv2mc/11/
Steps to reproduce:
run the fiddle
drill down to specific node (click event will store the last visited
tree node info into variable)
click on refresh button
Current Behavior:
By clicking on refresh button, treemap not zooming to last visited node and going to its initial state.
Expected Behavior:
Treemap should zoom to last visited node and maintain its state after refreshing options.
const chart = echarts.init(document.getElementById("chart-container"));
let lastVisitedNode;
chart.setOption({
responsive: true,
maintainAspectRatio: false,
series: {
name: 'All',
type: 'treemap',
visibleMin: 300,
leafDepth: 1,
sort: null,
roam: 'move',
drillDownIcon: '',
label: {
show: true,
formatter: '{b}',
padding: 5
},
upperLabel: {
show: true,
height: 30,
padding: 5
},
visualDimension: 1,
levels: [{
itemStyle: {
borderColor: '#555',
borderWidth: 4,
gapWidth: 4
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 2,
borderWidth: 2
}
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.6,
gapWidth: 1
}
},
{
colorSaturation: [0.3, 0.5]
}
],
data: [{
"value": [
32,
32
],
"name": "HEADWEAR",
"path": "HEADWEAR",
"children": [{
"value": [
12,
12
],
"name": "HEADWEAR",
"path": "HEADWEAR>HEADWEAR",
"children": [{
"value": [
1,
1
],
"name": "WHT",
"path": "HTG>WHT",
"children": [{
"value": [
1,
1
],
"name": "Travel/Commute",
"path": "HTG>Travel/Commute",
"children": []
}]
},
{
"value": [
1,
1
],
"name": "CMO",
"path": "BLK>CMO",
"children": [{
"value": [
1,
1
],
"name": "Fitness",
"path": "BLK>Fitness",
"children": []
}]
},
{
"value": [
1,
1
],
"name": "HBK",
"path": "CMO>HBK",
"children": [{
"value": [
1,
1
],
"name": "Fitness",
"path": "CMO>Fitness",
"children": []
}]
},
{
"value": [
1,
1
],
"name": "HTG",
"path": "HTA>HTG",
"children": [{
"value": [
1,
1
],
"name": "Fitness",
"path": "HTA>Fitness",
"children": []
}]
},
{
"value": [
2,
2
],
"name": "HTA",
"path": "HBK>HTA",
"children": [{
"value": [
2,
2
],
"name": "Fitness",
"path": "HBK>Fitness",
"children": []
}]
},
{
"value": [
6,
6
],
"name": "BLK",
"path": "HEADWEAR>BLK",
"children": [{
"value": [
1,
1
],
"name": "Travel/Commute",
"path": "Outdoor>Travel/Commute",
"children": []
},
{
"value": [
1,
1
],
"name": "Outdoor",
"path": "Fitness>Outdoor",
"children": []
},
{
"value": [
4,
4
],
"name": "Fitness",
"path": "HEADWEAR>Fitness",
"children": []
}
]
}
]
}]
}],
nodeClick: 'zoomToNode',
},});
chart.on('click', function(params) {
if (params.seriesType == "treemap") {
lastVisitedNode = params;
}
});
if (lastVisitedNode) {
// zooming to specific node programatically is not working
setTimeout(function() {
chart.dispatchAction({
type: 'treemapZoomToNode',
seriesIndex: 0,
dataIndex: lastVisitedNode.dataIndex,
//name: lastVisitedNode.name,
});
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: lastVisitedNode.dataIndex,
//name: lastVisitedNode.name,
});
console.log('dispatch action');
}, 2000)
}
My goal: I want to modify this Array (See; Current Array with Objects) to only main properties where one or more (items) is greater than 0. In this example, the current Array should be modified by removing all object named: tags and sale_status from the Array, since there are no items is higher than 0 with count. So you only keep the Object over quotation_status.
How can I handle this the right way? I've tried various ways of looping, but can't figure it out.
Current Array with Objects
[{
"id": "tags",
"label": "Tags",
"items": [{
"key": 2,
"count": 0
}, {
"key": 1,
"count": 0
}, {
"key": 3,
"count": 0
}]
}, {
"id": "sale_status",
"label": "Status",
"items": [{
"key": "completed",
"count": 0
}, {
"key": "processing",
"count": 0
}, {
"key": "on-hold",
"count": 0
}]
}, {
"id": "quotation_status",
"label": "Status",
"items": [{
"key": "concept",
"count": 1
}]
}]
Desired output:
[{
"id": "quotation_status",
"label": "Status",
"items": [{
"key": "concept",
"count": 1
}]
}]
Current Script
function activeFilters() {
let test = test1.value
let filters = store.getters[test].filters
const result = filters.filter((o) => o.items.some((obj) => obj.count));
return result;
};
You can use filter and some to get the desired result
arr.filter((o) => o.items.some((obj) => obj.count))
const arr = [
{
id: "tags",
label: "Tags",
items: [
{
key: 2,
count: 0,
},
{
key: 1,
count: 0,
},
{
key: 3,
count: 0,
},
],
},
{
id: "sale_status",
label: "Status",
items: [
{
key: "completed",
count: 0,
},
{
key: "processing",
count: 0,
},
{
key: "on-hold",
count: 0,
},
],
},
{
id: "quotation_status",
label: "Status",
items: [
{
key: "concept",
count: 1,
},
],
},
];
const result = arr.filter((o) => o.items.some((obj) => obj.count));
console.log(result);
Is it possible to create an animation with D3.js (version 4)? In particular I want to create multiple line charts that "runs" from left to right like in this example with react-fusionchart:
http://jsfiddle.net/thadeuszlay/m18qaekm/12/
(just look at the example above.)
FusionCharts.ready(function () {
var myDataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "ocean"
},
"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": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}]
};
var chartConfigs = {
id: "revenue-profits-chart",
renderAt: "revenue-profits-chart-container",
type: "mscombi2d",
width: 600,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
React.render( < react_fc.FusionCharts {...chartConfigs
}
/>,
document.getElementById("chart-container")
);
});
Yes you can do that: you just need to replace the methods that have changed from d3 v3 to v4, such as:
var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
xAxis = d3.axisBottom(x).tickSize(-height),
yAxis = d3.axisLeft(y).tickArguments(4);
Etc. Etc.
You can find the working example on my bl.ocks.
My example is the v4 update of another bl.ocks.
Hope that helps.
I'm using Google Chart with EmberJS 2. I don't use component cause don't support promises I needed, so I created a service. And I'm using two charts on the same callback. Follow a fiddle to show code work and a print when don't work in my application.
var reviews = [{
"creation": { "created": 1421881568000 },
"statistics": { "rating": 2 }
},
{
"creation": { "created": 1415449027000 },
"statistics": { "rating": 5 }
},
{
"creation": { "created": 1381797902000 },
"statistics": { "rating": 1 }
},
{
"creation": { "created": 1378908249000 },
"statistics": { "rating": 5 }
},
{
"creation": { "created": 1376907381000 },
"statistics": { "rating": 4 }
},
{
"creation": { "created": 1372939458000 },
"statistics": { "rating": 4 }
},
{
"creation": { "created": 1350954490000 },
"statistics": { "rating": 5 }
},
{
"creation": { "created": 1350954289000 },
"statistics": { "rating": 1 }
},
{
"creation": { "created": 1322225085000 },
"statistics": { "rating": 5 }
}];
google.charts.load('43', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
var ratingByDate, dataToPie, dataToLine, options, lineChart, pieChart;
dataToPie = new google.visualization.DataTable();
dataToPie.addColumn('string', 'Avali\ç\ões');
dataToPie.addColumn('number', 'Total');
dataToPie.addRows([
["1 estrela", 1],
["2 estrelas", 2],
["3 estrelas", 1],
["4 estrelas", 2],
["5 estrelas", 4]
]);
pieChart = new google.visualization.PieChart($('.pie-chart')[0]);
pieChart.draw(dataToPie, {
title: 'Porcentagem das 50 avalia\ç\ões',
pieHole: 0.3,
height: 300,
width: 400,
colors: ['#BBBBBD', '#F00745', '#C00337', '#5A4237', '#EE0B56'],
tooltip: { isHtml: true},
});
ratingByDate = reviews.map(review => [
new Date(review.creation.created),
+review.statistics.rating
]);
dataToLine = new google.visualization.DataTable();
dataToLine.addColumn('date', 'Data');
dataToLine.addColumn('number', 'Avaliações');
dataToLine.addRows(ratingByDate);
lineChart = new google.visualization.LineChart($('#lineChart')[0]);
lineChart.draw(dataToLine, {
title: 'Avaliações',
legend: { position: 'bottom' },
curveType: 'function',
pointSize: 3,
pointsVisible: true,
crosshair: { trigger: 'both' }
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pie-chart"></div>
<div id="lineChart"></div>
The Fiddle is much close which I do in my application.
Follow a image which reproduce the problem