• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1757
  • Last Modified:

How to update a kendo chart?

Hello,

Below is a bit of code i wrote earlier (haha Gary) that uses a KendoChart to display a bar chart.

How would i update the chart data if it changed?

Thanks.


 
$("#chart").kendoChart({
      series: [{
          name: "Vanföreställningar",
          data: [3]
      }, {
          name: "Hallucinationer",
          data: [4]
      }, {
          name: "Agitationaggressivitet",
          data: [9]
      }, {
          name: "Depression/dysfori",
          data: [4]
      }, {
          name: "Ångest",
          data: [2]
      }, {
          name: "Eufori/upprymdhet",
          data: [1]
      }, {
          name: "Apati/likgiltighet",
          data: [9]
      }, {
          name: "Hämningslöshet",
          data: [6]
      }, {
          name: "Irritabilitet/labilitet",
          data: [4]
      }, {
          name: "Motorisk av. beteende",
          data: [2]
      }, {
          name: "Sömn",
          data: [4]
      }, {
          name: "Aptit/ätstörningar",
          data: [12]
      }],
      seriesColors: ["STEELBLUE", "FIREBRICK", "GOLD", "LIGHTBLUE", "INDIANRED", "DIMGREY", "MEDIUMBLUE", "POWDERBLUE", "GREY", "MEDIUMVIOLETRED", "GREEN", "SKYBLUE"],
      legend: {
          position: "bottom"
      }
  });

Open in new window

0
soozh
Asked:
soozh
  • 8
  • 4
  • 2
  • +1
2 Solutions
 
RobOwner (Aidellio)Commented:
Do you mean you want to get updated data from a server? As you would use ajax for that
0
 
GaryCommented:
Just rebind the the full chart again - normally you would use datasource but since that isn't working with seriescolor and the legend it's the only thing you can do.
0
 
RobOwner (Aidellio)Commented:
Here is an example of using an external data source: http://jsbin.com/nekir/1/edit?js,output getting data from http://jsbin.com/nehif/1.json (notice how the objects identifiers are enclosed in double quotes)

$(function() {
	$.getJSON("//jsbin.com/nehif/1.json", function(data) {

		$("#chart").kendoChart({
			series: data.series,
			seriesColors: data.seriesColors,
			legend: {
				position: "bottom"
			}
		});
	});
});

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Ray PaseurCommented:
This produces something fairly reasonable.  I do not have the CSS and I redacted the full example to produce a smaller test data set, but it shows the client/server interaction with the AJAX request.
http://iconoun.com/demo/temp_soozh.php

Client-side script.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script>

$(document).ready(function(){
    $("#signal").click(function(){
        $.getJSON("temp_soozh_server.php", function(response){
            $("#chart").kendoChart(response);
        });
    });
});
</script>

<title>HTML5 Page With jQuery and Kendo Chart</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<div id="chart"></div>
<div id="signal">Create Chart</div>

</body>
</html>

Open in new window

Server-side script:
<?php // demo/temp_soozh_server.php
error_reporting(E_ALL);

// TO SIMULATE A DATABASE LOOKUP AND CAUSE A CHANGE OF VALUES ON EACH PAGE LOAD
$a = rand( 1, 3);
$b = rand( 4, 6);
$c = rand( 7, 9);
$d = rand(10,12);

// CREATE AN ARRAY OF OBJECTS
$objects = array
( (object)array("name" => "Vanföreställningar",       "data" => "[$a]")
, (object)array("name" => "Hallucinationer",          "data" => "[$b]")
, (object)array("name" => "Agitationaggressivitet",   "data" => "[$c]")
, (object)array("name" => "Aptit/ätstörningar",       "data" => "[$d]")
)
;

// THE COLORS, RANDOMIZED TO SIMULATE A CHANGE
$seriesColors= array("STEELBLUE", "FIREBRICK", "GOLD", "GREEN");
shuffle($seriesColors);

// THIS SEEMS TO BE AN OBJECT
$legend = new StdClass;
$legend->position = "bottom";

$arr = array
( 'series'       => $objects
, 'seriesColors' => $seriesColors
, 'legend'       => $legend
)
;

// SEND THE JSON STRING
$str = json_encode($arr);
echo $str;

Open in new window

Best to all, ~Ray
0
 
RobOwner (Aidellio)Commented:
http://jsbin.com/nekir/2/edit?js,output (click the "refresh" button)

i just destroy the chart and re-create it. seems the easiest way to refresh the data

$(function() {
	$.getJSON("//jsbin.com/nehif/1.json", function(data) {

		$("#chart").kendoChart({
			series: data.series,
			seriesColors: data.seriesColors,
			legend: {
				position: "bottom"
			}
		});
	});
});

function RefreshData() {
	$.getJSON("//jsbin.com/dikufu/1.json", function(data) {
		var chart = $("#chart").data("kendoChart");
		chart.destroy();
		$("#chart").kendoChart({
			series: data.series,
			seriesColors: data.seriesColors,
			legend: {
				position: "bottom"
			}
		});

	});
}

Open in new window


@Ray - Not sure why you repeated what I have already stated.  AND There's no PHP here...
0
 
soozhAuthor Commented:
Hej,

Thanks for all the help guys.  I guess i should give you a little more information and background.

I am working in a platform that allows me to render JS code that is run onload, and i can add JS code to object events such as  onclick, onchange etc.

So i dont have full control over all the code generated, how or where it is placed.  Neither am i an expert in JS, Kendom or JSON.

I am trying to add a chart to my application witin the bounds of what the platform will allow.

So when the web page is rendered i generate the code to produce the chart based on the data held in the underlying database.

Then as the user makes changes to this data (its the 12 measurements in the bar chart) I want to update the bar chart with the new value, before the user commits and saves the data.

In my limited view i imagined that i could create the chart, and then as data what changed i would just update the datasource with the new value and force the chart to be redrawn.  I am looking for a solution that requires the minumum amount of processing.

Does this sound like a good solution, and can i use the example given above?  The only problem is dont know how to create the JSON datasource in JS. (i am an old delphi programmer).

So assuming the above is ok, can someone just show me how i can join up the dots... so when there is an onchange in an edit field, i take that value, and update the chart.
0
 
RobOwner (Aidellio)Commented:
here ya go: http://jsbin.com/nekir/2/edit?js,output

happy to answer any questions regarding the implementation

This dynamically adds each input box for editing:

		$.each(data.series, function(i,el) {
			var tmp = $('<input/>').attr({
				type: 'text',
				id: 'series'+i,
				name: el.name,
				value: el.data[0]
			});
			tmp.on('change',function() {
				console.log(this.value);
				var chart = $("#chart").data("kendoChart");
					chart.options.series[i].data[0]=this.value;
					chart.refresh();
			});
			$("#container").append(tmp);
		});

Open in new window

0
 
soozhAuthor Commented:
Hello,

When i click on the link i can see how it works... but since this is really not my domain i can not work out how.

I guess there must be some code which i have not found that links the onchange events to the update of the chart.

Maybe i will need someone who understands json and jquery to help me out.
0
 
RobOwner (Aidellio)Commented:
tmp.on('change',function() {
				//get a reference to the chart
				var chart = $("#chart").data("kendoChart");
				//access the series value for this dimension
chart.options.series[i].data[0]=this.value;
// refresh the chart
					chart.refresh();
			});

Open in new window


Referring to my comment above and this one, please state what you don't understand as I'm more than happy to explain
0
 
RobOwner (Aidellio)Commented:
You may also want to open other questions addressing certain aspects of the code I've posted.
0
 
Ray PaseurCommented:
Maybe i will need someone who understands json and jquery to help me out.
Yes, I think that's smart.  You probably want to hire a professional to help you isolate the parts of the question into "bite-sized" portions.  There are a lot of moving parts here and they interact in complex and intricate ways.  My guess is that it will take you at least weeks if not months to go from "not an expert" to "working application" if you rely on trial and error.  So my recommendation would be to get some hands-on help to deconstruct the problem.  And, of course, post questions here at E-E!
0
 
RobOwner (Aidellio)Commented:
I agree with Ray.  I started typing out a line by line explanation and there is just far too much information to impart to you.  Which is why I suggest breaking down the parts you don't understand and focusing on those elements until you do.
0
 
soozhAuthor Commented:
I have not abandoned this question - just been working on something else - so i will come back to it in a few Days.
0
 
RobOwner (Aidellio)Commented:
No problem - I'm still monitoring
0
 
soozhAuthor Commented:
We liked the way bob updated the table by just changing the one data value and using refresh.

The only problem we have now is that the diagram changes size on the refresh.  Maybe thats another question?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now