I am using ChartJS with forms. What I am trying to do is get the value from the field to draw the specific chart segment. I want to use Knockout data-bind to get the chart to refresh when the number in the field is changed.
For some reason when I input a number it does not refresh automatically. However when I input a number and click refresh in the browser the number has held.
Can anyone help me so that the bind updates in realtime?
<body>
<form>
<input name="ValueStream" id="ValueStream" data-bind="value: ValueStream, valueUpdate: 'input'"></input>
<input type="text" name="ProductService" id="ProductService" value="200">
<input type="submit">
</form>
<div id="canvas-holder" style="width:30%">
<canvas id="chart-area" width="300" height="300"/>
</div>
<script>
var pAndS = document.getElementById("ProductService").value;
var vS = document.getElementById("ValueStream").value;
var polarData = [
{
value: pAndS,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: vS,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
responsive:true
});
};
</script>
</body>
Chart.js only draws the chart when you call the method. You'll need some way of seeing when the observable has changed and then call the PolarArea method again. You could try something like what is mentioned here: Detecting change to Knockout view model.
Related
I am creating a Todo Application using Vue.js, Express.js, and MongoDB.
I want to change the state of the fields that appear as v-for through the checkbox.
The code I want is to change the state of the text when the checkbox is checked and to show another element with v-if.
Here is the code I wrote: But it does not work.
If I have the wrong code, please help me.
List Component
<template>
<div class="todos">
<div v-for="todo in todos" v-bind:key="todo._id" class="todo">
<div>
<input type="checkbox" v-model="todo.done" v-on:click="completeTodo(todo)">
<del v-if="todo.done">{{todo.title}}</del>
<strong v-else>{{todo.title}}</strong>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
todos: {}
}
},
created () {
this.$http.get('/api/todos')
.then((response) => {
this.todos= response.data
})
},
methods: {
completeTodo (todo) {
todo.done = !todo.done
}
}
}
</script>
You don't need v-on:click="completeTodo(todo)". v-model is already doing the trick for you. Also, the todos in your code should be defined and instantiated as array not an object.
v-model is used for two way data binding. That means, whatever data you pass from your code will be bound to the checkbox value in this case and whenever a change is made from UI and value of checkbox is altered by user, that will be captured in v-model variable. v-model is a combo of :value prop and #change event in case of checkbox, hence, it is able to update data in both the ways.
Please refer this snippet.
var app = new Vue({
el: '#app',
data: {
todos: [
{
id: 1,
title: 'Study',
done: false
},
{
id: 2,
title: 'Work',
done: false
},
{
id: 3,
title: 'Play',
done: false
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="todos">
<div v-for="todo in todos" :key="todo.id">
<div>
<input type="checkbox" v-model="todo.done"/>
<del v-if="todo.done">{{todo.title}}</del>
<strong v-else>{{todo.title}}</strong>
</div>
</div>
</div>
</div>
I'm using tinyMCE as a html-editor and I want to use checkboxes in my code where their toggled state is saved in the source-code.
Now I only get the state as how I defined in the beginnning, not after I toggled them in the editor.
code
This the code that I enter into tinyMCE, but the new state does not get reflected after I toggle the checkbox.
<textarea>
<input type="checkbox" name="checkbox" id="checkbox2" checked="checked" /> <label for="checkbox">check</label>
<br />
<input type="checkbox" name="checkbox" id="checkbox2"/> <label for="checkbox">no-check</label></div>
</textarea>
Codepen
I made an example where you can check it out at codepen.
Based on the anwser found at this question, I managed to find a solution.
I added a setup-function to TinyMCE. I also added support for radiobuttons and selects.
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
setup : function(ed) {
// This function works for checkboxes
ed.on('init', function(e) {
$(ed.getBody()).on("change", ":checkbox", function(el){
if(el.target.checked){
$(el.target).attr('checked','checked');
}else{
$(el.target).removeAttr('checked');
}
});
// Radiobuttons
$(ed.getBody()).on("change", "input:radio", function(el){
var name = 'input:radio[name="'+el.target.name+'"]';
$(ed.getBody()).find(name).removeAttr('checked');
$(el.target).attr('checked','checked');
$(el.target).prop('checked',true);
});
// Selects
$(ed.getBody()).on("change", "select", function(el){
$(el.target).children('option').each(function( index ) {
if(this.selected){
$( this ).attr('selected','selected');
}else{
$( this ).removeAttr('selected');
}
});
});
});
}
});
I have the following Kendo MVVM grid:
<div>
<div id="systemsGrid" data-role="grid"
data-sortable="true"
data-scrollable="true"
data-editable="false"
data-selectable="true"
data-toolbar="['create', 'save', 'cancel']"
data-bind="source: systems"
data-auto-bind="true
data-columns="[
{ 'field': 'SystemName', 'width': 200 },
{ 'field': 'SystemKey', 'width': 200 },
{ 'command': [{name: 'destroy', text: 'Delete'}], 'width': 38 }
]">
</div>
</div>
When a given row is clicked on, I want to use the SystemKey to look up additional data and display it on another grid. How do I capture this click event? I added this:
$("#systemsGrid").on("click", gridClick);
But this will also fire even if, say, the "Add new record" button is clicked. What is the proper way to respond to just a click on a row of the grid?
Why do not simply bind the change event to your gridClick?
Something like:
<div>
<div id="systemsGrid" data-role="grid"
data-sortable="true"
data-scrollable="true"
data-editable="false"
data-selectable="true"
data-toolbar="['create', 'save', 'cancel']"
data-bind="source: systems, events: { change: gridClick }"
data-auto-bind="true"
data-columns="[
{ 'field': 'FirstName', 'width': 100 },
{ 'field': 'City', 'width': 100 },
{ 'command': [{name: 'destroy', text: 'Delete'}], 'width': 100 }
]">
</div>
</div>
Where I bound gridClick using events: { change: gridClick }
You can see it here: http://jsfiddle.net/OnaBai/6XALD/2/
I'm having problem loading a google chart after clicking the submit button in a form. I came across many similar questions posted online but none solve my question, including this.
The structure of my code: I wrap the google chart code inside a submitHandler: function(form) , then wrap the whole submitHandler with a $("#timeuseform").validate({}), then the most outside is a $(document).ready(function(){}) .
When I remove the google chart code, everything worked fine. When I copy and paste the google chart code into submitHandler: function(form) , the whole page broke down.
here the HTML:
<head>
<meta charset="utf-8">
<title>Time Use Survey 2014</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Do you sleep, work and play more than fellow Americans?</h1>
<br>
<hr width="100%" size="3" noshade="noshade" color="#8A8A8A"/>
<br>
<form name="myForm" id="timeuseform" method="get" action="#">
1. On average, how much you sleep per day?<br>
<input type="text" name="sleep" value="" id="inputsleep"/><br><br>
<div id="sleepbox"></div><br><br>
2. On average, how much time you work on your workday (excludes travel related to work)?<br>
<input type="text" name="work" value="" id="inputwork"/><br> and you are working
<SELECT NAME="workstatus" SIZE="1" id="inputworkstatus">
<OPTION>full-time
<OPTION>part-time
</SELECT><br><br>
<div id="workbox"></div><br><br>
<input type="submit" value="Submit" id="button"/>
<INPUT TYPE="reset">
</form>
<br><br>
<div id="chart_div" style="width: 500px; height: 300px;"></div>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
and this is the JS:
$(document).ready(function(){
//form validation using jquery validation plugin
$("#timeuseform").validate({
rules: {
sleep: {
required: true,
number: true
},
work: {
required: true,
number: true
},
},
//messages to be displayed if input cannot be validated
messages: {
sleep: {
required: "Please answer this question",
number: "Your answer must be a number with maximum 1 decimal point"
},
work: {
required: "Please answer this question",
number: "Your answer must be a number with maximum 1 decimal point"
},
},
//display error messages style if input cannot be validated
errorPlacement: function(label, element) {
label.insertAfter(element);
},
wrapper: 'span',
submitHandler: function(form) {
//setting the input variables
var inputsleep = $('#inputsleep').val(),
inputwork = $('#inputwork').val();
//code for question 1 on sleep
if(inputsleep>8){
$("#sleepbox").text("You sleep too much!");
$("#sleepbox").addClass("more");
}
else{
$("#sleepbox").text("You sleep too little!");
$("#sleepbox").addClass("less");
}
//code for question 2 on work
if(inputwork>6){
$("#workbox").text("You work too much!");
$("#workbox").addClass("more");
}
else{
$("#workbox").text("You work too little!");
$("#workbox").addClass("less");
}
//code for google bar chart starts here
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data1, options);
}
}
});
});
I have uploaded both working (without google chart code) and broken (with google chart code) in my github.
Working without google chart: http://kuangkeng.github.io/keng-data-journalism/timeuseform/nochart.html
Broken with google chart: http://kuangkeng.github.io/keng-data-journalism/timeuseform/chart.html
Appreciate if anyone can guide me to fix this problem. Thanks.
Move the google.load and google.setOnLoadCallback calls outside your jQuery code. Use the callback to initialize your validator instead of using document ready:
function init () {
$("#timeuseform").validate({
// validator stuff
});
}
google.load("visualization", "1", {packages:["corechart"], callback: init});
Here is my code :
I need to make a spiderweb graph with a legend in blue here.
3 axys
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Default");
dojo.require("dojox.charting.plot2d.Spider");
dojo.require("dojox.charting.axis2d.Base");
dojo.require("dojox.charting.widget.Legend");
dojo.ready(
function(Chart, Default, Default, Spider, Base,Legend){
var chart1 = new dojox.charting.Chart("chart1");
chart1.addPlot("default", {
type: "Spider",
labelOffset: -10,
seriesFillAlpha: 0.2,
markerSize: 3,
precision: 0,
divisions: 11,
spiderType: "polygon"
});
var data= [ {"J":0,"S":0,"I":0},
{"J":10,"S":10,"I":10},
{"J":7,"S":4,"I":8} ];
chart1.addSeries("min", {data: data[0] }, { fill: "blue" });
chart1.addSeries("max", {data: data[1] }, { fill: "blue" });
chart1.addSeries("Test", {data: data[2] }, { fill: "blue",text: "Test" });
chart1.render();
chart1.removeSeries("min");
chart1.removeSeries("max");
var legendTwo = new Legend({chart: chart1}, "legendTwo");
});
</script>
</head>
<body>
<div id="chart1" style="width: 600px; height: 600px;"> </div>
<div id="legendTwo"></div>
</body>
</html>
And i don't understand why the label and the legend doesn't print.
The remove is due to a bug of dojox.
Regards
Bussiere
I may be misunderstanding your issue, but since you are using the old module loading style (dojo.require), you need the full name of the Legend class:
var legendTwo = new dojox.charting.widget.Legend({chart: chart1}, "legendTwo");