When creating a Chart.js line chart everything works as expected on desktop. But when viewed on iOS (iPad, iPhone, etc) the data lines are not shown on the line chart.
See live example here: https://jsfiddle.net/9pcuvthy/. It is using the bundled 2.9.3 version of Chart.js.
You can view it on iOS or using https://www.browserstack.com/ to see the problem in action. This behaviour is happening on all iOS mobile browsers (Chrome, Firefox, and Safari).
How do I make the lines show on iOS?
/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];
/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "January";
monthYearArray[1] = "February";
monthYearArray[2] = "March";
monthYearArray[3] = "April";
monthYearArray[4] = "May";
monthYearArray[5] = "June";
monthYearArray[6] = "July";
monthYearArray[7] = "August";
monthYearArray[8] = "September";
monthYearArray[9] = "October";
monthYearArray[10] = "November";
monthYearArray[11] = "December";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
if (dateObj.getMonth() == 11) {
monthLabels[i] = monthYearArray[dateObj.getMonth()] + " " + dateYearLoop;
dateYearLoop = dateYearLoop + 1;
dateObj.setMonth(dateObj.getMonth() + 1);
} else {
monthLabels[i] = monthYearArray[dateObj.getMonth()] + " " + dateYearLoop;
dateObj.setMonth(dateObj.getMonth() + 1);
}
}
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: monthLabels,
datasets: [{
label: "Paid Leads / Traffic",
backgroundColor: "rgba(255, 98, 132, 0.5)",
borderColor: "rgb(255, 98, 132)",
data: lineDataPaid,
fill: false,
}, {
label: "SEO and Content",
backgroundColor: "rgba(46, 57, 191, 0.5)",
borderColor: "rgb(46, 57, 191)",
data: lineDataSEO,
fill: true,
}]
},
// Configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
return tooltipItems.yLabel + text;
}
}
},
legend: {
labels: {
fontSize: 14
}
},
responsive: true,
aspectRatio: 1,
//maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
type: "time",
time: {
unit: "month",
displayFormats: {
month: 'MMM YYYY'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Leads',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
beginAtZero: true,
max: 100,
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
}
}]
}
}
});
.chart-container {
position: relative;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="ROIchart"></canvas>
</div>
I figured it out, thanks to a warning SO showed in the code examaple.
The problem is that the dates I was passing in were not in ISO standard format, and therefore moments() was defaulting to the standard date() which does not work on all browsers.
I changed around the format and it now works fine.
/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];
/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "01";
monthYearArray[1] = "02";
monthYearArray[2] = "03";
monthYearArray[3] = "04";
monthYearArray[4] = "05";
monthYearArray[5] = "06";
monthYearArray[6] = "07";
monthYearArray[7] = "08";
monthYearArray[8] = "09";
monthYearArray[9] = "10";
monthYearArray[10] = "11";
monthYearArray[11] = "12";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
if (dateObj.getMonth() == 11) {
monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
dateYearLoop = dateYearLoop + 1;
dateObj.setMonth(dateObj.getMonth() + 1);
} else {
monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
dateObj.setMonth(dateObj.getMonth() + 1);
}
}
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: monthLabels,
datasets: [{
label: "Paid Leads / Traffic",
backgroundColor: "rgba(255, 98, 132, 0.5)",
borderColor: "rgb(255, 98, 132)",
data: lineDataPaid,
fill: false,
}, {
label: "SEO and Content",
backgroundColor: "rgba(46, 57, 191, 0.5)",
borderColor: "rgb(46, 57, 191)",
data: lineDataSEO,
fill: true,
}]
},
// Configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
return tooltipItems.yLabel + text;
}
}
},
legend: {
labels: {
fontSize: 14
}
},
responsive: true,
aspectRatio: 1,
//maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
type: "time",
time: {
unit: "month",
displayFormats: {
month: 'MMM YYYY'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Leads',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
beginAtZero: true,
max: 100,
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
}
}]
}
}
});
.chart-container {
position: relative;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="ROIchart"></canvas>
</div>
Related
I try to make the ticks the red. but it not working. When labels has not the labels - Sa/Su it work. All labels - grey, but when i have Su or Sa labels make just black color
ticks: {
fontSize: 9,
fontColor: curLabels.map((item) => {
if(item === 'Su' || item === 'Sa')
return 'red';
return 'rgba(0, 0, 0, 0.4)';
}),
maxRotation: 0,
},
Edited:
<div style={{height: '100%'}} className='position-relative'>
<Line
key='lineChart17'
data={dataForChart}
options={lineOptions}
style={{height: '90px', padding: '5px', width: '100%'}}
redraw
/>
</div>
Options for chart. I get error - ticks has not properties major. In console it just the string - Mo/Th/Fr/We/Su ...:
const lineOptions = {
animation: {
duration: 0
},
layout:{
padding:{
left: 0,
right: 0,
top: 5,
bottom: 0
}
},
maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
gridLines: {
display: true,
tickMarkLength: 1,
},
ticks: {
fontSize: 9,
fontColor: 'rgba(0, 0, 0, 0.4)',
maxRotation: 0,
major: {
enabled: true,
fontStyle: 'bold',
fontColor: 'red'
},
},
afterBuildTicks: (scale, ticks) => {
ticks.forEach(t => {
t.major = (t === 'Su');
});
return ticks;
},
}],
yAxes: [{
display: false,
gridLines: {
display: false,
tickMarkLength: 1,
},
}],
},
};
According to Chart.js documentation, the option ticks.fontColor doesn't accept an array but a simple string.
You can however define the style of your weekend ticks through the ticks.major configuration as follows.
ticks: {
major: {
enabled: true,
fontStyle: 'bold',
fontColor: 'red'
}
},
Further you need to mark the desired ticks as major through the afterBuildTicks callback.
afterBuildTicks: (scale, ticks) => {
ticks.forEach(t => {
const day = new Date(t.value).getDay();
t.major = (day == 0 || day == 6);
});
return ticks;
}
Please take a look at the runnable code snippet below.
const dates = [];
let day = new Date('2020-01-01');
for (let i = 0; i < 20; i++) {
dates.push(new Date(day.getFullYear(), day.getMonth(), day.getDate()));
day.setDate(day.getDate() + 1);
};
function generateData() {
return dates.map(d => ({ x: d, y: Math.floor(Math.random() * 10) + 1 }));
};
new Chart('myChart', {
type: 'bar',
data: {
datasets: [{
label: 'My Dataset',
data: generateData(),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'dd D MMM',
month: 'dd D MMM'
},
tooltipFormat: 'dd D MMM'
},
ticks: {
major: {
enabled: true,
fontStyle: 'bold',
fontColor: 'red'
}
},
afterBuildTicks: (scale, ticks) => {
ticks.forEach(t => {
const day = new Date(t.value).getDay();
t.major = (day == 0 || day == 6);
});
return ticks;
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 2
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>
I'm trying to create chart using Chart.js library. The X axis must be a timeline with this kind of time format: DD-MM-YYYY HH:MM:SS, but on the chart it gives incorrect dates and even my data does not display properly. If I remove HH:MM:SS part, the rest works fine. What's the problem? How can I display time in DD-MM-YYYY HH:MM:SS fromat?
Here is my fiddle: http://jsfiddle.net/vaxobasilidze/ak1vmj9q/
function factorData(data) {
let _data = data.map((e, i, a) => {
let prev = a[i - 1];
let next = a[i + 1];
if (e === prev && e === next) return '' + e;
return e;
}).map(e => typeof e === 'string' ? null : e);
return _data;
}
var ctx = document.getElementById('chart').getContext('2d');
var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/
var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});
var timeFormat = "DD-MM-YYYY HH:MM:SS";
var options = {
type: 'line',
data: {
datasets: [{
fillColor: gradient1,
backgroundColor: gradient1,
borderColor: gradient1,
fill: 'origin',
strokeColor: gradient1,
pointBackgroundColor: "#00b2ff",
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
data: datas,
steppedLine: true,
spanGaps: true
}, ]
},
options: {
responsive: true,
maintainAspectRatio: false,
datasetStrokeWidth: 1,
pointDotRadius: 3,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 1,
tooltipFillColor: "rgba(120,0,0,0.8)",
tooltipFontStyle: "bold",
animation: false,
scaleFontColor: "#ffffff",
scaleFontStyle: "bold",
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll',
min: new Date(2001, 1, 4, 1, 0, 0, 0),
},
ticks: {
maxTicksLimit: 21,
minRotation: 90,
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
}
}],
yAxes: [{
ticks: {
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
},
}]
}
},
}
var myLineChart = new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart" width="800" height="400" style="background: #202020"></canvas>
I believe you're looking for DD-MM-YYYY HH:mm:ss See moment.js for a list of allowable format tokens (chart.js uses the same formats which is specified here).
MM is for months (as you're using currectly in the DD-MM-YYYY section and SS is for fractional seconds. I dont think you are wanting either of those to display the time (could be wrong about that on the fractional seconds but definitely not months being the minutes)
If you're wanting your labels to have the time on them as well then you can use:
`type: "time",
time: {
displayFormats:{ timeFormat },
min: new Date(2001, 1, 4, 1, 0, 0, 0),
},`
Both of these solutions combined yield the following chart:
function factorData(data) {
let _data = data.map((e, i, a) => {
let prev = a[i - 1];
let next = a[i + 1];
if (e === prev && e === next) return '' + e;
return e;
}).map(e => typeof e === 'string' ? null : e);
return _data;
}
var ctx = document.getElementById('chart').getContext('2d');
var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/
/* var datas = [];
var labelss = [];
var quantity = 50;
for (var i = 0; i < quantity; i++) {
var test = Math.floor((Math.random() * 100) + 1);
datas.push(test);
labelss.push(i);
} */
var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});
var timeFormat = "DD-MM-YYYY HH:mm:ss";
var options = {
type: 'line',
data: {
//labels: labelss,
datasets: [{
fillColor: gradient1,
backgroundColor: gradient1,
borderColor: gradient1,
fill: 'origin',
strokeColor: gradient1,
pointBackgroundColor: "#00b2ff",
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
data: datas,
steppedLine: true,
spanGaps: true
}, ]
},
options: {
responsive: true,
maintainAspectRatio: false,
datasetStrokeWidth: 1,
pointDotRadius: 3,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 1,
tooltipFillColor: "rgba(120,0,0,0.8)",
tooltipFontStyle: "bold",
animation: false,
scaleFontColor: "#ffffff",
scaleFontStyle: "bold",
scales: {
xAxes: [{
type: "time",
time: {
displayFormats:{ timeFormat },
min: new Date(2001, 1, 4, 1, 0, 0, 0)
},
ticks: {
maxTicksLimit: 21,
minRotation: 90,
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
}
}],
yAxes: [{
ticks: {
fontColor: '#ffffff'
},
gridLines: {
color: "#444444"
},
}]
}
},
}
var myLineChart = new Chart(ctx, options);
I've created a line chart with two datasets, each one its own Y scale&axis using Chart.js.my datasets and options'code is like below.
datasets: [{ fill:false,
label: 'Heat',
yAxisID: "y-axis-1",
data: warm,
},
{ fill:false,
yAxisID: "y-axis-0",
label:'Mass',
data:volume,
]
options:{
scales: {
yAxes: [{ position: "left",
"id": "y-axis-0",
display: true,
ticks: { steps: 10,
stepValue: 5,
callback:(label,index,labels)=>{ return label + "%"; } }
},
{ position: "right",
"id": "y-axis-1",
display: true,
ticks: { steps: 10,
stepValue: 5,
callback:(label,index,labels)=>{ return label + " c"; } } }] }
}
it is looking like the folowing image at the moment.
when I toggle Mass label,the YAxes on the left is still appearing.I want to hide it if I toggle the labels.can you please guide me to solve this problem?
You could achieve this using the following chartjs plugin ...
Chart.plugins.register({
beforeDraw: function(c) {
var canvas_id = c.chart.canvas.id;
if (canvas_id === 'myChart') {
if (c.data.datasets[0]._meta[0].hidden) {
c.options.scales.yAxes[1].display = false;
} else c.options.scales.yAxes[1].display = true;
if (c.data.datasets[1]._meta[0].hidden) {
c.options.scales.yAxes[0].display = false;
} else c.options.scales.yAxes[0].display = true;
}
}
});
ᴅᴇᴍᴏ
Chart.plugins.register({
beforeDraw: function(c) {
var canvas_id = c.chart.canvas.id;
if (canvas_id === 'myChart') {
if (c.data.datasets[0]._meta[0].hidden) {
c.options.scales.yAxes[1].display = false;
} else c.options.scales.yAxes[1].display = true;
if (c.data.datasets[1]._meta[0].hidden) {
c.options.scales.yAxes[0].display = false;
} else c.options.scales.yAxes[0].display = true;
}
}
});
var canvas = document.getElementById('myChart');
var warm = [0, 0, 0, 0, 25, 25, 25, 25, 25, 25];
var volume = [98, 12, 0, 7, 7, 7, 7, 78, 62, 62];
var data = {
labels: ["23.05.2017 15:34:48", "23.05.2017 15:35:02", "23.05.2017 15:35:14", "23.05.2017 15:35:28", "23.05.2017 15:59:35", "23.05.2017 16:00:11", "23.05.2017 16:07:22", "23.05.2017 16:38:04", "23.05.2017 16:38:43", "23.05.2017 16:57:48"],
datasets: [{
fill: false,
label: 'Heat',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: "y-axis-1",
data: warm,
backgroundColor: "rgba(255,153,0,0.4)"
}, {
fill: false,
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: "y-axis-0",
label: 'Mass',
data: volume,
backgroundColor: "rgba(153,255,51,0.4)"
}]
};
var option = {
maintainAspectRatio: false,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: "left",
"id": "y-axis-0",
display: true,
ticks: {
steps: 10,
stepValue: 5,
//max: 100,
callback: (label, index, labels) => {
return label + "%";
}
}
}, {
position: "right",
"id": "y-axis-1",
display: true,
ticks: {
steps: 10,
stepValue: 5,
//max: 100,
callback: (label, index, labels) => {
return label + " c";
}
}
}]
}
};
var myLineChart = Chart.Line(canvas, {
data: data,
options: option
});
function adddata() {
myLineChart.data.datasets[0].data[7] = 50;
myLineChart.data.labels[7] = "test add";
myLineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
ChartJS v2.5.0
In the documentation there is legendCallback and generateLabels and I don't understand the documentation that much. Given my code below. How can I change the legends to make it into one legend per line,have a background and line chart legend should look like a line not a bar or in short how to customize the legend.
JS:
vm.labels = ['2015 - Aug', '2015 - Sept', '2015 - Oct', '2015 - Nov', '2015 - Dec', '2016 - Jan',
'2016 - Feb', '2016 - Mar', '2016 - April', '2016 - May', '2016 - Jun', '2016 - Jul', '2016 - Aug',
];
vm.series = [
'A',
'B',
];
vm.data = [
[14, 12, 17, 24, 29, 17, 23, 10, 16, 20, 33, 5, 8],
[50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
];
vm.colors = [
{
backgroundColor: 'rgba(0,104,26,1)',
borderColor: 'rgba(0,104,26,1)',
},
{
backgroundColor: 'rgba(56,80,143,1)',
borderColor: 'rgba(56,80,143,1)',
},
];
vm.options = {
scales: {
xAxes: [
{
ticks: {
callback: function (value) {
var values = value.split(' ');
var date = [values[0], values[2]];
return date;
},
},
},
],
yAxes: [
{
ticks: {
max: 100,
min: 0,
step: 20,
callback: function (value) {
return value + '%';
},
},
},
],
},
// legend
legend: {
display: true,
position: 'bottom',
},
// title
title: {
display: true,
text: 'Chart',
fontSize: 15,
},
// hover
hover: {
mode: 'single',
},
// tooltips
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItems, data) {
var idx = tooltipItems[0].datasetIndex;
var year = tooltipItems[0].xLabel[0];
var month = tooltipItems[0].xLabel[1];
if (idx === 0) {
return year + '-' + month;
} else {
return '';
}
},
label: function (tooltipItems, data) {
var idx = tooltipItems.datasetIndex;
var dataidx = tooltipItems.index;
var seriesValue = data.datasets[idx].label;
var value = data.datasets[idx].data[dataidx];
if (idx === 0) {
return seriesValue + ': ' + value + '%';
} else {
return seriesValue + ' (' + value + '%)';
}
},
},
},
};
vm.datasetOverride = [];
for (var i = 0; i < vm.series.length; i++) {
vm.datasetOverride.push(
{
lineTension: 0,
fill: false,
pointStyle: 'circle',
pointRadius: 0,
pointHoverRadius: 4,
pointHitRadius: 10,
type: 'line',
}
);
}
vm.datasetOverride[1].borderDash = [5, 1];
HTML
<canvas id="line"
class="chart chart-line"
chart-data="vm.data"
chart-labels="vm.labels"
chart-series="vm.series"
chart-options="vm.options"
chart-colors="vm.colors"
chart-dataset-override="vm.datasetOverride"></canvas>
Currently:
First of all, excuse me for my english!
I want to show a flot chart with jquery. My code is the following:
charts.chart_simple =
{
// data
data:
{
d1: []
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid:
{
color: "#dedede",
borderWidth: 1,
borderColor: "transparent",
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: false,
lineWidth: 2,
steps: false
},
points: {
show:true,
radius: 5,
lineWidth: 3,
fill: true,
fillColor: "#000"
}
},
xaxis: {
mode: "time",
tickColor: 'transparent',
tickDecimals: 2,
tickSize: 2
},
yaxis: {
tickSize: 10
},
legend: { position: "nw", noColumns: 2, backgroundColor: null, backgroundOpacity: 0 },
shadowSize: 0,
tooltip: true,
tooltipOpts: {
content: "%s : %y.3",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
placeholder: "#chart_simple",
// initialize
init: function()
{
// this.options.colors = ["#72af46", "#466baf"];
this.options.colors = [successColor, primaryColor];
this.options.grid.backgroundColor = { colors: ["#fff", "#fff"]};
var that = this;
if (this.plot == null)
{
this.data.d1 = new Array();
var o = 0;
for(var i = 0; i < data.length; i++){
var group = data[i];
for(var e = 0; e < group.length; e++){
var elem = new Array(date, intVal);
this.data.d1[o] = elem;
o++;
}
}
}
this.plot = $.plot(
$(this.placeholder),
[{
label: "Consumo Medio",
data: this.data.d1,
lines: { fill: 0.05 },
points: { fillColor: "#fff" }
}], this.options);
}
};
// uncomment to init on load
charts.chart_simple.init();
The problem is the variable "date". If I put a number it works perfectly.
Variable "date" has this format -> 2014-02-26
You have to use timestamps. See the documentation for explanation and examples.
Thank you very much for your replies.
Finally I found the solution.
var data1 = new Array();
var o = 0;
for(var i = 0; i < data.length; i++){
var group = data[i];
for(var e = 0; e < group.length; e++){
var date = group[e][0];
var year = date.substring(0,4)
var month = date.substring(5,7)
var day = date.substring(8,10)
console.log(year + " | " + month + " | " + day);
var elem = new Array(gd(year, month, day), (group[e][1]/group[e][2]));
data1[o] = elem;
o++;
}
}
var dataset = [
{
label: "Consumo Semana",
data: data1,
color: "#FF0000",
xaxis:2,
points: { fillColor: "#FF0000", show: true },
lines: { show: true }
}
];
var dayOfWeek = ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"];
var options = {
series: {
shadowSize: 5
},
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: 0,
axisLabel: "2012",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "Gold Price in USD/oz",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
xaxes: [{
mode: "time",
tickFormatter: function (val, axis) {
return dayOfWeek[new Date(val).getDay()];
},
color: "black",
position: "top",
axisLabel: "Weekday",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
{
mode: "time",
timeformat: "%d/%m",
tickSize: [1, "day"],
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}],
grid: {
hoverable: true,
borderWidth: 2,
borderColor: "#633200",
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
},
colors: ["#FF0000", "#0022FF"]
};
$.plot($("#chart_simple_2"), dataset, options);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
The problem was the way that I was introducing date data. With this tutorial I found the answer.
http://www.jqueryflottutorial.com/how-to-make-jquery-flot-time-series-chart.html
Thank you very much again!
Regards!