I'm trying to use an array from my indexedDB, to plot a graph on Chart.js for my web application. I've attached the code from my javascript file where the array is obtained.
The array looks like this Objarr = ["34", "89"] and the numbers are added to the array when the user inputs these.
But I'm not able to say data: Objarr in my javascript code for the chart? Please, may you help me?
Javascript Code:
var chart = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(chart, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July"],
datasets: [{
label: " Peak flow values",
fill: false,
data: Objarr,
}
]
Related
This question already has answers here:
Chartjs hide dataset legend v3
(2 answers)
Closed 1 year ago.
I am new to ChartJS but this feels like I am running into a bug. I wrote the jsFiddle below as an example to demonstrate the issue.
https://jsfiddle.net/4mxvb3yg/
HTML
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<canvas id="myChart"></canvas>
Javascript
var servicelabels = ["January", "February", "March", "April", "May", "June", "July"];
var servicechartData = [65, 0, 80, 81, 56, 85, 40];
barColors = ["#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000","#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000"];
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: { labels: servicelabels, datasets: [{ data: servicechartData, backgroundColor: barColors}]},
options: { legend: {display: false }}});
Currently, the fiddle is behaving as I want it to (bar chart with NO legend, as its display property is set to false). However, if you uncomment the top line in the HTML to use the CDN link as the source, it no longer respects the disabled legend.
The project that I am currently working on would require this cdn source link, and I need the legend to be disabled, hence my problem.
Any advice would be great, and thank you for taking a look.
Andrew
It might be due to version mismatch,
as per the latest version of chart.js, in order to remove the legend.
The CDN might be using the latest chart.js
options: {
plugins:{
legend: {
display: false
},
}
}
I create a ApexChart with empty values because I dynamically add series and labels.
var options777 = {
chart: {
height: 397,
type: 'line',
toolbar: {
show: false,
}
},
series: [{
name: 'Elegibility',
type: 'column',
data: []
}],
stroke: {
width: [0, 4]
},
// labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: [],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Elegibility',
}
}
};
var chart777 = new ApexCharts(
document.querySelector("#elegibilityChart"),
options777
);
if (document.getElementById('elegibilityChart')) {
chart777.render();
}
Then, I have a function that receives two arrays, one with the series data and other with label data. The arrays are same size, series contains numbers and labels strings.
function setData(mySeries, myLabels) {
chart777.updateOptions({
series: {
data: mySeries
},
labels: myLabels
})
}
When I run my code, it returns: error TypeError: "options$$1.series[0] is undefined"
How can I update the series and labels in the ApexChart?
Thanks
If you're updating both the series and the labels, this will need to be done in two separate calls.
Use the updateSeries method to provide the new data series (as an array).
Use the updateOptions method to provide the new labels (as an object that will merge with the existing options, keeping any configurations not overridden).
chart1.updateOptions({
xaxis: {
categories: year
},
series: [{
data: trend
}],
});
You should use code like this, I mean you should update xaxis categories instead of labels and also comment labels in options and instead use xaxis categories.
I am using the latest Codeigniter and MorrisJS.
I have created a View for the Charts and passing dynamic data through JSON, but that does not seem to work.
I have made sure that all the dependent JS and CSS for MorrisJS is mapped on the View.
When I give dummy data statically into the Chart options, it generates the chart perfectly.
Only does not work when the JSON data is passed.
Please could you guide me on this, I am sure I have made a silly mistake, but am not able to figure it out.
My View:
<div id="myfirstchart" style="height: 250px;"></div>
<script>
Morris.Bar({
element: 'myfirstchart',
data: <?php echo $graphData; ?>,
xkey: 'MonthName',
ykeys: ['totalTicket'],
labels: ['Value']
});
</script>
My Controller:
public function index(){
$x['graphData']=json_encode($result);
$this->load->view('common/header');
$this->load->view('common/main_top_navbar');
$this->load->view('reports/trends');
$this->load->view('common/footer',$x);
}
My Model:
class Reports_model extends CI_Model{
function display_monthOnMonth_records(){
$this->db->select('MONTHNAME(CreatedOn) as MonthName, count(TicketID) as totalTicket');
$this->db->from('TBL_tickets');
$this->db->group_by('MonthName');
$this->db->order_by('
FIELD(
MonthName,
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
)
');
$query=$this->db->get();
return $query->result();
}
}
When I run this, I see on the Chrome Browser/page Inspect(F12), that data is showing for the data input, but it is not creating the Chart on Page.
From the Browser Inspect Result:
<script>
Morris.Bar({
element: 'myfirstchart',
data: {"data":[{"MonthName":"January","totalTicket":"2500"},{"MonthName":"February","totalTicket":"2200"},{"MonthName":"March","totalTicket":"2350"}]},
xkey: 'MonthName',
ykeys: ['totalTicket'],
labels: ['Value']
});
</script>
Within the index() method, change :
$x['graphData']=json_encode($result);
into :
$x['graphData']=json_encode($result->data);
From what I see from the output, you have extra data parent.
I am trying create a bar chart for the data in mysql using php. I use bootstrap template to create application. I have predefined barchart with static data. I wanna add the data from the database. I tried my best but could not find solution as I am beginner in Javascript. Please guide me to add data dynamically. The Script is below:
// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: '# of Votes',
backgroundColor: "#26B99A",
data: [10, 20, 30, 40, 20, 10, 40]
}, {
label: '# of Votes',
backgroundColor: "#03586A",
data: [41, 56, 25, 48, 72, 34, 12]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
If I understand the environment, you have php-produced webpages.
If so I would:
Create a .php file
Write some php code to connect to the database and to retrieve an array with the data to be charted
Copy your JS code, wrapped in <script> </script> tags and also wrap it in a JS Function which you'll call later in the page
Inside your JS code, after datasets, write a php loop as this:
// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<?php
if (count($arrayOfData) > 0){
echo "label: '# of Votes',";
echo "backgroundColor: '#26B99A',";
echo "data: [";
$firstValue = true;
foreach ($arrayOfData as $dataValue) {
if ( ! $firstValue ) {
echo ", ".$dataValue;
} else {
$firstValue = false;
}
echo $dataValue;
}
echo "]";
} else {
//Decide what to do if you don't have data
}
?>
}]
}'
Write the rest of the HTML/PHP page.
Note that if you want more than 1 bar in your graph you have to also cycle through different data sets, not only through one as I showed above for simplicity.
i try to display only the example from chart js in a project i work on. Unfortunately i'm forced to use Chart Js 1.x.
I tried to implement the bar example from https://github.com/chartjs/Chart.js/blob/master/samples/bar/bar.html
It's a pretty easy example i guess but it isn't running :(
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="zeitsteuerungChart"></canvas>
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
borderWidth: 1,
data: [
"1","1","1","1","1","1","1"
]
}, {
label: 'Dataset 2',
borderWidth: 1,
data: [
"1","1","1","1","1","1","1"
]
}]
};
window.onload = function() {
var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData
});
};
The Chart JS manipulate the
<canvas id="zeitsteuerungChart"></canvas>
element to
<canvas id="zeitsteuerungChart" width="300" height="150" style="width: 300px; height: 150px;"></canvas>
but thats pretty much it. No diagram shows up. No error in Console. I tried to use jQuery as well to select the canvas with
var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");
but same effect! On other subpages of the project it's working pretty fine!
You are using chart js v2 syntax on v1.
for v1
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
borderWidth: 1,
data: ["1","1","1","1","1","1","1"]
},
{
label: 'Dataset 2',
borderWidth: 1,
data: ["1","1","1","1","1","1","1"]
}]
};
window.onload = function() {
var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
var myBar = new Chart(ctx).Bar(barChartData, options);
};
you can view chart options (chart js v1) here or complete options here