I am getting data from an api and then reformatting part of it into an array using .map(), I am successfully able to do this, but when it comes time to pass it into Chart JS as data it does work. I am able to pass in a normal, hard coded, array but not my own data...
I tried using an Angular directive (NG2-Charts) to help out thinking maybe that was the problem, but that doesn't work either...
Component.ts:
... Other variable and stuff up here...
getStockData() {
this.stocksService.getStockData()
.subscribe(
(response) => {
for(var i = 0; i < response.length; i++) {
this.stockOpen.push(response[i]['open']);
}
console.log('after loop: ', this.stockOpen);
},
(error) => console.error(error)
);
console.log('real: ', this.stockOpen);
console.log('test: ', this.testData);
}
// Chart JS version
buildStockChart() {
var ctx = document.querySelector("#chart");
this.chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1,2,3,4,5],
datasets: [
{
data: this.stockOpen,
borderColor: "#3cba9f",
fill: false
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}],
}
}
});
}
// NG2-Charts version
public lineChartData:Array<any> = [
{data: this.testData},
];
public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions:any = {
responsive: true
};
Result from console.log():
i also have same problem with chart JS on angular so i force to use another chart.
im now using angular 2 chart js.
i think the problem here is the delay of data fetch by API, the CHART component is already render on html view but the data is still not fetch by the API service.
try to add this code on your code block. This will handle the data if API service data is available.
()=>{this.buildStockChart();}
this.stocksService.getStockData()
.subscribe(
(response) => {
for(var i = 0; i < response.length; i++) {
this.stockOpen.push(response[i]['open']);
}
console.log('after loop: ', this.stockOpen);
},
()=>{
this.buildStockChart();
}
);
console.log('real: ', this.stockOpen);
console.log('test: ', this.testData);
}
This chart is easy to manage for dynamic instances.
Hope this chart will work on you.
https://www.npmjs.com/package/angular2-chartjs
When are you calling the buildStockChart() method?
You should call it right after the for loop into the callback you pass to the subscribe method, since that's the moment when this.stockOpen is populated (before that moment it will be empty as you are seeing in the console).
As #Joseph Agbing, I was unable to get it work with angular 7. I'm now using chart.js only
npm install chart.js --save
with into my someChart.component.html
<div style="display: block"><!--Mandatory div including chart-->
<canvas id="canvas">{{chart}}</canvas>
</div>
into my someChart.component.ts
called from my httpClient.post(...).subscribe(lData => (setChartDataFromEntities(lDataProcessed), ...)
import { Chart } from 'chart.js';
export class someClass {
/**
*
* #param aDate
* #param aChargeUnitArray
*/
setChartDataFromEntities( aDate: Date, aChargeUnitArray: ChargeUnit[] ){
console.debug('setChartDataFromEntities->', aChargeUnitArray)
let lChartDataArray = []
let lChartDataLineDataArray: Array<Number> = []
let lChartLabelsArray: string[] = []
let l_s: string
aChargeUnitArray.forEach(element => {
lChartDataLineDataArray.push(element.charge)
lChartLabelsArray.push(MiscHelper.dateTimeHMSForChart(element.timestamp))
});
lChartDataArray.push(
{
data: lChartDataLineDataArray,
label: MiscHelper.dateForGui(aDate),
}
)
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: lChartLabelsArray,
datasets: lChartDataArray
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}],
}
}
});
this.statusMessage = 'Chart loaded'
}
hope it helps somebody more than the day I wasted trying to get it work...
Related
I have been tasked with formatting some columns in charts using vue-google-charts, a vue.js wrapper for Google Charts and I am not sure that 'NumberFormat()' is even supported in vue-google-charts.
First, if somebody knows if it is or isn't, I would like to know so I don't waste much time pursuing something that isn't possible. But if it is, I sure would love an example of how to do it.
What we are doing is returning our chart data from the database and passing it into this vue.js wrapper. We are creating several charts but there are columns that have commas in them we want to remove.
Please review the existing code. I am trying to implement this using #ready as documented in the docs for vue-google-charts.
vue-google-charts docs -> https://www.npmjs.com/package/vue-google-charts
Here is our existing code with a little framework of the onChartReady method already in place.
<GChart
v-if="chart.data"
id="gchart"
:key="index"
:options="{
pieSliceText: chart.dropDownPie,
allowHtml: true
}"
:type="chart.ChartType"
:data="filtered(chart.data, chart.query, chart.query_type)"
:class="[
{'pieChart': chart.ChartType == 'PieChart'},
{'tableChart': chart.ChartType == 'Table'}
]"
#ready = "onChartReady"
/>
And then ...
<script>
import { GChart } from 'vue-google-charts';
import fuzzy from 'fuzzy';
import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';
export default {
components: {
GChart,
Icon
},
props: {
},
data() {
return {
charts: window.template_data,
selected: 'null',
selects: [],
chartToSearch: false,
directDownloads: {
'Inactive Phones' : {
'slug' : 'phones_by_status',
'search_by' : 2,
'search' : '/Inactive/'
},
'Active Phones' : {
'slug' : 'phones_by_status',
'search_by' : 2,
'search' : '/Active/'
},
}
}
},
created(){
for (let i in this.charts){
if( !this.charts[i].slug ) continue;
$.post(ajaxurl, {
action: 'insights_' + this.charts[i].slug,
}, (res) => {
console.log(res.data);
if (res.success) {
this.$set(this.charts[i], 'data', res.data);
}
});
}
// console.log(this.charts);
},
methods: {
onChartReady(chart,google) {
let formatter = new.target.visualization.NumberFormat({
pattern: '0'
});
formatter.format(data, 0);
chart.draw(data)
},
toggleChart(chart) {
jQuery.post(ajaxurl, {
'action': 'update_insight_chart_type',
'chartType': chart.ChartType,
'chartSlug': chart.slug
}, (res) => {
chart.ChartType = res.data
})
},
csvHREF(chart) {
return window.location.href + '&rr_download_csv=' + chart.slug + '&rr_download_csv_search_by=' + chart.query_type + '&rr_download_csv_search=' + chart.query.trim()
},
filtered(data, query, column) {
query = query.trim();
if (query){
let localData = JSON.parse(JSON.stringify(data));
let column_Headers = localData.shift();
localData = localData.filter((row)=>{
if( query.endsWith('/') && query.startsWith('/') ){
return new RegExp(query.replace(/\//g, '')).test(String(row[column]));
}
return String(row[column]).toLowerCase().indexOf(query.toLowerCase()) > -1;
});
localData.unshift(column_Headers);
return localData;
}
return data;
},
filterIcon(chart) {
chart.searchVisible = !chart.searchVisible;
chart.query = "";
setTimeout(()=>{
document.querySelector(`#chart-${chart.slug} .insightSearch`).focus();
}, 1);
}
}
}
document.getElementsByClassName('google-visualization-table')
If anybody can help in ANY way, I am all ears.
Thanks!
not familiar with vue or the wrapper,
but in google charts, you can use object notation in your data,
to provide the formatted values.
all chart types will display the formatted values by default.
google's formatters just simply do this for you.
so, in your data, replace your number values with objects,
where v: is the value and f: is the formatted value...
{v: 2000, f: '$2,000.00'}
see following working snippet...
google.charts.load('current', {
packages: ['table']
}).then(function () {
var chartData = [
['col 0', 'col 1'],
['test', {v: 2000, f: '$2,000.00'}],
];
var dataTable = google.visualization.arrayToDataTable(chartData);
var table = new google.visualization.Table(document.getElementById('chart_div'));
table.draw(dataTable);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to update the values of my chart after aplying or clearing filters with the following code
<div class="col-xs-8 card-container" style="padding: 0 0 0 0">
<mat-card height="100%" style="padding: 16px 0px 16px 16px !important; height:100%">
<mat-card-title style="text-align:center;">Gráfica</mat-card-title>
<mat-card-content>
<div style="display: block; width: 100%" id="canvasContainer" *ngIf="!emptyData()">
<canvas id="myChart"></canvas>
</div>
<div style="display: block; width: 100%" *ngIf="emptyData()">
<h3>Pendiente de evaluar.</h3>
</div>
</mat-card-content>
</mat-card>
this is the html where I render the chart on the canvas with id myChart
this is the code where I generate my first chart, it only executes once and it works
setup(): void{
const maxValue = this.getMaxValue();
var ctddx = document.getElementById('myChart');
var canvas = <HTMLCanvasElement> document.getElementById('myChart');
if(canvas !== null) {
this.ctx = canvas.getContext("2d");
this.chart= new Chart(this.ctx, {
type: 'bar',
data: {
labels: this.labels,
datasets: [{
data: this.values,
borderWidth: 3,
fillColor: this.colors,
backgroundColor: this.colors,
borderColor: this.colors
}]
},
options: {
responsive: true,
legend: {
display: false
},
hover: {
mode: 'label'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (Number.isInteger(value)) { return value; } },
suggestedMax: maxValue,
}
}],
xAxes: [{
fontSize: 35,
barThickness : 65
}],
},
plugins: {
datalabels: {
// align: 'start',
// anchor: 'start',
clamp: true,
}
}
}
});
this.initialized = true;
}
}
till this point the code works and render the first chart correctly.
Now when I try to apply filters or clear filters it doesn't render anything this is the following code
modifyChart(labels,values){
let oldchart = this.chart;
this.removeData();
this.addData(labels,values);
console.log(oldchart===this.chart);
}
removeData() {
this.chart.data.labels.pop();
this.chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
this.chart.update();
}
addData(label, data) {
this.chart.data.labels.push(label);
this.chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
this.chart.update();
}
It doesn't work, it render nothing and I even tried to compare previously chart with new chart introducing the same values it had, and it returns true, so even being the same Chart, it isn't rendering
I think the problem has to be because update deletes de canvas and create it again, but after a while I can't find a workaround
Ok, so I managed to fix this, I hope this answer can help someone who faces the same problem with re rendering Charts on the same canvas if update doesn't work.
first of all I had this lifecycle method
ngAfterContentChecked(): void {
if (!this.initialized && !this.emptyData()) {
this.setup();
}
}
So I can render the first chart it can't be done on OnInit because you need the canvas to be ready, so with this I'm always waiting for canvas to be ready like my method setup I posted on the question
setup(): void{
const maxValue = this.getMaxValue();
var canvas = <HTMLCanvasElement> document.getElementById('myChart');
if(canvas !== null) {
...
this.initialized = true;
}
}
the problem with Update I think that it also destroys the canvas and create a new one with the same Id, so I think it tries to render the chart before the canvas is ready, so I made a workaround like this
after applying all filters needed and retrieving the new data
modifyChart() {
this.chart.destroy();
this.initialized = false;
}
with this code, my ngAfterContentChecked is going to call for setup till canvas is ready and change initialized to true again
I know this is probably not the best workaround, but at least it fixed my problem
I'm using web component and OpenAPI. and my web component works by valuable [options]'s data.
it's a pie chart and divided by DATA_VALUE's value and ITEM_NAME is label to show!
I extract data from OpenAPI and want to add to array of [data] in var options.
I need to use rows[1] to [11] but now I'm using only rows[1] and it work's well.
so now i'm trying to do for statement rows[1] to [11]!
I'm wondering how can i add rows[1] to [11]'s data to [data] in var options?
i tried like this but it occurs error. guess it isn't on right location or wrong .
options.data.push({DATA_VALUE: dataV, ITEM_NAME2: itemNm2});
this is entire code.
<body>
<div class='pie'></div>
<script>
var styles = {
legend: {
use: true,
stackedGap: 5,
type: 'insideLegend',
text: {
family: 'Nanum Gothic',
size: 17,
color: '#333333',
style: 'normal', /* normal | italic */
weight: 'bold', /* normal | bold */
opacity: 1
}
}
};
$.ajax({
url: 'http://openapi.crimestats.or.kr/WiseOpen/PoliceDataList/ZTEADTY42D1XJ9XPOZDG/json/1/15/2016/22/01010000006/?/',
type: 'GET',
dataType: 'json',
success: function (resp) {
console.log(resp);
var rows = resp.PoliceDataList.row;
if (rows) {
var representativeRow = rows[1],
/* statNm = representativeRow.STAT_NAME,
baseYear = representativeRow.BASE_YEAR,
itemNm1 = representativeRow.ITEM_NAME1;*/
itemNm2 = representativeRow.ITEM_NAME2;
dataV = representativeRow.DATA_VALUE;
console.log(itemNm2);
console.log(dataV);
/*
var dataArray = [];
$.each(rows, function (idx, row) {
var tmp = [];
tmp.push(row.ITEM_NAME2);
tmp.push(Number(row.DATA_VALUE));
dataArray.push(tmp);
});
console.log(dataArray);
var jsonEncode = JSON.stringify(dataArray);
console.log(jsonEncode);*/
var options = {
data: {
data: [
{DATA_VALUE: dataV, ITEM_NAME2: itemNm2}
]
,
use: 'DATA_VALUE'
},
legend: {
use: 'ITEM_NAME2'
}
};
options.data.push({DATA_VALUE: dataV, ITEM_NAME2: itemNm2});
pie = webponent.visual.pie.init($(".pie"), styles, options);
}
}
});
</script>
</body>
this is example value of OpenAPI
{
"PoliceDataList":{
"list_total_count":12,
"row":[
{
"ITEM_NAME1":"강간",
"ITEM_NAME2":"계",
"ITEM_CODE2":"X0001",
"ITEM_CODE1":"01010000006",
"STAT_NAME":"검거자",
"DATA_VALUE":"5916",
"STAT_CODE":"22",
"BASE_YEAR":"2016"
},
{
"ITEM_NAME1":"강간",
"ITEM_NAME2":"수사·형사",
"ITEM_CODE2":"X0003",
"ITEM_CODE1":"01010000006",
"STAT_NAME":"검거자",
"DATA_VALUE":"979",
"STAT_CODE":"22",
"BASE_YEAR":"2016"
},
{
"ITEM_NAME1":"강간",
"ITEM_NAME2":"외근·112차",
"ITEM_CODE2":"X0004",
"ITEM_CODE1":"01010000006",
"STAT_NAME":"검거자",
"DATA_VALUE":"1032",
"STAT_CODE":"22",
"BASE_YEAR":"2016"
},
options.data.data.push({DTA_VAL: dataV, ITM_NM: itemNm2});
this works well!
I am trying to make some charts with custom data in jsreport and using Chart.js, the problem is that i don't know how to use custom data to fill my chart with. So far, i created a very big json with my data and the function to generate the chart and place inside a canvas, but i can't call the function inside my html with the handlebars because it says the document is not defined. So, how can i use my data to create my charts and display it inside a canvas?
P.S.: I can easily display a chart with static data, but i really want to do this using the json that i created.
My function to create my chart:
function graficoEstiloAdaptado(exame){
var ctx = document.getElementById('graficoEsquerdo').getContext('2d');
var total = 280;
var incentivador = 0;
var idealizador = 0;
var detalhista = 0;
var sociavel = 0;
for(var i=0;i<exame.respostas.length;i++){
for(var j=0;j<exame.respostas[i].alternativas.length;j++){
switch(exame.respostas[i].alternativas[j].categoria){
case 'Incentivador':
incentivador += 4-j;
break;
case 'Idealizador':
idealizador += 4-j;
break;
case 'Detalhista':
detalhista += 4-j;
break;
case 'Sociável':
sociavel += 4-j;
break;
}
}
}
var porcentagens = {
incentivador: (incentivador/total).toFixed(1),
idealizador: (idealizador/total).toFixed(1),
detalhista: (detalhista/total).toFixed(1),
sociavel: (sociavel/total).toFixed(1)
};
var chartEstiloAdaptado = new Chart(ctx, {
type: 'bar',
data: {
labels: [porcentagens.incentivador + "%", porcentagens.idealizador + "%", porcentagens.detalhista + "%", porcentagens.sociavel + "%"],
datasets: [{
label: "Gráfico I",
data: [
porcentagens.incentivador,
porcentagens.idealizador,
porcentagens.detalhista,
porcentagens.sociavel
]
}]
},
options: {
animation: {
onComplete: function() {
window.JSREPORT_READY_TO_START = true;
}
}
}
});
}
And i don't want to use an API to get the data yet, i just want to structure the report the way i like and after that use an API to fetch the data.
The main idea is described in this blog:
Define helper function which makes JSON string from the parameter
function toJSON(data) {
return JSON.stringify(data);
}
And call this helper in inline script
<script>
var data= {{{toJSON this}}}
</script>
The full example with chart.js can look like this
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js'></script>
</head>
<body>
<canvas id='myChart' style="margin-top:30px"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'apples',
data: {{{toJSON A}}},
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'oranges',
data: {{{toJSON B}}},
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
animation: {
onComplete: function () {
// set the PDF printing trigger when the animation is done
// to have this working, the phantom-pdf menu in the left must
// have the wait for printing trigger option selected
window.JSREPORT_READY_TO_START = true
}
}
}
});
</script>
</body>
</html>
Working playground demo can be found here.
So I have a large amount of data that I need to display all stored in separate CSV files. So I created two charts just fine in highcharts, one line, one area, but instead of copying and pasting the function over and over again I was hoping I could just iterate through it like so:
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var libraryLength = library.length;
var area =['#attendanceRoom','#attendanceGroup'];
var i = 0;
function areaChart(){
$(function () {
$.get(library[i], function(csv) {
$(area[i]).highcharts({
chart: {
type: 'area'
},
data: {
csv: csv
},
title: {
text: 'Attendance by Room'
},
yAxis: {
title: {
text: null
},
minorTickInterval: 'auto'
},
legend:{
align: 'left',
verticalAlign: 'top',
floating: true
},
});
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart();
}
I was looking at this Manage multiple highchart charts in a single webpage using jQuery.extend() or Highcharts.setOptions but that sets options for each individual chart and then you just make them over and over again. I thought a better solution might be to just have the one function and then just re-run it for each individual chart especially since I'm pulling the data from .CSV files.
So is this possible? Or should I go with jQuery.extend()?
Thanks for any help in advance!
Just two things I would improve:
$(function () { }); - I would encapsulate whole JS, not only part with AJAX and Highcharts:
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
...
for (i = 0; i < libraryLength; i++){
areaChart();
}
});
make library[i] and area[i] as arguments for areaChart():
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
...
function areaChart(lib, area){
$.get(lib, function(csv) {
$(area).highcharts({
chart: {
type: 'area'
},
data: {
csv: csv
}
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart(library[i], area[i]);
}
});
Of course, you can add more params to areaChart for example type, and pass on what kind of the chart should be rendered:
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var types = ['line', 'area'];
...
function areaChart(lib, area, type){
$.get(lib, function(csv) {
$(area).highcharts({
chart: {
type: type
},
data: {
csv: csv
}
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart(library[i], area[i], types[i]);
}
});
Don't overdo with the params, no one likes to read 10params and control order etc. Instead you may consider passing one object param (renamed from areaChart to myChart):
myChart({
lib: library[i],
area: area[i],
type: types[i]
});
And in myChart() method:
function myChart(options) {
$.get(options.lib, function(csv) {
$(options.area).highcharts({
chart: {
type: options.type
},
data: {
csv: csv
}
});
});
}