I am trying to develop an admin dashboard with site metrics and I have menues showing different data when you click on them. I write the front-end on Backbone.js and use Jquery to reduce the number of calls. The problem is that when I browse the page and when I open a new graphic and mouse-over it, sometimes it starts to overlap with the previous graphics. What can I do so that I only see the graphic relevant to the option I select?
newAndTotalUsersPerMonth: function (event) {
event.preventDefault();
$('#User').hide();
$('#right').hide();
$('#left').hide();
$('#third').hide();
$('#logLabel').hide();
$('#main-view').addClass('small-2');
$('#main-view').append('<p id="label"></p>');
var $label = $('#label');
var text = $label.text();
$label.text(text.replace(text, "New and total users per month"));
$('#main-view').append('<div id="container" class="row">'+
'<col-md-12>'+
'<div id="canvasArea">'+
'<canvas id="nu1" style="width:960px; height:250px; overflow:hidden;"></canvas>'+
'</div>'+
'</col-md-12>'+
'</div>');
$.ajax({
url: '/analytics',
type: 'GET',
success: function (data) {
var labels = [];
var dataSet1 = [];
var dataSet2 = [];
for (var i = 0; i < data.length; i++) {
labels.push(data[i][1] + "." + data[i][0]);
dataSet1.push(data[i][2]);
dataSet2.push(data[i][3]);
}
var lineData = {
labels: labels,
datasets: [
{
label: "New Users",
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: dataSet1
},
{
label: "Total Users",
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: dataSet2
}
]
};
if(!$('#canvasArea').is(':empty')) {
var ctx = document.getElementById("nu1").getContext("2d");
window.myBar = new Chart(ctx).Line(lineData, {
responsive: false
});
}
else {
$('#nu1').reset();
var ctx = document.getElementById("nu1").getContext("2d");
window.myBar = new Chart(ctx).Line(lineData, {
responsive: false
})
};
}
});
}
Related
I'm hoping I can add markup to each dataset individually so that I can change the colors with css.
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["(1)","(2)","(3)","(4)","(5)"],
datasets: [
{
label: "Food Chart",
fillColor: "#000066",
strokeColor: "transparent",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: calcChart(),
}
]
}
var options = {
scaleShowHorizontalLines: true,
barValueSpacing : 5,
scaleBeginAtZero : true,
barValueSpacing : 25
}
var myBarChart = new Chart(ctx).Bar(data,options);
Since Chart.js and Canvasjs both use the canvas element to draw the charts you can't interact with the elements using CSS.
If you want to use custom CSS to the chart elements you will need to use a SVG library like highcharts.
in my asp.net webform application i want to send a variable from my codebehind to the .aspx page for using in my js codes
codebehind:
public string GetSomestring()
{
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize("#000");
}
and in my page in js i have this code
<script>
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var color= '<%= GetSomestring()%>';
var lineChartData = {
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: color,
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [12,23,12,43,10,3]
}
]
}
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
the string returned to my .aspx page because when i write the below code it execute rightly
var color = '<%= GetSomestring()%>';
alert(color);
and when i write this code my js execute rightly
var color = "#000";
i dont know what is the problem that my first code not execute rightly and pointStrokeColor not get the "color"
To get value from server in javascript you should use Ajax for that using webmethod in codebehind.
Here is some sample code may it help you.
Code Behind:
[WebMethod]
public string GetSomestring()
{
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize("#000");
}
View: "Client Side"
var result;
$.ajax({
url: ../PageName/GetSomestring",
type: "get",
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (data, status) {
result = data.d;
},
error: function (requeset, status, error) {
alert(error);
}
});
var color= result ;
OR just try this:
Convert color into color.value
<script>
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var color= '<%= GetSomestring()%>';
var lineChartData = {
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: color.value,
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [12,23,12,43,10,3]
}
]
}
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
Convert color into color.value
pointStrokeColor: color.value,
Hopefully this will help you.Thanks
I am working on a code with an API. I need to create a line chart for these things called tickets. I need to call the information for them from the API. It has the ticket ID, date, and description. For the labeling, I have four weeks of the month. If I don't call it for every week, the chart won't show up. However, when I do this, instead of the information on a chart popping up, an alert does with all of the information for each week.
var lineChartData = {
labels: ["Week 1","Week 2","Week 3","Week 4"],
datasets: [{
label: "Tickets",
fillColor: "rgba(100,200,244,0.2)",
strokeColor: "rgba(100,200,244,1)",
pointColor: "rgba(200,255,255,.7)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [$.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}) ] };
If you need the full code (this has CSS, HTML, and the JavaScript), click here.
$.get does not evaluate to a return value like a normal function call.
When the data is received from http://velocity.data.wpengine.com:3000/tickets/, your callback function gets called. In your case that is
function(data){ alert(JSON.stringify(data));}
You have access to the returned data inside this callback function. And you're just alerting it. Which is why you simply get an alert alone. You need to move your chart drawing code into this call back function. Something like
window.onload = function () {
$.get("http://velocity.data.wpengine.com:3000/tickets/list/", function(data){
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(100,200,244,0.2)",
strokeColor: "rgba(100,200,244,1)",
pointColor: "rgba(200,255,255,.7)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: data,
},
{
label: "My Second dataset",
fillColor: "rgba(100,200,244,0)",
strokeColor: "rgba(100,200,244,0)",
pointColor: "rgba(200,255,255,0)",
pointStrokeColor: "rgba(255,255,255,0)",
pointHighlightFill: "#rgba(255,255,255,0)",
pointHighlightStroke: "rgba(220,220,220,0)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
};
var ctx1 = document.getElementById("chart1").getContext("2d");
window.myLine = new Chart(ctx1).Line(lineChartData, {
showScale: false,
pointDot: true,
responsive: true
});
var ctx2 = document.getElementById("chart2").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData, {
responsive: true
});
....
for (var i = 0; i < reduced.length; i++) {
var innerdata = [];
for (var j = 0; j < days.length; j++) {
var rev = 0;
_.each(reduced[i].data, function(timerevenueObj) {
var current = new Date(parseInt(timerevenueObj[0]));
var daysweek = days[j];
if (current.toDateString() === daysweek.toDateString()) {
rev = rev + timerevenueObj[1];
}
});
innerdata.push(rev);
}
datasets.push({
label: reduced[i].label,
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: innerdata
});
}
data.push({
labels: ["May 17","May 18","May 19","May 20","May 21","May 22","May 23","May 24","May 25","May 26","May 27"],
datasets: datasets
});
reduced is an array of Objects with the following format:
Channel 1
CreateTime
Revenue
CreateTime
Revenue
Channel2
CreateTime
Revenue
CreateTime
Revenue
Format of Data:
I am getting an error when trying to display a Line Chart
Chartjs expects an object, not an array, so use data = {} instead of data.push({}).
When I'm using an array to fill in my line chart it's kinda doing something odd.
I noticed when I add 7 new points it works properly like this:
But when I add 8(or more) new points instead of 7 the result is this:
below you can find my code:
<script>
var arrayGegevens = <?php echo json_encode($array); ?>;
var data =
{
labels: [],
datasets: [
{
label: "Machine activity",
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: []
}]
};
var ctx = document.getElementById("canvas2").getContext("2d");
var myLineChart = new Chart(ctx).Line(data,
{
bezierCurve: false,
animation: false
});
for(i = 0; i < 8; i++) // 8 should be arrayGegevens.Length (=20)
{
myLineChart.addData([arrayGegevens[i]['MachineStatus']], arrayGegevens[i]['Time']);
}
</script>
So am I doing something wrong or is this a bug?
Seems like the problem was with the length of the labels (2015-3-24 14:55:00). I substringed them down to 14:55 and now I can fit way more of them in 1 line chart!