I want to draw a graph on my page and would like to use Charts.js. The Documentation on
http://www.chartjs.org/docs/
says that the Chars I want to create needs an Array of Labels like this:
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
Question: How do I create such a Array?
Question: How can I fill this array with the Input of a Textfield?
Thanks!
Jan
A1) The way you have written is the right way to create arrays in javascript
A2) Suppose you have a textfield with id='month'. You can access its value like this:
var month = document.getElementById('month').value
Next you can create an array var label = []; and add the data from the text field by pushing in the array. i.e label.push(month)
Once you have populated the array for label, you can assign this array to property labels of your data object.
Similarly to assign values to data, create an array var values = []; var values2 = []; Now populate the values and values2 array by pushing values into it.
var label = [];
var values = [];
var values2 = [];
var month = document.getElementById('month').value;
//keep on doing this for all input fields
label.push(month)
//similarly push data into values and values2.
//Now build your structure for chart as follows:
var data = {
labels : label,
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : values
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : values2
}
]
}
Here label , values and values2 are the arrays you got from your textfields.
Hope this helps.
define something like this{
data = {
label:""
fields: [],
};
push the value
data.fields.push({
label: "label",
value: "your constructed value"
});
Related
Hi I am trying to show value from database in a javascript chart.
I tried ecoing the whole script, but it doesnt work.
Here is my code. Any clue on how to do that?
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
</body>
I want to control these values:
labels : ["January","February","March","April","May","June","July"],
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
For this you need to pass JSON string as parameter to JavaScript function which will have associative array like month: scaling factor as key value pair. then in the function you can parse JSON string and fetch required data and pass to chart function.
I use chart JS
var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
datasets : [
{
fillColor : chartGood,
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59]
}
]
}
var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);
I have 2 questions
How to make last bar another color
How to make last label as image
You can use the ChartNew.Js libary available at https://github.com/FVANCOP/ChartNew.js/ . This libary adds the functionality to add an array of object for the color options. It does add some options for changing the labels as well, but I do not think it is possible to use an image for the actual chart's labels. You may be able to modify the tooltip that pops up for that label doing something like: How to add image to chart.js tooltip?, but I cant say for sure. Here is some code that I used in a recent app to color code each bar based on the percent value of the data:
//Set all canvas options and fill with data
self.chartJs = function () {
//create an array for each column to be set into the chart properties -- also create arrays for the colors of the columns
var arrayOfJobData = self.chartData();
var descArray = [];
var effArray = [];
var colorArray = [];
for (i = 0; i < arrayOfJobData.length; i++) {
//console.log(arrayOfJobData[i].Cost_Code_Description);
descArray.push(arrayOfJobData[i].Cost_Code_Description);
//console.log(arrayOfJobData[i].Efficency);
effArray.push(arrayOfJobData[i].Efficency);
//Create an array of colors to match with the corresponding efficency % to show a + - relationship in the color scheme
if (arrayOfJobData[i].Efficency < 100) {
colorArray.push("red");
}
else if (arrayOfJobData[i].Efficency >= 100) {
colorArray.push("green");
}
}
//chart data is set and colors selected
var barChartData = {
labels: descArray, //array labels holding the desc for each cost code
datasets: [
{
type: "Bar",
//label: "Efficency %",
fillColor: colorArray,
strokeColor: "black",
pointColor: "rgba(220,220,220,1)",
pointstrokeColor: "white",
drawMathLine: "mean", //using the math functions add-in draw a line with the average %
mathLineStrokeColor: "orange",
data: effArray //array of efficency percent values
}]
}
You can basically build your own array of colors using a method somewhat like was mentioned by the other guy to set only the last color if you want too. The important thing is that you should use ChartNew.js to do what you want with ease.
Here is something more aligned with what you want in colors:
var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
labels : ["3/20","3/21","3/22","3/23"],
datasets : [
{
fillColor: ["chartGood ","chartGood ","chartGood ","red"],
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [ 52, 50, 49, 59]
}
]
}
There is also pretty good documentation for ChartNew.js at : https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options
for the point 1 :
To plot your last bar with different color, you can divide your dataset to different data arrays as follow : the first data array : you replace the last value by null ... and for the second data array, all the values are null except the last one !!
"datasets": [{
fillColor : chartGood,
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [12, 21, 28, 29, 31, 55, 52, 50, 49, null]
},
{
fillColor : chartGood,
strokeColor : "rgba(255,0,0,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [null, null, null, null, null, null, null, null, null, 59]
}],
For the second point :
If you want that the last label will be an image : this is not possible with Chart.js .... however you can use some (html, css) tricks to place your image over the last label ...
As example you can plot a table below the labels, the number of columns = length of the labels set (in your case = 10)
You set as style = visibility: hidden for each column .. only the last one (visible)
You put a negative margin-top value (to place your image over the label)
Hope this help
I want to create a Line chart with multiple datasets dynamically in the chart.js library.
I am able to assign the data dynamically. But I want to create the datasets itself dynamically. I saw the link below:
How to add the elements dynamically from the html table for chart.js
and tried this :
var datasetValue = [];
for (var j = 0; j < count; j++) {
datasetValue[j] = [
{
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)' ,
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}]
}
var mydata = {
datasets : datasetValue
}
Here the count value is 3 and I want to display the 3 lines in the chart and the count value will vary. Even though the chart line color and title will be the same, I want to display the line first and will change the rest once this is solved.
I tried to access the data like so :
alert("Datasets:"+mydata.datasets[0].data);
It should show the data of the first dataset but it's showing undefined.
However in the below case:
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [95,53,99,73,27,82,40],
title : "2014"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [35,43,59,31,50,66,55],
title : "2013"
}
]
}
alert("Datasets:"+mydata1.datasets[0].data);
I am able to get the data of first dataset. Could anyone please give me the solution?
I think you are looking for something like the following solution.
http://jsfiddle.net/5m63232a/
var datasetValue = [];
var count = 10;
for (var j=0; j<count; j++) {
datasetValue[j] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}
}
var mydata = {
datasets : datasetValue
}
alert("Datasets: "+mydata.datasets[0].data);
Create service to fetch json formt like :
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
Then add following javascript code
var j = [];
$.ajax({
type: 'GET',
url: 'http://' + window.location.host.toString() + "/path",
dataType: 'json',
success: function (data) {
j = data;
},
async: false
});
var chartData = {
labels: j.labels,
datasets: j.datasets
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(chartData, {
responsive: true,
animation: true,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>"
});
}
I'm trying using line chart from plugin Chart.js on my site, and I'm trying to find the way of display data at point value.
can somebody help me...
Mi current javascript code is:
var lineChartData = {
labels : ["00:00","06:00","12:00", "18:00"],
datasets : [
label: "PR",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#FF0040",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : ['1','10','5','15']
]
}
This is what i want at my line chart:
Recently I started a project with rails backend and ember js, however I find the documentation on both together is difficult to find or quite ambiguous, however I have parts of my app working perfectly.
Now, I decided to code a google line chart in an ember component. With ember inspector, it tends to throw an error on localhost:3000/#/chart currently the error:
Uncaught Error: <Sample.ChartView:ember526> Handlebars error: Could not find property 'chart' on object (generated chart controller)
So, here's my code for the relevant files:
assets/javascript/components/chart_component.js:
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [51,10,18,58,65,95,87]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
};
var data2 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [51,10,18,58,65,95,87]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
};
Sample.LineChartComponent = Ember.Component.extend({
tagName: 'canvas',
attributeBindings: ['width', 'height'],
width: '480',
height: '360',
data: null,
didInsertElement: function() {
var ctx = this.get('element').getContext("2d");
var myNewChart = new Chart(ctx).Line(this.get('data'));
}
});
javascripts/routes/chart_route:
Sample.ChartRoute = Ember.Route.extend({
model: function(){
return Ember.Object.create({
modelOne: data,
modelTwo: data2
});
}
});
Where I'm calling the chart component.. javascripts/templates/chart.handlebars
<h2>Chart one</h2>
{{chart data= model.modelOne}}
<h2>Chart two</h2>
{{chart data= model.modelTwo}}
As for the naming convention:
Components must have a dash in their name. So blog-post is an
acceptable name, but post is not. This prevents clashes with current
or future HTML element names, and ensures Ember picks up the
components automatically.
http://emberjs.com/guides/components/defining-a-component/
As far as I see, you called your component simply "charts", that might be the problem.