I was working on a project involving ngx-echarts. I made three mat-cards which acts as categories,they are 0-10, 10-60 and lastly 60+. This is the dataset I am working with
this.data = [
{ segment: '<10 units', value: 30 },
{ segment: '20-25 units', value: 0 },
{ segment: '25-30 units', value: 5 },
{ segment: '20-40 units', value: 0 },
{ segment: '40-50 units', value: 80 },
{ segment: '50-60 units', value: 10 },
{ segment: '60-80 units', value: 0 },
{ segment: '80-100 units', value: 0 },
];
this is the graph I have plotted
Here I am facing three issues:
I am unable to plot the points in their respective categories. Eg, { segment: '20-25 units', value: 0 }, the point here should be in the 2nd mat-card but instead it gets plot in the 1st mat-card?
I am unable to make the graph responsive according to the width and height of the mat-card.
How to format the tooltip?
Can someone help? This is the stackblitz link of the project.
I tried this
interval: 50
}
in xAxis, but I am unable to add any distance between the points to push it to the next mat-card.
For the tooltip, I tried this
formatter: function(params) {
var title = params[0].segment;
var value = params[0].value;
return `${title}: ${value}`;
}
But nothing worked.
Related
I am creating a tag cloud word cloud using the React library from AnyChart. How do I change the color theme of it? The answer found here doesn't seem to work:
import React from "react";
import ReactDOM from "react-dom";
import AnyChart from "anychart-react";
import anychart from "anychart";
anychart.theme("coffee");
var data = [
{ x: "learning", value: 80 },
{ x: "includes", value: 56 },
{ x: "lists", value: 44 },
{ x: "meaning", value: 40 },
{ x: "useful", value: 36 },
{ x: "different", value: 32 },
{ x: "grammar", value: 28 },
{ x: "teaching", value: 24 },
{ x: "example", value: 20 },
{ x: "thing", value: 12 }
];
// create a chart and set the data
var chart = anychart.tagCloud(data);
//chart.theme = anychart.palettes.coffee;
ReactDOM.render(
<AnyChart width={800} height={600} instance={chart} title="Column chart" />,
document.getElementById("root")
);
Full demo is here
It is available if you are using the instance attribute. THe idea is to create the chart with the usual library API, and then apply this instance to the component. In this case, all library features are available via API.
So, you can use this call
chart.theme = anychart.palettes.coffee;
in the instance. For details, check the live sample.
I am creating this tree map and I have different values What I want is different shades of colors(green for postive and red for negative) on different ranges of points. The issue is in my callback function I am accessing the value parameter but points is not available.
Also the second issue is I want the font size according to the size of the box. As there are some boxes which are very big but the font size looks very small. I think If i get that color part fix I can set the fontsize on my own
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https:/cdn.anychart.com/releases/v8/js/anychart-treemap.min.js"></script>
<title>My First JavaScript Treemap Chart</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<style>
span {
color: #fff;
font-size: 14px;
}
</style>
<script>
anychart.onDocumentReady(function () {
var chart = anychart.treeMap(getData(), "as-tree");
chart.maxDepth(2);
chart.hintDepth(1);
chart.hintOpacity(0.7);
chart.labels().useHtml(true);
chart.labels().format(
"<span style='font-weight:bold; color: #fff;'>{%name}</span><br>{%points}"
);
chart.tooltip().useHtml(true);
chart.tooltip().format(
"COMPANY : {%name}%<br>PERCENTAGE CHANGE: {%points}%<br>MARKET CAP: {%points}<br>VOLUME: {%points}<br>"
);
chart.container("container");
chart.draw();
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["green", "red",]);
console.log(chart)
chart.colorScale(customColorScale);
// chart.colorRange().enabled(true);
chart.colorRange().length("100%");
chart.fontColor = 'white'
chart.fill(coloringFunction);
function coloringFunction(value, points, name) {
console.log(value)
if (this.value < 0) {
return 'red'
}
else if (this.value > 0) {
return 'red'
}
}
/*chart.title().useHtml(true);
chart.title(
"<span style='font-size:18; font-style:bold'>PSX TREE MAP </span><br><i><span style='font-size:14; font-style:italic'>UPDATED(7:11 PM)</i>"
);*/
});
// get data
function getData() {
// create data
var data = [
{
name: "PAKISTAN STOCK EXCHANGE",
children: [
{
name: "TECH ",
children: [
{
name: "HUMNL",
value: 24,
points: 0.26
},
{
name: "TRG",
value: 6,
points: 2.3
,
points: 0.26
},
{
name: "SYS",
value: 55,
points: 4.26
}
]
},
{
name: "SUGAR & ALLIED INDUSTRIES ",
children: [
{
name: "AGSML",
value: 12,
points: 2.26
},
{
name: "MIRKS",
value: 14,
points: 3.26
,
},
{
name: "ALNRS",
value: 15,
points: 0.26
}
]
},
]
}
];
return data;
}
</script>
</body>
</html>
To achieve the coloring you should provide ABS value for the "size" field in the data. But the "value" field may reflect positive/negative values.
Like this:
{name: "Point 1", value: -11443830, size: 11443830}
Exactly the "value" field is used for linear and ordinal coloring. The treemap supports both, you can learn more about it in the documentation article.
In your case, you can create and adjust linear scale like this:
// create and configure a color scale.
var customColorScale = anychart.scales.linearColor();
customColorScale.minimum(-100000000).maximum(100000000);
customColorScale.colors(["red", "green"]);
// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);
Min/max apply as you need or do not apply it to calculate them automatically.
To adjust label fontsize for every item simply enable adjustFontSize() setting:
chart.labels().adjustFontSize(true);
For details, check the sample we prepared.
anychart.onDocumentReady(function () {
// create data
var data = [
{name: "European Union", children: [
{name: "Belgium", value: -11443830, size: 11443830},
{name: "France", value: 64938716, size: 64938716},
{name: "Germany", value: 80636124, size: 80636124},
{name: "Greece", value: -10892931, size: 10892931},
{name: "Italy", value: 59797978, size: 59797978},
{name: "Netherlands", value: -17032845, size: 17032845},
{name: "Poland", value: 38563573, size: 38563573},
{name: "Romania", value: -19237513, size: 19237513},
{name: "Spain", value: 46070146, size: 46070146},
{name: "United Kingdom", value: 65511098, size: 65511098}
]}
];
// create a chart and set the data
var chart = anychart.treeMap(data, "as-tree");
// create and configure a color scale.
var customColorScale = anychart.scales.linearColor();
customColorScale.minimum(-100000000).maximum(100000000);
customColorScale.colors(["red", "green"]);
// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);
// add a color range
chart.colorRange().enabled(true);
chart.colorRange().length("80%");
chart.labels().adjustFontSize(true);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>
There are 52 weeks in a year, If i manually group 13 weeks into one quarter, it will give me a wrong result in high charts. Sometimes 13th week will be in 2nd quarter,so is there any function which will group weeks into quarter ?
Iam gettting data in following format:
Response is an object,consists of quarterNumber, actual production and planned production and weekwisedata, which is a list consists of weeknumber and weekly planned production and weekly actual production.
{"response":[{"quarterNumber":"1","actualQuarterProduction":"1.5","plannedQuarterProduction":"13.49","weekwisedata":[{"quarterNumber":1,"weekNumber":"1","weeklyPlannedProduction":"0","weeklyActualProduction":"0"}, {"quarterNumber":1,"weekNumber":"2","weeklyPlannedProduction":"13.49","weeklyActualProduction":"0"}, {"quarterNumber":1,"weekNumber":"3","weeklyPlannedProduction":"0","weeklyActualProduction":"0"},
{"quarterNumber":"2","actualQuarterProduction":"211.18","plannedQuarterProduction":"850",
"weekwisedata":[{"quarterNumber":2,"weekNumber":"14","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"15","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"16","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"17","weeklyPlannedProduction":"53.96","weeklActualProduction":"0"},{"quarterNumber":2,"weekNumber":"18","weeklyPlannedProduction":"67.45","weeklyActualProduction":"46.45"}]}
In Highchart iam displayng the data manually as shown below:
function(dataVal){
drilldown: {
series: [{
id: 'Quarter1a',
name: 'Actual Quality ',
data: [{
name: 'Week1',
y:parseFloat(dataVal.response[0].weekwisedata[0].weeklyActualProduction)
},
{
name: 'Week2',
y:parseFloat(dataVal.response[0].weekwisedata[1].weeklyActualProduction)
}
]
},
{
id: 'Quarter1p',
name: 'Planned Quantity',
data: [{
name: 'Week1',
y:parseFloat(dataVal.response[0].weekwisedata[0].weeklyPlannedProduction)
},
{
name: 'Week2',
y:parseFloat(dataVal.response[0].weekwisedata[1].weeklyPlannedProduction)
},
{
name: 'Week3',
y:parseFloat(dataVal.response[0].weekwisedata[2].weeklyPlannedProduction)
}
]
} ]
}
As you can see the above code,manually iam setting week number and values. iam grouping 13 weeks into quarter. can it be automated based on year?
In my inspector.js I have declared this select box with name tr_rules which has 2 select options :
'tr_rules': { type: 'select', options: ['option1', 'option2'], group: 'attributes', label: 'Rule', index: 3 },
Is there any way I can define my inspector properly so that the array options will be initially empty and:
I will fill the options dynamically with the content of a var?
For example with the var optionsVariable which a specific time will be:
var optionsVariable = [myDynamicOption1, myDynamicOption2, myDynamicOption3];
For each link we will get random values for the marker-source.fill attribute:
This is the part of the KitchenSink demo application (http://resources.jointjs.com/demos/kitchensink)
createInspector: function(cell) {
var props = App.config.inspector[cell.get('type')];
if (cell.isLink()) {
var a = {
inputs: {
attrs: {
'.marker-source': {
transform: {
type: 'select',
options: [Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100)],
}
}
}
}
};
_.merge(props, a);
}
return joint.ui.Inspector.create('.inspector-container', _.extend({
cell: cell
}, props));
},
the App.config.inspector has definitions for the Inspector in separate file
App.config.inspector = {
'app.Link': {
inputs: {
attrs: {
'.marker-source': {
transform: {
ty pe: 'select',
group: 'marker-source',
label: 'Source arrowhead',
index: 1
},
fill: {
type: 'color-palette',
options: options.colorPalette,
group: 'marker-source',
label: 'Color',
when: { ne: { 'attrs/.marker-source/transform': 'scale(0.001)'}},
index: 2
}
},
'.marker-target': {
transform: {
type: 'select',
options: options.arrowheadSize,
group: 'marker-target',
label: 'Target arrowhead',
// ...
In inspector set your options to the variable you want.
if you want to display the option using a dependency you can also do this with the when propriety for example
var dynamicOptions = [
{ value: 'Alegreya Sans', content: '<span style="font-family: Alegreya Sans">Alegreya Sans</span>' },
{ value: 'Averia Libre', content: '<span style="font-family: Averia Libre">Averia Libre</span>' },
{ value: 'Roboto Condensed', content: '<span style="font-family: Roboto Condensed">Roboto Condensed</span>' }
]
text: {
type: 'content-editable',
label: 'Text',
group: 'text',
index: 1
},
'font-family': {
type: 'select-box',
options: dynamicOptions,
label: 'Font family',
group: 'text',
when: { ne: { 'attrs/text/text': '' }},
index: 3
},
will only display the input font-family select box when the Text box has a non empty value. The options that are on the dynamicOptions must be valid for the input type.
After struggling for ages I finally came up with a way to make it work and it's quite simple quick indeed.
This is how I can create an selectbox with values which change dynamically according to the content of array ruleInspectorArray(which is filled in a different part of my code):
When a new link is created and its inspector is created as well I set inside function createInspector the options of selectbox to be the content of ruleInspectorArray:
cell.set('myArrayOfOptions', ruleInspectorArray);
In order to make it work we also have to set the path of ouf selectbox options being this ruleInspectorArray by doing so:
'tr_rules': { type: 'select', options: 'myArrayOfOptions', group: 'attributes', label: 'Rule', index: 3 },
Yes, Yes, Yes.... :)
I am trying to draw chart that is looks like below
So far so I have achieved what you can see here.
I want to know :-
1 . How can I place special symbol(diamond) with each series in each category ?
Is there anything better than what I have done ?
Relevant Code
series: [{
name: 'Meeting 1',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'},
]
},
{
name: 'Meeting 2',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'}
]
},
{
name: 'Meeting 3',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'}
]
}
]
You can use extra scatter serie with diamond marker
{
type:'scatter',
color:'black',
marker:{
symbol:'diamond'
},
data:[[2,50]]
}
Example: http://jsfiddle.net/mdzzdLeh/3/
Alternative solution: use Renderer.