I encountered a problem when using Irregular time data chart in highcharts to draw a chart. problem as follows:
this is the series array:
series : [
{
name:'test chart'
data:[
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25]
......
]
}
]
If the length of data array of a serie in series array is more than 1000,the chart won't be drawn ,and it shows blank ,but when the length of the data array is less than 1000,the chart shows normally.why? and how to fix it?is it a limitation of highchart for Irregular time data chart ?
Check turbo-threshold property if set ,Highcharts works well even for 1 million points. Share the fiddle with problem
Update : similar question answered already by Highchart Champ sebastian at Highcharts 3 cannot render more than 1000 points in one series
use : http://api.highcharts.com/highcharts#plotOptions.series.turboThreshold
in your series
series: [
{
type: 'scatter',
name: 'some name',
data: something,
turboThreshold: 7000,}
]
Related
I need to create a Line chart, which works with multiple datasets, and with numbers that vastly differ from dataset to dataset
For example
// Tracks how much on average a customer has spend
const averagePurchaseValueDataset = {
label: 'Average Purchase Value',
dataset: [25.50, 28.50, 24.30, 26.40 ]
}
// Tracks on average how much the customer spends browsing the app
// tracked in seconds
const sessionDurationDataset = {
label: 'Session Duration',
dataset: [80, 120, 90, 85, 93]
}
// Tracks how many products the customer has purchased in one session
const averageItemsPurchased = {
label: 'Average Items Purchased',
dataset: [3, 2, 1, 1]
}
I need to create a single chart with 3 different lines on it, which are stacked on top of each other.
ChartJS does this by default when the datasets consist of similar values ( like 1-10 ), however, in my datasets, the ranges vary vastly - one dataset can have numbers between 1-10 and another one 5000-1000, but I still want them stacked on top of each other.
The goal of this chart is not to compare the literal values in each dataset, but their changes from one interval to the next.
For example these two datasets [10, 11] and [1000, 1100] should plot two lines which are stacked exactly on top of each other, because the difference is 10% in both cases
i think if you want to create a single chart with 3 different lines, you have to make the data in one dataset. sorry im not good in explaining things but you can checked code below.
const data = {
label: 'Multi Line',
dataset: [
{label: 'Average Purchase Value',
data: [25, 28, 24, 26]},
{label: 'Session Duration',
data: [80, 120, 90, 85]},
{label: 'Average Items Purchased',
data: [3, 2, 1, 1]},
]
}
hope it can help you
Ended up using the Multi-axis feature of ChartJS
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
I am using chart.js line chart. I can use the chart correctly but if I have only one plot point then the chart doesn't create a line from start to that point. I want to draw a line from the start of the chart to that single plot point without placing a plot point on that first day as we don't have data in the database for it.
Current chart behaviour:
Need a line like drawn here from the start of the chart:
Is this possible to draw a line on the chart from start to that point? Maybe some start point property or a hidden x-axis attribute on the chart to achieve this?
Also, any possible way to remove that space from top before that "Extreme" point on Y-Axis?
I have done hard research on it, have read the docs multiple times but unable to achieve them.
Have you tried Area charts with fill set to false? Check out the samples here https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html
It's kind of a hack but you can append the data with an extra point and update its styles to keep it hidden, Refer to our fiddle https://jsfiddle.net/hpdr5jf1/
Relative code
var options = {
type: 'line',
data: {
labels: ["", "Actual Data"],
datasets: [
{
label: 'Data Point',
data: [12, 12],
pointRadius: [0],
pointHitRadius: [0],
borderWidth: 1,
fill: false,
borderColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);
I have a line graph which can drop down in a straight line. e.g. I have a point at (1, 100) then a point at (1,0). However, highcharts (https://www.highcharts.com/) will only display information for one of the points. Is it possible to get it to show information on both points when I hover over each of them?
The default for line type series is findNearestPoint: 'x' https://api.highcharts.com/highcharts/plotOptions.line.findNearestPointBy .
If you change that to findNearestPoint: 'xy', you'll get the behavior you want.
Highcharts.chart('container', {
series: [{
findNearestPointBy:'xy',
data: [
[0, 29.9],
[1, 50],
[1, 71.5],
[3, 106.4]
]
}]
});
http://jsfiddle.net/vt1cep0L/2/
I work with chart js version 2.5.0. I have a bubble chart and I would like that when a bubble is clicked, it keep the tooltip corresponding remains displayed.
I tried to make a plugin, in which it is enough to add a keepTooltipOpen parameter in the data like that:
datasets: [{
type: 'bubble',
label: "set2",
data: [{
x: 14,
y: 30,
r: 60,
//Here is the added parameter.
keepTooltipOpen: true
}, {
x: 2,
y: 5,
r: 30
}]
You can find the Fiddle here. There is an error in afterDatasetsDrawwhen the tooltip is update. Open web console to see it.
Someone have a suggestion to resolve this problem?
In chart.js version 2.5.0, you need to write _options: chart.options.tooltips,instead of _options: chart.options,.
New Fiddle is here.
While its more than likely an error of my own making could someone help me.
I have a polarchart with 6 datapoints that only displays 5 datapoints when plotted.
If its an issue I'll open 1 on GitHub but I was thinking that if its down to my poor code maybe its worth opening an issue to prevent others having the same issue
Using only the chartjs available via CDN link https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js , jquery 1.12.3 and the following script in a basic html file
can anyone reproduce the issue where the chart has 6 labels, 6 data points but **only plots 5 **
All files included in uploaded zip file
PolarChart.zip
<script>
$(document).ready(function(){
var ctx = $("#mypolar").get(0).getContext("2d");
// Polar Chart Data
//labels "Communicate ", "Create ", "Find & Use", "Identity & Wellbeing", "Teach & Learn", "Tools & Technology"
var data = {
datasets: [{
data: [1, 3, 5, 6, 2, 4],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360","#F7554A"],
label: 'My dataset' // for legend
}],
labels: ["Communicate & Collaboarate", "Create & innovate", "Find & Use", "Identity & Wellbeing", "Teach & Learn","Tools & Technology"]
};
//Plot the Radar Chart
var myRadarChart = new Chart(ctx, {
type: 'polarArea',
data: data,
//options: options
});
});
</script>
All your points are being plotted (if you count the number of sectors there are 6 sectors). The problem was that your scale was beginning from the lowest value (1 - the value of your first point) causing nothing to be seemingly plotted for the 1st point.
You can override the scale to begin from 0 if you want to show all points
...
options: {
scale: {
ticks: {
beginAtZero:true
}
}
}
Fiddle - http://jsfiddle.net/ja08nzm5/