I have a specific query.
Following is my script for highcharts. When I run this sript, I get a memory leak issue. Maybe someone can help. I need to show the x-axis in exponential scale, like
100,000
1,000,000
10,000,000
and so on.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'dvCon'
},
title: {
text: 'Construction: Duration vs Productive Hours'
},
xAxis: [{
type: 'logarithmic',
title: {
text: 'Construction Hours'
}
}],
yAxis: [{
labels: {
formatter: function () {
return this.value;
},
style: {}
},
showEmpty: true,
title: {
text: 'Duration',
style: {}
}
}, ],
tooltip: {
formatter: function () {
return '' + this.x + ': ' + this.y;
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Other Projects',
type: 'scatter',
data: [[560000, 13], [185250, 11], [3625788, 23], [1648510, 21], [265000, 14], [13000000, 43], [28000000, 34], [1567000, 19], [1190000, 20], [21000000, 31], [7000000, 33], [3805200, 30], [17000000, 29], [1503267, 21], [11332332, 29], [1485067, 20], [5000000, 30], [5400000, 22], [13000000, 23], [3810000, 26], [810000, 18], [27528218, 26], [377319, 14], [840000, 22], [550000, 13], [2643142, 26], [412800, 13], [2500000, 22], [4510000, 19], [523116, 15], [17600000, 28], [2500000, 21], [21000000, 29], [3500000, 17], [620000, 15], [163000000, 46], [134000000, 41], [45000000, 39], [13677454, 31], [167000000, 52], [47000000, 33], [49000000, 38], [31000000, 38]]
},
{
name: 'User Data',
type: 'scatter',
data: [[40050000, 35]]
}]
});
The code works fine, except the additional , after the yAxis object.
jsFiddle > http://jsfiddle.net/SSCEk/
Maybe the issue happens with a particular version of highcharts, jquery or a browser?
Related
I want to upload a chart in my react app but when I use this Barchar.jsx component (have used js nothing changed) it is showing following errors in console(are in image.)
import React from "react";
import { Bar, Chart } from "react-chartjs-2";
import {Chart as ChartJS, BarElement } from 'chart.js';
ChartJS.register(BarElement)
const BarChart = () => {
var data = {
labels: ['RCB', 'MI', 'RR', 'SRH', 'CSK', 'KXIP', 'DD', 'DCH', 'GL', 'RPS', 'KKR'],
datasets: [{
label: '# of toss wins',
data: [70, 85, 63, 35, 66, 68, 72, 43, 15, 6, 78],
backgroungColor: ['red', 'lightblue', 'pink', 'orange', 'yellow', 'gold', 'blue', 'black', 'gold', 'voilet', 'purple' ],
borderWidth: 1
}]
};
var options = {
maintainAspectRatio: false,
scales: {
y:{
beginAtZero: true
}
},
};
return (
<div>
<Bar
data= {data}
height={400}
width={600}
options={options}
/>
</div>
)
};
export default BarChart ;
Its because you try to use treeshaking but import and register only the element of the bar while chart.js needs a lot more.
For ease of use you are best of to change
import {Chart as ChartJS, BarElement } from 'chart.js';
ChartJS.register(BarElement)
into:
import 'chart.js/auto'
If you really want to use treeshaking you should look at the docs and import and register everything you are using:
https://www.chartjs.org/docs/3.7.1/getting-started/integration.html#bundlers-webpack-rollup-etc
SO BASSICALLY MISTAKE WHICH I DID WAS I DIDN'T IMPORT THIS BARCHART IN APPJS.CORRECT CCODE WILL BE LIKE THIS (FOR BARCHART.JSX) YOU CAN CHANGE IN IT MANY THINGS.
import React from "react";
import { Bar } from "react-chartjs-2";
import 'chart.js/auto'
const BarChart =() => {
return <div>
<Bar
options={{
scales: {
y: {
beginAtZero: true
}
}
}}
data ={{
labels: ['RCB', 'MI', 'RR', 'SRH', 'CSK', 'KXIP', 'DD', 'DCH', 'GL', 'RPS', 'KKR'],
datasets: [{
label: '# of toss wins',
data: [70, 85, 63, 35, 66, 68, 72, 43, 15, 6, 78],
backgroundColor: ['red', 'Blue', '#ff64dc', '#fc7404', 'yellow', 'red', '#000080', 'silver', 'gold', '#9400d3', 'purple' ],
borderColor:['black'],
borderWidth: 1
},
{
label: '# of match wins',
data: [73, 92, 63, 42, 79, 70, 62, 29, 13, 10, 77],
backgroundColor: ['#C9920E', 'Blue', '#ff64dc', '#fc7404', 'yellow', 'lightgrey', '#000080', 'silver', 'gold', '#9400d3', 'purple' ],
borderColor:['black'],
borderWidth: 1
}
]
}}
/></div>
};
export default BarChart ;
As shown in the screenshot, there are days where I have a null value... I would like to connect the dataset with a line regardless of a particular day being null. Is this possible in chart.js 2.x?
You can set spangaps to true:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, null, 2, 3],
borderColor: 'pink',
fill: false,
spanGaps: true
},
{
label: '# of Points',
data: [7, null, null, 8, 3, 7],
borderColor: 'orange',
fill: false,
spanGaps: true
}
]
},
options: {}
}
const 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/2.9.4/Chart.js"></script>
</body>
I need make different get requests to backend
depending on whether I move forward or backward on the table. What event I must use and how to make this?
You could use #pagination event from data-table. It emits an object like this:
{page: 2, itemsPerPage: 5, pageStart: 5, pageStop: 10, pageCount: 2}
So you can capture it in a custom method and determine if 'page' value is higher or lower than current value in order to know if is forward or backward. An example:
<template>
<div>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
#pagination="writeLog"
></v-data-table>
</div>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
currentPage = 1
},
methods: {
writeLog(paginationObject){
let action
console.log(paginationObject);
this.currentPage < paginationObject.page ? action = 'forward' : action ='backguard'
this.currentPage = paginationObject.page
console.log(action)
//Write code to call your backend using action...
}
},
}
</script>
I am trying to create a line chart using chartjs-node package. Below is the code. When I give the data of dataset as a small set like data: [20, 15, 60, 60, 65, 30, 70], it works fine. But if I change it to a list that I want to populate as in dataFirst dataset below, I get the error "ReferenceError: CanvasGradient is not defined". I donot understand the reason. Please help. Thanks.
public createChart(cData) {
const chartNode = new chart(1000, 800);
const dataFirst = {
label: 'Heat Sink',
data: cData,
lineTension: 0.3,
fill: false,
borderColor: 'red',
backgroundColor: 'transparent',
pointBorderColor: 'red',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: 'rect',
};
const dataSecond = {
label: 'TVK Channel 9',
data: [20, 15, 60, 60, 65, 30, 70],
lineTension: 0.3,
fill: false,
borderColor: 'purple',
backgroundColor: 'transparent',
pointBorderColor: 'purple',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHitRadius: 30,
pointBorderWidth: 2,
};
const chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black',
},
},
};
const speedData = {
labels: ['0s', '10s', '20s', '30s', '40s', '50s', '60s'],
datasets: [dataFirst, dataSecond],
};
const chartJsOptions = {
type: 'line',
data: speedData,
options: chartOptions,
};
I found the solution. The number of labels should match the number of data points.
In canvas for node implementation you need to export CanvasGradient class yourself. According to this issue: https://github.com/Automattic/node-canvas/issues/990
You can do this:
["CanvasRenderingContext2D", "CanvasPattern", "CanvasGradient"].forEach(obj => {
console.log(obj, canvas[obj])
global[obj] = canvas[obj]
})
Here my code
<div id="chart-revenue3" style="width:1100px; height:480px;" > </div>
var series = [{
data: [
[0, 100],
[1, 150],
[2, 125],
[3, 160],
[4, 95]
],
label: "Generes",
color:"#4598AE"
},
{
data: [
[0, 104],
[1, 157],
[2, 178],
[3, 145],
[4, 78]],
label: "Playlists",
color:"#8AA453"
}, {
data: [
[0, 55],
[1, 40],
[2, 60],
[3, 10],
[4, 20]
],
label: "Home",
color:"#A84745"
}, {
data: [
[0, 55],
[1, 40],
[2, 60],
[3, 10],
[4, 20]
],
label: "Search",
color:"#D98445"
}, {
data: [
[0, 55],
[1, 40],
[2, 60],
[3, 10],
[4, 20]
],
label: "New and Hot",
color:"#71598E"
},
{
data: [
[0,150],
[1, 200],
[2, 250],
[3, 120],
[4, 90]
],
label: "# Venues",
points: { show: false },
lines: { show: true,fill: false},
yaxis: 2,
color:"#81A0C1"
}];
var options = {
xaxis: {
minTickSize: 1,
ticks: [[0,'Dafault'],[1,'Alternative'],[2,'Country'],[3,'Latin'],[4,'Rock']]
}, yaxes: [
{
},
{
position: "right" , min:0, max: 1200, tickSize: 200
}
],
series: {
bars: {
show: true,
barWidth: .3,
align: "center",fillColor: {
colors: [{ opacity: 1 }, { opacity: 1 } ]
}
},
stack: true,
shadowSize:1
},
legend: { show: true, container: '#chart-revenue3-table' }
};
$.plot("#chart-revenue3", series, options);
so if i run this code am getting some extra color on bar chart..please give any idea
Ok, now I understand what you are trying to do. What you are missing is that you need to tell flot not to plot the # Venues series as a bar:
{
data: [
[0, 150],
[1, 200],
[2, 250],
[3, 120],
[4, 90]
],
label: "# Venues",
points: {
show: false
},
lines: {
show: true,
fill: false
},
yaxis: 2,
bars: {
show: false // <-- this is the bit you were missing
},
color: "#81A0C1"
}
http://jsfiddle.net/BrEJm/6/
The reason you need to do this is because in your options you set:
series: {
bars: {
show: true,
//...
}
}
And the way flot works is that it will merge those default set of series options with whatever explicit options you set for each series. So, even if you don't specify, all your series inherit bars.show = true.