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
Related
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)
}
In this link there is an example of pie chart created by Zoomcharts. To change the color of label outside of the slice I can use styleFunction to modify slice option.
styleFunction: function (slice, data) {
slice.label.textStyle.fillColor = 'red';
},
This only changes the color of letter. I would like to change color of line that connects slice to its label, too. Thanks.
You can try with this
slice: {
connectorStyle: {
lineColor: 'red' // Color you to give to the line of the chart connection
}
}
for more you can check in
https://zoomcharts.com/developers/en/pie-chart/api-reference/settings/slice/connectorStyle.html
Hope you will get the answer.
Check the solution
var data = {
"subvalues": [
{
"value": 50, "name": "Apples", "subvalues": [
{ "value": 25, "name": "Red apples" },
{ "value": 15, "name": "Yellow apples" },
{ "value": 10, "name": "Green apples" }]
},
{
"value": 30, "name": "Oranges", "subvalues": [
{ "value": 10, "name": "Big oranges" },
{ "value": 9, "name": "Small oranges" },
{ "value": 7, "name": "Green oranges" },
{ "value": 4, "name": "Pink oranges" }]
},
{
"value": 20, "name": "Grapes", "subvalues": [
{ "value": 15, "name": "Sweet grapes" },
{ "value": 5, "name": "Sour grapes" }]
},
{ "value": 50, "name": "Vegetables", style: { fillColor: "yellow" } }]
};
var t = new PieChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: { preloaded: data },
slice: {
styleFunction: function (slice, data) {
slice.label.textStyle.fillColor = 'red';
},
connectorStyle: {
lineColor: 'red'
}
}
});
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<div id="demo"></div>
I am using Highcharts library to draw a network graph. But I have a layout problem when the data makes two or more disconnected networks. Then the bigest one is centered and pushes to the edges the other networks to the point where they are barely readable.
Example:
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
height: '60%'
},
title: {
text: ''
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
}
},
series: [{
dataLabels: {
enabled: true,
linkFormat: ''
},
id: 'demo-tree',
data: [["demo001", "demo002"], ["demo003", "demo004"], ["demo005", "demo002"], ["demo006", "demo007"], ["demo008", "demo009"], ["demo003", "demo010"], ["demo011", "demo009"], ["demo001", "demo008"], ["demo005", "demo001"], ["demo011", "demo008"], ["demo005", "demo006"], ["demo005", "demo007"], ["demo005", "demo011"], ["demo005", "demo009"], ["demo012", "demo004"], ["demo005", "demo008"], ["demo001", "demo006"], ["demo001", "demo007"]],
nodes: [{ "id": "demo001", "marker": { "radius": 119 }, "color": "#dc3545" }, { "id": "demo002", "marker": { "radius": 7 }, "color": "#ffc107" }, { "id": "demo003", "marker": { "radius": 9 }, "color": "#ffc107" }, { "id": "demo004", "marker": { "radius": 8 }, "color": "#ffc107" }, { "id": "demo005", "marker": { "radius": 100 }, "color": "#dc3545" }, { "id": "demo006", "marker": { "radius": 77 }, "color": "#dc3545" }, { "id": "demo007", "marker": { "radius": 76 }, "color": "#dc3545" }, { "id": "demo009", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo008", "marker": { "radius": 33 }, "color": "#dc3545" }, { "id": "demo010", "marker": { "radius": 5 }, "color": "#28a745" }, { "id": "demo011", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo012", "marker": { "radius": 4 }, "color": "#28a745" }]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
https://jsfiddle.net/jrb471kc/1/
What I want, is to make better use of the space. Rather then having this:
Have something like this:
I toyed around with the node.mass attribute to no avail.
Does somebody have a solution for this?
EDIT 1: To better explain my question, this is an example of what I got right now. What I want is the graph to not center the big network in the center. Align it left to have room for the 2 small ones.
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
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.