Related
I have the following script for my chart.js charts and would like to add more data dynamically with a for loop.
Does someone know how to create the part I commented out with a for loop?
I appreciate your help a lot.
var LINECHART = $('#lineModal');
var myLineChart = new Chart(LINECHART, {
type: 'line',
options: {
elements: {
point:{
radius: 0
}
},
scales: {
xAxes: [{
display: true,
ticks: {
autoSkip: true,
maxTicksLimit: 2,
maxRotation: 0,
minRotation: 0
},
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
suggestedmax: 13000,
suggestedmin: 13000
},
display: true,
gridLines: {
display: false
}
}]
},
legend: {
display: legendState
}
},
data: {
labels: modalChartDates[0],
datasets: [
{
label: "Asset Price",
fill: true,
lineTension: 0.2,
backgroundColor: "transparent",
borderColor: "rgba(134, 77, 217, 0.57)",
pointBorderColor: "rgba(134, 77, 217, 0.57)",
pointHoverBackgroundColor: "rgba(134, 77, 217, 0.57)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
borderWidth: 2,
pointBackgroundColor: "#fff",
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointRadius: 0,
pointHitRadius: 5,
data: modalChartData[0],
spanGaps: false
},
// I would like to add more of these parts of the code with a for loop. Is that possible?
// Start
{
label: "Moving Average",
fill: true,
lineTension: 0.2,
backgroundColor: "transparent",
borderColor: "rgba(75, 75, 75, 0.7)",
pointBorderColor: "rgba(75, 75, 75, 0.7)",
pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
borderWidth: 2,
pointBackgroundColor: "#fff",
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointRadius: 0,
pointHitRadius: 5,
data: modalMovingAverageData[0],
spanGaps: false
}
// End
]
}
});
Yes it's possible. The code below add 10 objects to your dataset.
var LINECHART = $('#lineModal');
window.myLineChart=new Chart(LINECHART,
{
type: 'line',
options: {
elements: {
point:{
radius: 0
}
},
scales: {
xAxes: [{
display: true,
ticks: {
autoSkip: true,
maxTicksLimit: 2,
maxRotation: 0,
minRotation: 0
},
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
suggestedmax: 13000,
suggestedmin: 13000
},
display: true,
gridLines: {
display: false
}
}]
},
legend: {
display: legendState
}
},
data: {
labels: modalChartDates[0],
datasets: [
{
label: "Asset Price",
fill: true,
lineTension: 0.2,
backgroundColor: "transparent",
borderColor: "rgba(134, 77, 217, 0.57)",
pointBorderColor: "rgba(134, 77, 217, 0.57)",
pointHoverBackgroundColor: "rgba(134, 77, 217, 0.57)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
borderWidth: 2,
pointBackgroundColor: "#fff",
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointRadius: 0,
pointHitRadius: 5,
data: modalChartData[0],
spanGaps: false
},
{
label: "Moving Average",
fill: true,
lineTension: 0.2,
backgroundColor: "transparent",
borderColor: "rgba(75, 75, 75, 0.7)",
pointBorderColor: "rgba(75, 75, 75, 0.7)",
pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
borderWidth: 2,
pointBackgroundColor: "#fff",
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointRadius: 0,
pointHitRadius: 5,
data: modalMovingAverageData[0],
spanGaps: false
}
]
}
});
for(let i=0;i<10;i++){
myLineChart.data.datasets.push({
label: "item "+i,
fill: true,
lineTension: 0.2,
backgroundColor: "transparent",
borderColor: "rgba(75, 75, 75, 0.7)",
pointBorderColor: "rgba(75, 75, 75, 0.7)",
pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
borderWidth: 2,
pointBackgroundColor: "#fff",
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointRadius: 0,
pointHitRadius: 5,
data: modalMovingAverageData[0],
spanGaps: false
});
}
//Use the window object to update myLineChart
window.myLineChart.update();
Based on the official docs and the github repo of Chart.js
I'm using React Charts. I have a line chart and I'd like to be able to switch between 2 sets of data.
Using the tag I made a dropdown. Take a look at a live example:
https://codesandbox.io/s/mm2vnz6869
Go to the dropdown and switch to "Revenue". Notice that it switches to the other set of data as desired. But now try to switch back to "Spend". Notice it does not work.
Why is that? Can someone take a look at my logic and let me know what I'm doing wrong? Thanks.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Line } from 'react-chartjs-2';
let lineData;
const lineDataSpend = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
};
const lineDataRev = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Revenue - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'red',
borderColor: 'red',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'red',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [27, 9, 37, 31, 102, 42, 19]
},
{
label: 'Revenue - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'yellow',
borderColor: 'yellow',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'yellow',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [1, 29, 4, 112, 26, 49, 81]
}
]
};
lineData = lineDataSpend; //init the graph data to 'Spend'
class App extends Component {
constructor(props) {
super(props);
this.changeMetric = this.changeMetric.bind(this);
this.state = {
selectedMetric: 'Spend'
};
}
changeMetric(event) {
this.setState({
selectedMetric: event.target.value
});
switch (event.target.value) {
case 'Spend':
lineData = lineDataSpend;
break;
case 'Revenue':
lineData = lineDataRev;
break;
default:
}
}
render() {
const lineOptions = {
title: {
display: true,
text: 'Account 1 vs Account 2'
},
tooltips: {
enabled: true,
callbacks: {
label: function (value, data) {
console.log('data', data)
const currentLabel = data.datasets[value.datasetIndex].label;
return currentLabel + ': ' + '$' + value.yLabel;
}
}
},
legend: {
display: true
},
maintainAspectRatio: true,
scales: {
yAxes: [{
ticks: {
callback: function (value) {
return '$' + parseFloat(value.toFixed(2));
}
},
stacked: false,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
return (
<div>
<select onChange={this.changeMetric} value={this.state.selectedMetric}>
<option value="Spend">Spend</option>
<option value="Revenue">Revenue</option>
</select>
<div className="row">
<div className="col-xl-10">
<div className="card">
<div className="card-header">
<i className="fa fa-align-justify" />
</div>
<div className="card-block">
<Line data={lineData} options={lineOptions} />
</div>
</div>
</div>
</div>
</div>
)
}
}
render(<App />, document.body);
In addition to this, Is there a way we could show both graphs at once by using checkbox's? For example, if there are two checkbox's spent, revenue and few other options.If we check spent shows spent data on the graph, if we check both boxes or more it shows all those graphs as such. Please help.
Your lineData initialisation to lineDataSpend is causing the issue. If you directly assign a default object to lineData instead of making it hold the object of lineDataSpend, your problem gets solved.
So, if you change line 103,
lineData = lineDataSpend; //init the graph data to 'Spend'
to
lineData = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
}
your problem will get solved. You can test the fix here - https://codesandbox.io/s/3rko469pkm
But even I am not clear as to why your initial assignment is causing problem because the assignment looks perfectly fine. Will have to dig deeper to know the reason behind this issue.
function method() {
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
},
options: {
responsive: false,
}
});
I added a function to add a new value on the chart
function addvalue() {
myChart.data.labels.concat("August");
myChart.data.datasets[0].data.concat(55);
myChart.update();
but compiler say me "myChart is not declared" How can I draw the chart in this case?
I've just started with canvas and these charts
As Mihai has pointed out, read deeply into MDN's documentation about functions and about scope.
Your code needs to export or make the myChart variable accessible to other functions. Here is the quick and dirty fix - you need to decide what is best for your app.
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
},
options: {
responsive: false,
}
});
This is global scope (not the best), but it will allow your other function to access it:
function addvalue() {
// myChart is now globally accessible
myChart.data.labels.concat("August");
myChart.data.datasets[0].data.concat(55);
myChart.update();
}
Without knowing more context I can't specifically say to do something better (like require your chart into other code)
Scope is important and also you want to return something
function method() {
return new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
},
options: {
responsive: false,
}
});
var myChart = method();
function addvalue(myChart) {
myChart.data.labels.concat("August");
myChart.data.datasets[0].data.concat(55);
myChart.update();
return myChart;
}
i got a dynamically loaded Chart working on several browsers and also on my iPhone. But when i try to open the chart with phonegap on my iPhone the canvas is totally buggy.
Are there any known issues using Chart JS with Phonegap?
it should look like this:
but with Phonegap it looks like this:
HTML:
<div id="temp_graph" style="display:none;">
<h2 id="tmp_label"></h2>
<canvas id="myChart"></canvas>
CSS:
#temp_graph {
margin-top: 5%;
width: 90%;
background-color: #fff;
display: inline-block;
padding: 2%;
box-shadow: 0 0 10px 0 rgba(0, 0, 58, 0.05);
}
JS:
var temp_graph_div = document.getElementById('temp_graph');
var canvas = document.getElementById('myChart'),
ctx = canvas.getContext('2d'),
startingData = {
labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]],
datasets: [{
label: '°C',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(255, 205, 200,0.4)",
borderColor: "rgba(255, 205, 200,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
responsive: true,
maintainAspectRatio: true,
data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]]
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: startingData,
});
temp_graph_div.style.display = 'inherit';
Any ideas?
EDIT:
added a border for the canvas and opened the website via browser (safari ios)
added a border for the canvas and opened the website via phonegap
seems like the width is incorrect, but why are there different widths for the same mobile device?
i could fix the issue =)
The issue was caused by setting the div
temp_graph_div.style.display = 'inherit';
after creating the chart.
Now, my code looks like this (no big change, but big success):
var temp_graph_div = document.getElementById('temp_graph');
temp_graph_div.style.display = 'inherit';
var canvas = document.getElementById('myChart'),
ctx = canvas.getContext('2d'),
startingData = {
labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]],
datasets: [{
label: '°C',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(255, 205, 200,0.4)",
borderColor: "rgba(255, 205, 200,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
responsive: true,
maintainAspectRatio: true,
data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]]
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: startingData,
});
I'm using charts.js. For my current need, I managed to find a way to configure tooltips to be always visible regardless of the hover event. My problem is that the tooltip visibility does not follow the dataset behaviour. On charts.js, you can click on a dataset in order to remove it from the graph. My graph does that, but the tooltips are still there visible, floating within the graph with no dataset to represent. Is there a way to hide then with the dataset data when the label is clicked ?
Here is an example of the current state of what i said. https://jsfiddle.net/CaioSantAnna/ddejheg0/ .
HTML
<canvas id="linha"></canvas>
Javascript
Chart.plugins.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
ctx = document.getElementById("linha");
var linha = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
responsive: true,
animation: true,
},
{
label: "Second dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,0,0,0.4)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0,0,0,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [13, 78, 60, 75, 90, 10, 27],
spanGaps: false,
responsive: true,
animation: true,
}
]
},
options: {
tooltips: {
callbacks: {
title: function (tooltipItem, data) { return "" },
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return value;
}
}
},showAllTooltips: true
}
});
To reproduce the problem, just click in one of the labels on the top of the graph.
Thanks in advance.
Just to close the question, I ended up changing to amcharts(https://www.amcharts.com/). It has features like the one i was trying to achieve with chart.js and is free to use under a linkware license.
Thanks again.