I’m looking for a chart libraly javascript. It can draw line chart and call to rest api every few seconds (5s or 3s) then update the line chart. I searched its calling live chart updating by json but it draw only data in my json api i want it continue drawing. Can you help me. Many many thanks.
If you want to have Charts in your project then you may want to take a look at Chartjs. It's a great library providing all the charts one may need, such as Line, Bar, Pie, and many others.
Creating a chart is easy, e.g:
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: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'oranges',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
For additional example you may want to see this introduction to Chart.js.
For dynamically updating your Charts check directly the Updating Charts Docu. An example from the link:
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
Related
I am trying to achieve the Tooltip shown below in the first image. Inside of the tooltip I need to display the yAxes and xAxes data. The chart.js version I am using is 3.7.0
My tooltip looks like this:
The tooltip that I am trying copy:
The chart.js documentation is quite hard for me to understand. Is there any guru that can explain to me.
Question: Why is my tooltip returning the yAxes data, that I return as a variable(label) as undefined?
Are there any other options I can use to make my chart look like the chart in the second picture?
My Code:
tooltip: {
displayColors: false,
backgroundColor: 'rgba(45,132,180,0.8)',
bodyFontColor: 'rgb(255,255,255)',
callbacks: {
title: function(item, everything){
return;
},
label: function(item, everything){
//console.log(item);
//console.log(everything);
let first = item.yLabel;
let second = item.xLabel;
let label = first + ' ppm';
return label;
}
}
}
Thank you in advance for your time and efforts, please help me figure out what am I doing wrong!
yLabel and xLabel dont exist anymore on the tooltip, they are V2 syntax.
You can just axess the y object in the parsed section to get the y value. Then you can use the afterBody callback to show the x label like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
tooltip: {
displayColors: false,
backgroundColor: 'rgba(45,132,180,0.8)',
bodyFontColor: 'rgb(255,255,255)',
callbacks: {
title: () => {
return
},
label: (ttItem) => (`${ttItem.parsed.y} ppm`),
afterBody: (ttItems) => (ttItems[0].label)
}
}
}
}
}
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/3.7.0/chart.js"></script>
</body>
I've got a horizontal stacked bar chart rendered in Chart.js, and the legend corresponds to the different classes. Here's a bit of it (working on a dummy dataset, disregard the nonsense names):
The labels on the left are users, the labels in the legend (which correspond to the classes in the bar chart, i.e. the different datasets) are mailing lists. The chart, basically, shows how many users are members of specific mailing lists; the length of the bar is how many mailing lists a given user is a member of.
What I'd like to do is set it up so hovering over an entry in the legend will highlight (ideally with a border or something) the portions of the bar chart corresponding to that dataset. So if I hovered over the first dataset entry, the blue block at the left end of all those bars (except "anionic") would get a highlight.
Using the onHover and onLeave events for the legend, I'm successfully console.log'ing the currently-hovered dataset index. But I can't figure out how to make the bar elements belonging to that dataset highlight.
With the new upcomming release of version 3 you can do this with the setActive elements.
Documentation: https://www.chartjs.org/docs/master/developers/api/#setactiveelementsactiveelements
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
hoverBackgroundColor: 'green',
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
hoverBackgroundColor: 'red',
}
]
},
options: {
scales: {}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
chart.setActiveElements([{
datasetIndex: 0,
index: 1,
}, {
datasetIndex: 1,
index: 1,
}]);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.10/chart.js" integrity="sha512-7igYTuENB1pHNsZ/SyzMYrcJAmRCk084yVOsxNNCQAdX1wSYvCeBOgSOMC6wUdKMO76kCJNOpW4jY3UW5CoBnA==" crossorigin="anonymous"></script>
</body>
Using ChartJS 3 setActiveElements API, you can highlight an entire dataset on legend hover using the following code in options.plugins.legend
onHover: function (event, legendItem) {
const datasetIndex = legendItem.datasetIndex;
let elementList = [];
for (let i = 0; i < this.chart.getDatasetMeta(datasetIndex).data.length; i++) {
elementList.push({
'datasetIndex': datasetIndex,
'index': i,
});
}
this.chart.setActiveElements(elementList);
this.chart.update();
}
I am working on a project using chart.js for work and I need to know if there is a way to add some space between datasets of a pie chart.
What I have so far is in the chart depicted below, and I want there to be some padding between the inner and outer datasets.
I have tried setting one of the charts to a doughnut type or adding a thicker outer border on the inner chart, and neither of those are what I needed.
You can obtain the desired result by adding an empty dataset between the two existing ones and defining a weight property on the empty and the inner dataset.
const colors = ["#FF6384", "#36A2EB", "#FFCE56"];
var pieChart = new Chart("myChart", {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [8, 5, 6],
backgroundColor: colors,
},
{
weight: 0.2
},
{
data: [5, 7, 4],
backgroundColor: colors,
weight: 1.2
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I tried many way and didnt get the result
may please help how can i generate this kind of chart in highchart.
That series will be available since Highcharts v8.0.0: https://github.com/highcharts/highcharts/issues/11311. For now you can use a combination of scatter and line series:
var scatterData = [2, 3, 7, 8, 9],
series = [{
type: 'scatter',
data: scatterData
}];
scatterData.forEach(function(el, i) {
series.push({
dashStyle: 'ShortDash',
data: [
[i, 5],
[i, el]
]
});
});
Highcharts.chart('container', {
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/uwcL0h8b/
API Reference: https://api.highcharts.com/highcharts/series.line.dashStyle
Is it possible to have multiple charts inside each other:
Please check js fiddle for "single" and what I would like is to have that as a first one, inside second one and so on...
var data = [
{
label: "title 1",
value: 32,
color: "#444334"
}, {
label: "title 2",
value: 51,
color: "#f0f0f0"
}, {
label: "title 3",
value: 17,
color: "#8ba43a"
}];
Check image attached (sorry about bad graphic)
Thanks.
You can do this with jqplot or chart.js
An example from jsplot:
$(document).ready(function(){
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
var plot3 = $.jqplot('chart3', [s1, s2], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
dataLabels: 'value'
}
}
});
});
According to the jqplot page, it requires minimum of jquery 1.9.1, along with it's main jqplot, plus jqplot pieRenderer/donutRenderer scripts and the jqplot css.
The code above will produce something like this:
You can add another series, which will create a third circle.