it's the first time i am using billboard.js so i'm having difficulties working with timeseries data, here's my try:
exemple of the data:
{
"values":{
[5,8],[2020-02-07T07:06:01.591Z,2020-02-07T07:06:03.812Z]
}
}
how i'm trying to display it (not sure if MS exists):
chart = bb.generate({
bindto: "#chart",
data: {
x: "x",
xFormat: "%Y-%m-%dT%H:%M:%S.%MSZ",
type: "line",
columns: [
["x",data.values[1]],
["nbr evenements",data.values[0]]
]
},
axis:{
x:{
type:"timeseries",
localtime:false,
tick: {
format: "%Y-%m-%d %H:%M:%S.%MS"
}
}
}
});
i tried this instead, it worked fine:
chart = bb.generate({
bindto: "#chart",
data: {
x: "x",
xFormat: "%Y-%m-%dT%H:%M:%S.%LZ",
type: "line",
columns: [
["x"].concat(data.values[1]),
["nbr evenements"].concat(data.values[0])
]
},
axis:{
x:{
type:"timeseries",
localtime:false,
tick: {
format: "%Y-%m-%dT%H:%M:%S"
}
}
}
});
Related
I'm trying to highlight a specific part in a graph by date. The graph is dates in X axis and value in Y axis. I tried doing like this example but I get the error TypeError: Cannot read properties of undefined (reading 'coord')
This is my graph's code:
{
xAxis: {
type: "category",
data: xaxis,
show: true,
axisLabel: {
formatter: function(params:any){
return (new Date(params)).toLocaleString('pt-BR')
}
}
},
yAxis: {
type: "value",
name: 'Eficiência de Consumo (Nm³/ton)',
axisLabel: {
formatter: '{value}'
}
},
dataZoom: [
{
type: 'inside'
}
],
tooltip: {
trigger: "axis",
formatter: function(params:any){
const seriesName = params[0].seriesName
const timeStamp = (new Date(params[0].axisValue)).toLocaleString('pt-BR')
const eficiencia = params[0].value
return `${seriesName} <br/> ${timeStamp}: ${eficiencia} Nm³/ton`
},
axisPointer: {
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
orient: 'horizontal',
top: 'top'
},
visualMap: {
show: false,
pieces: [
{
min: startAlertTime,
max: endAlertTime,
color: '#FBDB0F'
}
]
},
series: [{
data: yaxis,
name: 'Eficiência de Consumo',
type: "line",
}]}
startAlertTime and endAlertTime are ISO timestamps like so '2022-06-13T10:42:22.772Z'. I'd like to highlight the graph between those two points. This is my graph with no VisualMap:
Graph with no visualmap
This is what I'd like to do based on the timestamps on the X axis:
Desired output
visualMap is going to color the line. If you want to color an area (like in your desired output), you'll have to use series.markArea. Both are used on the example you gave.
My JSON looks like this:-
{
"date": "2021-11-02T11:09:10.000+00:00"
"classification": "Internal",
}
And I want to plot "date" on X-axis and "classification" as a value in the Series.
But there is no way I found to plot it as a value.
Any suggestions??
I'm not sure what you are looking for.. but you can set the yAxis type also to "category":
option = {
dataset: {
source: [
{
date: '2021-11-02T11:09:10.000+00:00',
classification: 'Internal'
},
{
date: '2021-11-03T11:09:10.000+00:00',
classification: 'External'
}
]
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'category'
},
series: [
{
encode: {
x: 'date',
y: 'classification'
},
type: 'line'
}
]
};
I would appreciate any help that I can get with this
I need to plot a pie chart with 4 standard pies: ABC, BCD, CDE and DEF
Each Pie has a data point coming in from my GraphiQL resolver which looks like this:
{
"data": {
"metrics": {
"A": 56147.85,
"B": 116480.51,
"C": 56147.85,
"D": 120329.45000000001,
}
}
}
This is my highchart code for piechart
function PieChart() {
const { loading, error, data } = useQuery(CONC, {
variables: {
Currency: 'USD',
Date: {
date: '2019-05-01',
date_range: ['2019-05-01', '2019-06-10'],
},
Options: {
a: {
prop: '44',
csprop: ['14', '14', '40', '60'],
},
d: {
prop: '104',
csprop: ['511', '289', '519', '62'],
},
},
C: 'G',
Incl: false,
DFilters: [
{
by: 'P',
values: [],
},
],
},
});
const Top = [];
const First = [];
const Second = [];
const Rest = [];
data &&
data.metrics.forEach((e) => {
Top.push(e['A']);
First.push(e['B']);
Second.push(e['C']);
Rest.push(e['D']);
});
return (
<HighchartWrapper
chartOptions={{
chart: {
type: 'pie',
height: 230,
// width: 565,
},
title: {
text: '',
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
},
accessibility: {
point: {
valueSuffix: '%',
},
},
exporting: {
enabled: false,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
},
},
series: [
{
name: 'R',
data: [
{ name: 'ABC', y: Top},
{ name: 'BCD', y: First},
{ name: 'CDE', y: Second},
{ name: 'DEF', y: Rest},
],
},
],
}}
/>
);
}
export default memo(PieChart);
PROBLEM:
The GraphiQL query is generating results.
But I believe it's the way I am trying to push data that's giving me an empty pie chart
Thank you all in advance
I'm trying to display chart like this one, with following data:
[{"name":"doctor","monetary":"on","number":57},{"name":"programmer","monetary":"non-monetary","number":15}]
but I can't group monetary on or of value with the rest of the data.
Is there some other way to display chart with these data?
Here is the definition in controller:
$scope.chart = c3.generate({
bindto: d3.select('#chart'),
data: {
json: $scope.data,
columns: [
['monetary'],
['number']
],
keys: {
value: ['doctor', 'programmer']
},
groups: [
['number'],['monetary']
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
});
},
function formatData ( json ) {
var formattedData = [],
object = {};
// fill object with data
angular.forEach(json, function(row) {
if (row.hasOwnProperty('name') && row.hasOwnProperty('number')) {
this[row.name] = row.number;
}
},object);
formattedData.push(object); // push c3 object in the array
return formattedData;
}
}]);
Remove this part of code if I am not wrong then it will display separately
groups:
[ ['number'],['monetary']],
After modification the code is as below and also a fiddle link has been given.
var chart = c3.generate({
data: {
columns: [
['MONETARY', 0, 3259, 10415, 14660, 2950, 16705, 22255, 4000],
['NON-MONETARY', 12335, 18041, 35900, 21985, 15110, 370, 13055, 20740]
],
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: ['DENTIST', 'PROGRAMMER/ANALYST', 'CORPORATE SECRETARY', 'PHYSICIAN', 'PROFESSOR', 'PRESIDENT', 'MANAGER', 'CO-OWNER']
}
}
});
See the modified fiddle:
http://jsfiddle.net/63cp42Lv/4/
Im using ng-google-chart to create charts from data I receive from a database. I store the data in a table. I need to export both the table and the chart.
I'm using the following technique to export tables (where "exportable" is the div the contains the table):
$scope.export = function ()
{
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Record.xls");
alert("export done");
};
I cannot find any way to add the chart to this file.
This is the code to generate a chart
var chart1 = {};
chart1.type = "ColumnChart";
chart1.cssStyle = "height:400px; width:500px;";
chart1.data = {
"cols": [
{ id: "gender", label: "Gender", type: "string" },
{ id: "number", label: "number", type: "number" }
], "rows": [
{
c: [
{ v: "male" },
{ v: $scope.male, f: $scope.male }
]
},
{
c: [
{ v: "female" },
{ v: $scope.female }
]
}
]
};
chart1.options = {
"title": "",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Number", "gridlines": { "count": 6 }
},
"hAxis": {
"title": "gender"
}
};
chart1.formatters = {};
$scope.chart = chart1;
}
To getImageURI of the chart, wait for the ready event and call the function.
Then you can add the image somewhere on the page.
You can even hide the original chart if needed...
Following is an example of loading the image URI into another element.
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById("chart_image").insertAdjacentHTML('beforeEnd', '<img alt="Chart Image" src="' + chart.getImageURI() + '">');
});
chart.draw(view, options);
}
<script src="https://www.google.com/jsapi"></script>
<span>CHART</span>
<div id="chart_div"></div>
<br/>
<span>IMAGE</span>
<div id="chart_image"></div>