I'm rendering a timeseries line graph using FusionCharts as follows:
const MyChart = () => {
const schema = [
{
name: "Category",
type: "string"
},
{
name: "Time",
type: "date",
format: "%Y-%m-%d"
},
{
name: "Value",
type: "number"
}
]
const data = [
["CategoryToStyle", "2022-09-01", 5],
["CategoryToStyle", "2022-10-01", 10],
["Category2", "2022-09-01", 2],
["Category2", "2022-10-01", 7]
]
const dataStore = new FusionCharts.DataStore().createDataTable(data, schema);
const chartSettings = {
type: "timeseries",
dataSource: {
data: dataStore,
series: "Category",
yAxis: {
format: {
prefix: "$"
}
}
}
}
return <ReactFC width={1024} height={1024} {...chartSettings} />
}
The chart renders 2 line plots, one for the "CategoryToStyle" series and one for "Category2" series.
How can I customize the "stroke-width" of the line plot for the series "CategoryToStyle"?
Related
I am displaying a bar chart that has 3 different pieces of information, (project name, number of days remaining, and the end date.) I am displaying the project name on one axis, and the number of days remaining determines the height of the bar. Currently, when I hover over a bar the tooltip displays the information already on the x and y axis. I want it to instead have the end date.
ie: project "b" will end in 2 days (August 4th), when I hover over the bar I want the tooltip to say "End date of 2022-08-04" instead of "b Work Days Remaining: 2"
My json of the data looks like this:
[{"po_num": "a", "days_rem": 10, "date_end": "2022-08-16"},
{"po_num": "b", "days_rem": 2, "date_end": "2022-08-04"},
{"po_num": "c", "days_rem": 6, "date_end": "2022-08-10"}]
Here is the link of the current graph.
https://i.stack.imgur.com/HefRz.png
Here is an MS paint rendering of what I am trying to do:
https://i.stack.imgur.com/GAT2I.png
The implementation code:
link = "{{{BASE_BACK_URL}}}";
$.getJSON(link, function (data) {
let po_names = [];
let days_rem = [];
for (let i = 0; i < data.length; i++) {
po_names.push(data[i]["po_num"]);
days_rem.push(data[i]["days_rem"]);
}
const ctx = document.getElementById('po-timeline-chart');
const myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: po_names,
datasets: [{
label: 'Work Days Remaining',
data: days_rem,
backgroundColor: 'rgb(0, 89, 178)'
}],
},
options: {
legend: {
align: "end"
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
Solution listed below:
$.getJSON(link, function (data) {
let po_names = [];
let days_rem = [];
for (let i = 0; i < data.length; i++) {
po_names.push(data[i]["po_num"]);
days_rem.push(data[i]["days_rem"]);
}
const ctx = document.getElementById("po-timeline-chart");
const myChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: po_names,
datasets: [
{
label: "Work Days Remaining",
data: days_rem,
backgroundColor: "rgb(0, 89, 178)",
},
],
},
options: {
tooltips: {
enabled: true,
callbacks: {
// To change title in tooltip
title: (data) => {
return "This PO will run out on";
},
// To change label in tooltip
label: (data) => {
return date_end[data['index']];
},
},
},
legend: {
align: "end",
},
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
});
I have few values like A and B now I have pair of them I am showing them on chart-js like this
Now for my use case, I am calculating the third value using A and B. E.g a=100 and b=50, and dividing them will give me c=2.0. Now I want to show this c value on top of A and B bar as a common label like this
"chart.js": "^3.3.0",
react-js
const newChartInstance = new Chart(chartContainer.current, {
type: "bar",
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
...config.options,
onClick: (e) => {
const points = newChartInstance.getElementsAtEventForMode(
e,
"nearest",
{ intersect: true },
true
);
if (points.length) {
const firstPoint = points[0];
var type =
newChartInstance.data.datasets[firstPoint.datasetIndex].label;
var label = newChartInstance.data.labels[firstPoint.index];
var value =
newChartInstance.data.datasets[firstPoint.datasetIndex].data[
firstPoint.index
];
// This is the result that you will use to breakdown the chart
//console.log(label, value, type);
dispatch(setClickedBar({ label, value, type, tile: props.tile }));
}
},
},
data: data,
});
You can use a custom plugin for that:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
plugins: {
customValue: {
name: 'ROI',
}
}
},
plugins: [{
id: 'customValue',
afterDraw: (chart, args, opts) => {
const {
ctx,
data: {
datasets
},
_metasets
} = chart;
datasets[0].data.forEach((dp, i) => {
let barValue = `${(datasets[1].data[i] + dp) / 2}%`;
const lineHeight = ctx.measureText('M').width;
const textVal = opts.name || 'fill'
ctx.textAlign = 'center';
ctx.fillText(barValue, _metasets[0].data[i].x, (_metasets[0].data[i].y - lineHeight * 1.5), _metasets[0].data[i].width);
ctx.fillText(textVal, _metasets[0].data[i].x, (_metasets[0].data[i].y - lineHeight * 3), _metasets[0].data[i].width);
});
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
I want to import my JSON file to Echarts to make a line chart but failed, the result page is totally blank. I search it in google but couldn't find a proper answer.
This is the JSON:
[
{ "category": "A", "value": 1 },
{ "category": "B", "value": 2 },
{ "category": "C", "value": 3 },
{ "category": "D", "value": 7 }
]
var dataArr = [];
var myChart = echarts.init(document.getElementById('demo'));
$.get('data.json', {}, function(response) {
dataArr = JSON.parse(response);
initEchart();
});
function initEchart() {
// specify chart configuration item and data
var option = {
title: {
text: 'entry example'
},
tooltip: {},
xAxis: {
type: 'category',
data: dataArr.category
},
yAxis: {},
series: [{
type: 'line',
data: dataArr.value
}]
};
myChart.setOption(option);
}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js" integrity="sha256-eKrx6Ly6b0Rscx/PSm52rJsvK76RJyv18Toswq+OLSs=" crossorigin="anonymous"></script>
<div id="demo" style="width: 600px;height:400px;"></div>
Thank you for helping me solve this problem.
I fixed your version. You tried to pass to the chart empty data because key dataArr.category does not exist. You received array so need collect data with loop: dataArr.map(row => row['category']) and will be ok.
var dataArr = [];
var myChart = echarts.init(document.getElementById('demo'));
$.get('https://gist.githubusercontent.com/creadone/d15105b0c7e33848ef9559c28a9912c2/raw/64a17c5ac38b375cd6ab858d51a66836d9259ed0/data.json', {}, function(response) {
dataArr = JSON.parse(response);
console.log(dataArr);
initEchart();
});
function initEchart() {
// specify chart configuration item and data
var option = {
title: {
text: 'entry example'
},
tooltip: {},
xAxis: {
type: 'category',
data: dataArr.map(row => row['category'])
},
yAxis: {},
series: [{
type: 'line',
data: dataArr.map(row => row['value'])
}]
};
myChart.setOption(option);
}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js" integrity="sha256-eKrx6Ly6b0Rscx/PSm52rJsvK76RJyv18Toswq+OLSs=" crossorigin="anonymous"></script>
<div id="demo" style="width: 600px;height:400px;"></div>
I have an array Object:
total =
[
{
date: 5/12/2017,
count: 5,
type: A
},
{
date: 5/15/2017,
count: 15,
type: A
},
{
date: 5/12/2017,
count: 4,
type: B
},
{
date: 5/15/2017,
count: 5,
type: C
}..
]
I wondering how to loop them in a line chart using CanvasJS, each line presents each type, the x-axis presents date, the y-axis presents count
Here is what I have so far:
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "My Counts"
},
axisX: {
title: "Date",
},
axisY: {
title: "Count"
},
data: []
});
You can run a for loop over your array and store dataPoints in different variable to later use it in your chart.
var dps1 = [];
var dps2 = [];
var dps3 = [];
for(var i = 0; i < total.length; i++) {
if(total[i].type === "A") {
dps1.push({x: new Date(total[i].date), y: total[i].count});
} else if(total[i].type === "B") {
dps2.push({x: new Date(total[i].date), y: total[i].count});
} else if(total[i].type === "C") {
dps3.push({x: new Date(total[i].date), y: total[i].count});
}
}
Once you store you dataPoints, you'll need to use it in your chart.
data: [{
type: "line",
dataPoints: dps1
}, {
type: "line",
dataPoints: dps2
}, {
type: "line",
dataPoints: dps3
}]
I am trying to create a C3 bar chat. Need to pass the JSON dynamically.
JSON: JSONdata
{ "applicationName": "app1", "frequency": 1 }, { "applicationName": "app2", "frequency": 54 }, { "applicationName": "app3", "frequency": 3 }
I have the below code and it does not work.
Tried using JSONdata.stringify() too.
var chart = c3.generate({
data: {
type: 'bar',
json: [
JSONdata
],
keys: {
x: 'applicationName',
value: ['frequency']
}
},
axis: {
x: {
type: 'category'
}
},
bar: {
width: {
ratio: 0.5
}
}
});
All that had to be done was:
var config = {};
config.data = {};
config.axis= {};
config.data.json = JSONdata;
config.data.type = 'bar';
config.data.keys= {
x: 'applicationName',
value: ['frequency']
};
config.axis = {
x: {
type: 'category'
}
};
config.bar = {
width: {
ratio: 0.9
}
};
var chart = c3.generate(config);