I'm wondering whether it's possible to target multiple series in the same rule using tokens. In essence, what I am aiming for is "if the value from series 1 is greater than the value in the same position in series 2, change some styles".
Zingchart config:
var config = {
// ...
'type': 'area',
'plot': {
'rules': [
{
'rule': '', // %v from series 1 > %v from series 2
'background-color': '#ccc'
}
]
},
'series': [
{
'text': 'Series 1',
'values': [36, 40, 38, 47, 49, 45, 48, 54, 58, 65, 74, 79, 85, 83, 79, 71, 61, 55]
},
{
'text': 'Series 2',
'values': [40, 40, 40, 50, 50, 50, 50, 60, 60, 80, 80, 80, 80, 80, 80, 80, 60, 60]
}
]
}
If that's not possible, is there another way to achieve the same outcome? I'm aiming to change the style of an individual point when the series 1 value is greater than the series 2 value.
At this time of writing (v2.1.4 and below), there is no way to apply rule logic across different series values. The best way to approach this would be to reference each series value array within each series object with a "data-" as the key value. (See below for a working example).
With that being said, I have submitted a ticket to look into implementing cross series logic into the rules syntax!-- I'm on the developer team on ZingChart, feel free to reach out with any further questions.
var ruleSet =
[
//Controls the series 0 coloring
{
rule : "%data-series-1 > %v",
backgroundColor : "#007c9b",
borderColor : "#006a84",
size : "8px"
},
//Controls the series 1 coloring
{
rule : "%data-series-0 > %v",
backgroundColor : "#188f00",
borderColor : "#188f00",
size : "8px"
}
];
var series0Values = [10,10,20,10,10,10,10,10];
var series1Values = [20,20,10,20,20,20,20,20];
var myConfig = {
type: "scatter",
plot :{
marker : {
rules : ruleSet
}
},
series : [
{
values : series0Values,
"data-series-1" : series1Values,
marker : {
backgroundColor : "#00c0ef",
borderColor : "#00c0ef"
}
},
{
values : series1Values,
"data-series-0" : series0Values,
marker : {
backgroundColor : "#26de00",
borderColor : "#26de00"
}
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 400
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</head>
<body>
<div id='myChart'></div>
</body>
</html>
Related
I am trying to figure out how to render a section of each column in a simple, single series, column chart with multiple colors. Using series.zones:
series: [
{
name: "Mod",
colorByPoint: true,
data: seriesData,
zones: [
{ value: 101, color: '#1D681B' },
{ value: 121, color: '#ECC518' },
{ color: '#D50D0D' }
]
}
]
I can get each column to be a different color based on the zone that the y value is within.
In my example above the zone are:
0 through 100 should be green
101 to 120 should be yellow
121 and above should be red
The above works to an extent, but looks like the following:
However, what my boss wants is something like this:
Can this be achieved using highcharts?
Instead of zones you can use stacked columns. Below is a simple example of how you can automatically calculate series structure:
const steps = [100, 20];
const data = [42, 100, 96, 120, 110, 90, 140];
const series = [{
color: '#1D681B',
data: []
}, {
linkedTo: ':previous',
color: '#ECC518',
data: []
}, {
linkedTo: ':previous',
color: '#D50D0D',
data: []
}];
data.forEach((dataEl, i) => {
let rest = dataEl;
let counter = 0;
let value;
while (rest > 0) {
value = steps[counter] < rest ? steps[counter] : rest;
series[counter].data.push({
x: i,
y: value
});
rest -= value;
counter++;
}
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
yAxis: {
reversedStacks: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series
});
Live demo: http://jsfiddle.net/BlackLabel/3h6o0ncg/
Docs: https://www.highcharts.com/docs/advanced-chart-features/stacking-charts
I'm working with Chart.js on 2.9 version
I'm trying change the color of the X and Y labels of the point selected, I know the refereces are stored on somewhere of the Chart, but I don't know how go get that information.
Example, if I hover on the point Feb of "Women" dataset, It should change the color of the xAxis label "Feb" and the label of yAxis "30" (Because is the nearest tick, maybe I should to use Math.round() )
I tried a lot of ways to get the result without any luck. I only reached change the color of all xAxis labels.
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr','May', 'Jun'],
datasets: [
{
fill: false,
label: 'Men',
data: [67,54,95,41,68, 100],
backgroundColor: '#4C4CD8',
borderColor: '#4C4CD8',
borderWidth : 1,
pointHoverRadius : 7,
pointHoverBackgroundColor : '#4C4CD8',
pointHoverBorderColor : 'rgba(76, 76, 216, 0.1)',
pointHoverBorderWidth : 10,
},
{
fill: false,
label: 'Women',
data: [21,26,71,43, 36, 10],
backgroundColor: '#F8CB1C',
borderColor: '#F8CB1C',
borderWidth : 1,
pointHoverRadius : 7,
pointHoverBackgroundColor : '#F8CB1C',
pointHoverBorderColor : '#f8cb1c85',
pointHoverBorderWidth : 10
}
]
};
const options = {
onHover : (event, activeElements) => {
if (activeElements.length > 0) {
const chart = activeElements[0]._chart;
const element = activeElements[0];
// change the color of Xaxis on hover event
chart.config.options.scales.xAxes[0].ticks.fontColor = ['orange'];
chart.update();
}
}
};
new Chart('canvas', {
type: 'line',
data,
options
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>
What Shall I need to do?
I am trying to convert my html page to pdf using jsPDF. Essentially i am using the html method of jsPDF, giving it a source, and options and then in the callback function i would save the document.
But i am having a problem when it comes to dividing the single html document into mulitple divs and saving each div in a page. I am trying the below code and it renders all the pages blank.
My html looks like
<div class = "resultpage" >
<div class = "print-section-1">
//some content
</div>
<div class = "print-section-2">
//some content again
</div>
<div class = "print-section-3">
//content...
</div>
</div>
My js looks like :
window.jsPDF = window.jspdf.jsPDF;
let doc = new jsPDF({
orientation : "portrait",
unit : 'px',
format : 'a4',
hotfixes : ["px_scaling"],
putOnlyUsedFonts : true
})
doc.html($(".prints-section-1")[0], {
x: 10,
y : 10,
margin : [50, 200, 50, 200],
autoPaging : "text"
})
doc.addPage()
doc.html($(".print-section-2")[0], {
x: 10,
y : 10,
margin : [50, 200, 50, 200],
autoPaging : "text"
})
doc.addPage()
doc.html($(".print-section-3")[0], {
x: 10,
y : 10,
margin : [50, 200, 50, 200],
autoPaging : "text"
})
doc.save("test")
This renders all the pages empty.
If i modify the js, to have a chaining of callbacks like below, i am able to get the last div (print-side-2 in this case) printed but the pages previous to it are blank.
doc.html($(".print-section-1")[0], {
callback : function(doc) {
doc.addPage();
doc.html($(".print-section-2")[0], {
callback : function(doc) {
doc.save("test.pdf")
}
x: 10,
y : 10,
margin : [50, 200, 50, 200],
autoPaging : "text"
})
}
x: 10,
y : 10,
margin : [50, 200, 50, 200],
autoPaging : "text"
})
Can anyone point out what i am doing wrong ? I searched for solutions but many use deprecated methods like addFromHTtml, and some suggested using line breaks like "<!--ADD_PAGE>" _ and
style = "page-break-before : always" but both don't work. I looked into the documentation and it hasn't been great support. Please help me.
Referencing this answer (refrencing)
Just use await and make sure to return doc inside the callback
something like this
var doc = new jspdf.jsPDF({
orientation: 'p',
unit: 'pt',
format: 'letter'
});
var field = "<b>html test </b>";
doc.text(10, 10, "test");
//add first html
await doc.html(field, {
callback: function (doc) {
return doc;
},
width: 210,
windowWidth: 210,
html2canvas: {
backgroundColor: 'lightyellow',
width: 210,
height: 150
},
backgroundColor: 'lightblue',
x: 10,
y: 50,
autoPaging: 'text'
});
window.open(doc.output('bloburl'));
now you can call doc.html as many times as you want for that same document
Originally posted by #bakuur in https://github.com/parallax/jsPDF/issues/3074#issuecomment-1328427528
I am creating a chart.js which has both positive and negative values
but how to make all values be on the top half
(ignore the if it's positive or negative when drawing but keep the label)
var tax_dash = new Chart(ctx_tax_dash, {
type: "bar",
data: {
labels: lable_set,
datasets: [{
label: "Tax in",
data: total_tax_in_t_data__year,
backgroundColor: '#0fd96d',
// borderColor: sales_t_data,
borderWidth: 1,
},
{
label: "Tax out",
data: total_tax_out_t_data__year,
backgroundColor: '#0f81d9',
// borderColor: sales_t_data,
borderWidth: 1,
},
{
label: "Net VAT",
data: total_tax_in_out_t_data__year,
backgroundColor: '#d96a0f',
// borderColor: sales_t_data,
borderWidth: 1,
},
],
},
options: {
legend: {
display: true,
}
},
});
EDIT
what I am trying to do
possible solution: is (multi-axis) dual y axis.multi-axis example
~ issue: how to flip the axis so that the -100 be to the top and 0 be on the bottom
~ issue: how to split the data set base on the (sign)
OR
possible solution 2 : make all variable positive
#Gkiokan> solution: use the popup modifier to the showing values with negative
~ ++ issue: how the function will know if the value is negative
~ issue: the user needs to know that this value is negative in the label
Solution 2
I did it this morning user what Math.abs from #Lawrence comment and "popup modifier" from #Gkiokan comment as well as this jsfiddle
Thank you very much for the help. Chatting with smarter people rubs off on you :)
total_tax_in_t_data_portal_month_year = [Math.abs(12),Math.abs(-234),Math.abs(234)];
total_tax_in_t_data_portal_month_year_sign = [12,-234,234];
var tax_dash_portal = new Chart(ctx_tax_dash_portal, {
type: "bar",
data: {
labels: lable_set,
datasets: [
{
label: "VAT In",
data: total_tax_in_t_data_portal_month_year,
sign: total_tax_in_t_data_portal_month_year_sign,
backgroundColor: "#0fd96d",
// borderColor: sales_t_data,
borderWidth: 1,
},
{
label: "VAT Out",
data: total_tax_out_t_data_portal_month_year,
sign: total_tax_out_t_data_portal_month_year_sign,
backgroundColor: "#0f81d9",
// borderColor: sales_t_data,
borderWidth: 1,
},
{
label: "Net VAT",
data: total_tax_t_data_portal_month_year,
sign: total_tax_t_data_portal_month_year_sign,
backgroundColor: "#d96a0f",
// borderColor: sales_t_data,
borderWidth: 1,
},
],
},
options: {
legend: {
display: true,
},
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var sign = data.datasets[tooltipItem.datasetIndex].sign[tooltipItem.index];
if(sign < 0){
return label + ": -" + val;
}else{
return label + ': ' + val;
}
}
}
}
},
});
total_tax_in_t_data_portal_month_year is an example as the values come from a function
Math.abs is used to remove the negative sign
then I added sign to the datasets for essay access
tooltips callbacks is called on every variable so I added the if statement there
to add - if sign < 0 and do nothing if not
In my opinion you can have a data Set to save the orginal Data and the modified
Data and then use the values as you need. You can not trust the value characters. My solution will work kind cross over as you have control over both values.
I've made a jsfiddle for you which demonstrates the orginal Data vs modified Data usage. Please click first on Modify Data which will then map the data, so you can see the work in progress. In your case you would modify the data before calling the charts.
Actually you will need just a couple of methods as followed:
updateItemValues to modify the negative values and put it to the other object
tooltipCallback callback for the tooltip to use the mapped orginal value
let data = {
modified: false,
orginalData : {
'tax_in' : [10, 20, -30, -40, -100, -50],
'tax_out' : [-10, 10, 20, 10, -40, -70],
'net_vat' : [-50, -9, -40, -20, -10, -90],
},
modifiedData : {
// this modified data will be calculated before putting it in the charts
// for demo purpose we will just copy the values for now.
'tax_in' : [10, 20, -30, -40, -100, -50],
'tax_out' : [-10, 10, 20, 10, -40, -70],
'net_vat' : [-50, -9, -40, -20, -10, -90],
},
updateModifiedData(){
// loop though the orginal Data
Object.keys(this.orginalData).forEach( (item, indexx) => {
console.log('modifying item chart data for: ', item)
this.updateItemValues(item)
})
this.modified = true
document.getElementById('status').innerHTML = 'modified'
},
updateItemValues(dataKey){
let temp = []
this.orginalData[dataKey].forEach( (value, index) => {
console.log('- validating ', dataKey, 'index: ', index, '; value: ', value)
// if we have a negative value, just multiply by -1 so get it positive
if(value <= 0){
value = value * -1
}
// add to the temporary variable
temp.push(value)
})
// put the modified data to some place to have it saved
this.modifiedData[dataKey] = temp
console.log('-- final data modded ', temp)
},
tooltipCallback(tooltipItem, chartData) {
// find reference values
let index = tooltipItem.index
let dataIndex = tooltipItem.datasetIndex
// find the name of dataset
let key = chartData.datasets[dataIndex].name
// validate or whatever with the orginal value
let orginalValueOfItem = data.orginalData[key][index]
let modifiedValueOfItem = data.modifiedData[key][index]
// Modify your final tooltip here
return 'Orginal Value: ' + orginalValueOfItem + ' ; Modified Value: ' + modifiedValueOfItem
}
}
How can you use this solution?
Pretty simple.
Copy that data Object in your code.
Fill the data.orginalData value with your orginal charts data based on key
example data.orginalData.tax_in = [...]
In your datasets add name property with the corresponding key
Extend the Charts options with the tooltipCallback
Call data.updateModifiedData() to get the modified data
Checkout the jsFiddle for reference if you need to.
Have fun.
I have been working on a chart using charts.js that show workouts duration each day. The y-axis should have dates and the x-axis should have the duration of the Series,
Here is my dataset:
public lineChartData: ChartDataSets[] = [
{ data: [65, 19, 40, 81, 56, 5, 40], label: 'Series A' },
{ data: [95, 69, 40, 81, 56, 96, 40], label: 'Series B' },
{ data: [65, 74, 40, 41, 54, 55, 40], label: 'Series C' }
];
public lineChartLabels: Label[] = ['2020/05/20', '2020/05/21', '2020/05/22', '2020/05/23', '2020/05/24', '2020/05/25'];
So far I am unable to find any implementation-related it, it would be very helpful if anyone can help me out on this.
I have tried the stackblitz with horizontal with a bar chart, we need to same like in LINE CHART
Here is stackblitz link
You need to use a scatter chart and define the option showLine: true on each dataset. Further you have to define the y-axis as a time cartesian axis as follows.
yAxes: [
{
type: "time",
time: {
parser: "YYYY/MM/DD",
unit: "day",
displayFormats: {
day: "YYYY/MM/DD"
}
},
ticks: {
reverse: true
}
}
]
Since the scatter chart expects the data in point format, you have to generate appropriate data structure in the ngOnInit method as follows:
ngOnInit() {
this.lineChartData.forEach(ds => {
ds.data = ds.data.map((v, i) => ({ x: v, y: this.lineChartLabels[i] }));
});
}
Also remove [labels]="lineChartLabels" from the canvas, this is not needed when defining the data in point format.
Unfortunately however ng2-charts can't cope with this configuration and displays wrong colors for the data points and the legend labels. Therefore I also had to remove [colors]="lineChartColors" from the canvas and define the colors on the datasets.
You'll probably have to get rid of this wrapper library and use Chart.js directly in order to obtain the expected result.
Please take a look at your amended code in this StackBlitz.