help with d3 or highcharts Javascript library

Hi,

What I am trying to do is draw a histogram using Javascript. I am preferring to do this with either d3,js, highcharts or kendoUI.js. Can anyone help me how to achieve this? there will be a dropdown that will allow the user to select columns basically it should get the columns into dropdown from columnNames and depending upon which column they select in the dropdown, the histogram should be drawn against it. so if they select "Age" then we need to draw frequency distribution of Age  or if a user selects Height then we need to draw frequency distribution against it. I also need to show mean, median, max, min, total count, std deviation, 5% percentile and 95% percentile (these statistics can be shown in a box next to the graph).

My source example dataset is of the form:

 var baselineData = {
"numCols": "8", "columnNames": [{ "internalName": "ID", "displayName": "ID", "type": "Counter" },
    { "internalName": "Title", "displayName": "Title", "type": "Text" }, { "internalName": "Age", "displayName": "Age", "type": "Number" }, { "internalName": "Height", "displayName": "Height", "type": "Number" }, { "internalName": "Gender", "displayName": "Gender", "type": "Choice" }, { "internalName": "Length", "displayName": "Length", "type": "Number" }, { "internalName": "Width", "displayName": "Width", "type": "Number" }], "numRows": "3", "rows": [["1", "Item 1", "12", "5", "Male", "120", "130"], ["2", "Item 2", "14", "5", "Male", "120", "130"], ["3", "Item 3", "16", "12", "Female", "121", "130"]]
};


Any guidance or help will be useful.
TechsavyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
I'd like to help you on this one but I need to know a little more.  What is Going to generate the statistical information for you? Ie  When the user selects the relevant column does this request the stat from a server or is it supplied the raw data?
I'm guessing you have a server side script such as php or .net and if so would be better to utilise these to generate the statistical data if only for privacy and not supplying all your data to the browser.
0
TechsavyAuthor Commented:
Hi tagit,

Thanks for your response. The data will be aquired from a webpart on a sharepoint page and is stored on the page in the form of the above variable that holds the json object of the resulting data which is what my source data that drives the histogram and statistics.
0
TechsavyAuthor Commented:
Unfortunately not storing data on the webpage is a decision that i cannot make. As my team wants to use the webpart they developed to retireve sp list data as a json object which is what we need to use as the raw data
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RobOwner (Aidellio)Commented:
That's ok, it just means using a javascript library like jStats to render this info before passing it to the graphing object.  Certainly can be graphed with either of those libraries you've mentioned so let me know which way you want to go.  As for the stats you can work with jStat library: http://www.jstat.org/
0
RobOwner (Aidellio)Commented:
I'll follow up with more code soon
0
TechsavyAuthor Commented:
Highcharts Or kendo ui will be my pref.

For statistics, can we determine those from the  chart api that we use for histogram ?
0
RobOwner (Aidellio)Commented:
And you can use either of those but you'll need another library (jStat) to compute the statistics to then graph them.

The chart api doesn't have the methods for processing the raw data into the statistic you want, rather you pass the computed data to the chart api to graph as is iin a histogram format.
0
RobOwner (Aidellio)Commented:
The chart is essentially just the freq of whatever the user selects so with a bit of calculating it's easy to display this in a chart.

Here is a demo using your sample data above and using the Age: http://jsbin.com/EPALEcO/3/edit

As for your table of stats, that requires the jStat library (unless you want to code those functions yourself).

Do you have some more sample data to pursue this further?
0
TechsavyAuthor Commented:
hi Tagit,

This is so cool. Thank you so much. I need the user be able to select the "bin" size and default it to "10", columns against which he wants to draw the histogram, colors of the bars and automatically the histogram draws itself based on the user selection.

Also draw a curve following the distribution, draw the line on the bar that shows the mean, std deviation.


I can send you some sample data later today.
0
TechsavyAuthor Commented:
actually i think we are missing one point here. I dont get my "Histogram" data calculated.

Meaning, we have to determine how many times a particular value occurs in a particular bin range.

so for eg: if you have age data as, 1, 2, 3, 4, 5, 6, 7, 7, 2, 2, 5, 12, 20, 20.

then you have:  then you "8" occurences in the range of 1-5.

so we have to determine the number of occurrences of a particular event/characteristic.
0
RobOwner (Aidellio)Commented:
Sure and in the choice in the example I am calculating the frequency of those occurrences, it's just hard coded to the age but that's easily changed.Just did that to show you.
Again as for the bin size that can be variable. I'll work on it and update the demo
0
RobOwner (Aidellio)Commented:
I need the user be able to select the "bin" size and default it to "10", columns against which he wants to draw the histogram, colors of the bars and automatically the histogram draws itself based on the user selection.

So the user can select the bin size, which is just the x-axis for ages correct?  If so, does the user also select the range eg 10-20 for a bin size of 10, or 20-40 for a bin size of 20??
0
RobOwner (Aidellio)Commented:
Ok here is an updated demo for your feedback http://jsbin.com/EPALEcO/6/edit
0
TechsavyAuthor Commented:
Hi tagit.

Thank you again. Sorry i misguided you. It is not the bin size but number of bins that a usr would select. And based upon the number of bins we would calculate the range for each bin.
0
RobOwner (Aidellio)Commented:
Sorry, just so I understand, can you give an example of what you mean re the bins
0
TechsavyAuthor Commented:
Hi Tagit,

Here is some good theory about Histograms.

http://quarknet.fnal.gov/toolkits/ati/histograms.html

Below is an interactive histogram which is what I am looking JavaScript charting API that has a finished look. I want exactly like this where we can change various parameters. In this example he is setting bin-width as opposed to number of bins.
http://www.shodor.org/interactivate/activities/Histogram/#

A "bin" can define a range of values into which the event falls into. So if a user says, I want my data to be arranged in 10 bins, then we have to determine the "bin-width or range of values that can go into each bin".


Let me know if this explains he concept or not.
0
TechsavyAuthor Commented:
Also another requirement was to save last selected selections in a "cookie".
0
RobOwner (Aidellio)Commented:
I certainly understand what you're after... sorry about the confusion.

ignoring most of the code here http://jsbin.com/ILOlAkO/3/edit, just change the bin drop down and i think it works the way you want.
0
TechsavyAuthor Commented:
Hi Tag,

it works most of it...but right now we have hard coded the dimension values i.e Age, Height, etc..but is it possible for us to retrieve this from the JSON object that we are using as the source? and plot the data accordingly? Also I dont think aesthetically those greater than less than signs look good..if we can just remove those on the x-axis ...am also attaching the my requirement document.
Histogram-Web-Part-Requirements.pptx
0
RobOwner (Aidellio)Commented:
You can retrieve this dynamically, it's only hard coded for testing and simplicity.
Again the greater / less than signs can be changed to whatever you want, they're essentially just labels for the range of the bin.
0
RobOwner (Aidellio)Commented:
From your requirements doc it is showing that a user can select a column of data, though I'm interpreting that as changing between Age, gender etc?

Just a side note:
While we're working through this you may want to look into a BI tool such as qlikview to achieve this.  Can be embedded easily into a webpage. I'm suggesting this because we are pushing the limits with all these javascript libraries. Not to say it can't be done this way but it will be a lot harder to manage all this code going forward.  Qlikview has the graphing and statistical functions inbuilt as well being able to connect to virtually any data source.
0
TechsavyAuthor Commented:
well it can be any column that should be populated from my JSON objects' columns property. If you look at the source JSON, we have a columns property that lists all the columns and thier data type.
0
RobOwner (Aidellio)Commented:
Yes I can see those. Do you want the charts zero based or min and max worked out from the data given?
0
TechsavyAuthor Commented:
min and max should be worked from by the data set chosen by default....and if we can also give that an option in the UI to set the x-min and x-max that will be nice too...

Tag it I really appreciate your patience. I am learning a lot..I just started to javascript and I need guidance like this...

Thank you so much...
0
RobOwner (Aidellio)Commented:
ok i'll break this down into individual functions, rather than trying to do it all in the one example.  That way you'll also pick it up a lot faster.
When parsing the json data, javascript automatically renders this in an easy to use object so what I'm going to do is update that object with other info such as max and min for each column.
Here is an example of that: http://jsbin.com/EFONUji/2/edit

Lets focus on the parsing of the data as we don't want to be jumping back and forth.

I can see you've got multiple types of columns.  What "measures" are you after?  
How are you wanting to display each "dimension".  For example, is it possible you will want to show different age group comparisons for Gender?
I have done max/min for "Number".  
I'm just trying to get a feel for what we can parse initially and what will be required to do later, on the fly, when the user is changing values etc.
0
TechsavyAuthor Commented:
Hi Tagit,

Thank you for the response. I think we will want the "max" and "min" for Date data type besides "Number"


How are you wanting to display each "dimension".  For example, is it possible you will want to show different age group comparisons for Gender? nope this is not required.
0
RobOwner (Aidellio)Commented:
Are there any other days typesYou'll need to include ad the date wasn't in the sample data I had
0
TechsavyAuthor Commented:
right now..I think the focus is on numeric and Date data types. am not sure how we would plot a text data type on a histogram. I have not seen people doing it. in those cases i believe people use bar graphs. The sample data set that I provided is just an example. it can have any number of columns any data type. But the JSON structure will always be like that.
0
TechsavyAuthor Commented:
Hi Tag,

I attempted this with Raphael.js as it is a requirement. So far I was able to draw a bar graph using rapahel. I am attaching my code.

We now just need to make sure that it works exactly like this:

http://www.shodor.org/interactivate/activities/Histogram/
myCode.txt
0
RobOwner (Aidellio)Commented:
I'll be able to have a look soon. I actually thought I'd posted the code for parsing the data but clearly forgot!
0
RobOwner (Aidellio)Commented:
Here is your example in a public domain so we can both edit it:  http://jsbin.com/ukuBARo/1/edit

I'll take a look at getting this to work with the frameworks you've chosen, will just take me a little longer while I get up to speed with how they are fitting together.
0
RobOwner (Aidellio)Commented:
How do you want to show the bin size on the x-axis?
0
RobOwner (Aidellio)Commented:
This is what I've got so far and would recommend using the libraries I've got http://jsbin.com/EFONUji/3/edit

It will be easier configure the look and feel as well as the properties of the chart. I'm sure we can can get that t work for you.  A histogram is just a bar chart so it's just capturing the bins properly.
Sorry, I'm just short of time on this but I'll help where I can.
0
TechsavyAuthor Commented:
Hi tagit

Thank you for your efforts. I will review what u have so far ... I will add my part to it as i can...
0
RobOwner (Aidellio)Commented:
No problem.  The reason I asked about the x-axis is that the min / max of the dataset as well as the bin size poses an issue in terms of how the data is displayed.

For example,
If the min is 22 and the max is say 53 and you set the bin to 10 then the x-axis will have bins of:

22-31, 32-41, 42-51, 52-61

and the graph will be 4 bars.

If you give the user the ability to change the min/max then you'll just end up with empty space on the histogram.  If it is to work as the link you've posted then there is no configurable minimum other than to show the empty space between 0 and the start of the data.
0
RobOwner (Aidellio)Commented:
ok this works: http://jsbin.com/EFONUji/5/edit

Allows you to choose any dimension and the bin size.  Let me know how you want to tweak how it looks eg bar size and spacing, colour etc

The main issue i found with this is lining up the data with the dimension categories.  Both are arrays and each index in the array corresponds to the other array.  Just a bit of shifting of the data and the loops that create each array to get them to line up.

(EDIT)
I've added comments that will hopefully explain how this was done.  I'll also include the code here for other EE users in case the jsbin is deleted.

html:
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Parsing JSON Data for Histogram" />
    <meta charset=utf-8 />
    <title>JS Bin</title>
<!-- *** NOT IN USE ***
    <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
    <script src="http://www.jstat.org/jstat-1.0.0.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script>
      var myData = {
        "numCols": "8", "columnNames": [{ "internalName": "ID", "displayName": "ID", "type": "Counter" },
                                        { "internalName": "Title", "displayName": "Title", "type": "Text" }, { "internalName": "Age", "displayName": "Age", "type": "Number" }, { "internalName": "Height", "displayName": "Height", "type": "Number" }, { "internalName": "Gender", "displayName": "Gender", "type": "Choice" }, { "internalName": "Length", "displayName": "Length", "type": "Number" }, { "internalName": "Width", "displayName": "Width", "type": "Number" }], "numRows": "3", "rows": [["1","Item 1","12","5","Male","120","130"],["2","Item 2","15","5","Female","105","128"],["3","Item 3","24","4","Male","178","129"],["4","Item 4","26","4","Male","150","108"],["5","Item 5","19","6","Male","168","138"],["6","Item 6","12","5","Female","183","156"],["7","Item 7","15","5","Male","159","171"],["8","Item 8","22","6","Male","168","178"],["9","Item 9","30","6","Female","106","115"],["10","Item 10","11","6","Male","139","155"],["11","Item 11","14","5","Female","107","128"],["12","Item 12","13","6","Female","190","179"],["13","Item 13","22","4","Male","155","102"],["14","Item 14","29","4","Male","152","178"],["15","Item 15","10","4","Female","166","140"],["16","Item 16","24","6","Female","180","139"],["17","Item 17","29","4","Female","101","110"],["18","Item 18","25","6","Male","107","101"],["19","Item 19","11","4","Male","185","126"],["20","Item 20","10","4","Male","200","196"],["21","Item 21","13","6","Male","136","116"],["22","Item 22","26","5","Female","144","148"],["23","Item 23","29","5","Male","141","110"],["24","Item 24","20","6","Female","149","112"],["25","Item 25","14","5","Female","145","195"],["26","Item 26","10","5","Male","197","156"],["27","Item 27","12","4","Female","120","197"],["28","Item 28","26","4","Female","154","127"],["29","Item 29","18","4","Female","124","123"],["30","Item 30","15","5","Female","111","132"],["31","Item 31","20","6","Male","137","191"],["32","Item 32","29","5","Female","160","186"],["33","Item 33","14","4","Female","114","164"],["34","Item 34","24","6","Female","140","125"],["35","Item 35","21","5","Male","119","190"],["36","Item 36","29","6","Female","136","161"],["37","Item 37","27","5","Female","120","122"],["38","Item 38","17","4","Male","187","123"],["39","Item 39","21","5","Male","182","105"],["40","Item 40","15","4","Male","185","169"],["41","Item 41","28","5","Male","188","128"],["42","Item 42","18","6","Female","175","197"],["43","Item 43","22","4","Male","103","110"],["44","Item 44","23","5","Male","108","141"],["45","Item 45","15","5","Male","122","163"],["46","Item 46","25","5","Male","101","115"],["47","Item 47","16","6","Female","136","125"],["48","Item 48","17","4","Male","116","104"],["49","Item 49","11","6","Male","166","183"],["50","Item 50","11","4","Male","134","125"],["51","Item 51","13","4","Male","146","137"],["52","Item 52","19","4","Female","117","194"],["53","Item 53","10","6","Male","129","119"],["54","Item 54","13","5","Female","194","124"],["55","Item 55","22","4","Female","129","171"],["56","Item 56","20","6","Female","151","182"],["57","Item 57","20","5","Male","140","134"],["58","Item 58","23","6","Male","152","151"],["59","Item 59","22","4","Female","118","139"],["60","Item 60","29","6","Male","111","153"],["61","Item 61","16","4","Male","172","134"],["62","Item 62","24","4","Female","100","142"],["63","Item 63","13","6","Male","191","126"],["64","Item 64","30","4","Female","200","151"],["65","Item 65","19","6","Male","152","106"],["66","Item 66","10","4","Male","178","165"],["67","Item 67","14","4","Female","100","135"],["68","Item 68","24","4","Male","181","160"],["69","Item 69","15","5","Female","109","154"],["70","Item 70","26","5","Male","127","158"],["71","Item 71","10","6","Female","148","118"],["72","Item 72","26","4","Female","126","119"],["73","Item 73","26","4","Male","189","153"],["74","Item 74","12","4","Female","159","198"],["75","Item 75","13","6","Female","114","121"],["76","Item 76","11","6","Male","128","113"],["77","Item 77","20","5","Female","124","130"],["78","Item 78","12","5","Female","177","105"],["79","Item 79","21","6","Female","159","197"],["80","Item 80","28","6","Female","190","105"],["81","Item 81","25","6","Female","130","165"],["82","Item 82","18","4","Male","154","115"],["83","Item 83","15","4","Male","122","109"],["84","Item 84","26","4","Male","177","123"],["85","Item 85","29","4","Male","198","159"],["86","Item 86","13","6","Male","118","137"],["87","Item 87","16","4","Male","113","187"],["88","Item 88","30","5","Female","118","157"],["89","Item 89","28","4","Female","153","179"],["90","Item 90","18","4","Male","120","180"],["91","Item 91","29","6","Male","102","171"],["92","Item 92","26","4","Male","115","109"],["93","Item 93","22","6","Male","130","107"],["94","Item 94","16","6","Female","147","191"],["95","Item 95","15","6","Female","163","125"],["96","Item 96","15","4","Male","153","155"],["97","Item 97","16","6","Female","140","119"],["98","Item 98","16","6","Female","150","157"],["99","Item 99","14","6","Male","118","116"],["100","Item 100","17","5","Male","170","198"]]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 };
    </script>    
  </head>
  <body>
  <form id='myform' action="">
    Column: <select name="dimension" id="dimension"></select>
    Bin: <select name="bin" id="bin">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="5">5</option>
      <option value="10" selected>10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
    </select>
    
    
  </form>
    <!-- "container" required for highcharts to 'draw" -->
    <div id='container'></div>
  </body>
</html>

Open in new window


javascript:
/****************************************************************
Functions:
- ParseData
    Goes through the source JSON and adds min / max to the columns

- CreateCombo
    Dynamically creates the dimension drop down lists from the data columns
    (The list of bins are hardcoded in the html)

- CreateChart
    Utilizes the highcharts framework for charting

- GenerateData
    Calculates the frequency of each value in the dataset and
    parses into bins if the bin size is > 1
*****************************************************************/
// Initiate the page with the jQuery ready function
// called when the page has completely loaded
$(document).ready(function() {
  
  // parse the data
  myData = ParseData(myData);
  
  // dynamically create the dropdowns
  CreateCombo(myData);
  
  // Draw the chart with default settings  
  CreateChart();
  
  // Capture events when the dropdowns are selected
  $('#dimension,#bin').on('change',function() {
    CreateChart();
  });
});

//===============================================================
// Function ParseData
//===============================================================
function ParseData(baselineData) {
  // parsing the data, where each column has the following calculated
  
  for (var i=0; i<baselineData.rows.length; i++) {
    var row = baselineData.rows[i];
    for (var c=0; c<baselineData.columnNames.length; c++) {
      var col = baselineData.columnNames[c];
      switch (col.type) {
        case 'Counter':
          break;
        case 'Text':
          break;
        case 'Number':
          // using shorthand if..then..else statements ie () ? :
          col.min = (col.min) ? ((col.min < row[c]) ? col.min : row[c]) : row[c];        
          col.max = (col.max) ? ((col.max > row[c]) ? col.max : row[c]) : row[c];        
          break;
        case 'Choice':
          col.choices = col.choices || {};
          col.choices[row[c]] = (col.choices[row[c]]) ? col.choices[row[c]] + 1 : 1;
          break;
      }
      
    }
  }
  return baselineData;
}

//===============================================================
// Create Dimension Dropdown Lists
//===============================================================
function CreateCombo(baselineData) {
  if (baselineData.columnNames.length > 0) {
    for (var i=0; i<baselineData.columnNames.length; i++) {
      var col = baselineData.columnNames[i];
      switch (col.type) {
        case 'Number':
        case 'Date':
          $('#dimension').append('<option value="'+i+'">'+col.displayName+'</option>');
          break;
      }
    }
  }
}

//===============================================================
// Function CreateChart()
//===============================================================
function CreateChart() {
  var opt = $('#dimension option:selected');
  var index = $(opt).val() * 1;
  var min = myData.columnNames[index].min * 1;
  var max = myData.columnNames[index].max * 1;
  var bin = $('#bin').val() * 1; 
  
  console.log('min: ' + min + ' max: ' + max);
  
  // bin labels
  var cat = [];
  var i;
  
  if (bin > 1) {
    // work out how many bins are required
    // difference between max and min + 1
    var d = max-min;
    var bins = parseInt(d/bin,10) + 1;
    
    // create the bin labels
    for (i=0; i<bins; i++) {
        cat.push((min+i*bin) + '-' + (min+(i+1)*bin-1));
    }
  }
  else {
    // for bin size of 1, just push each value as the bin label
    for (i=min; i<=max; i++) {
      cat.push(i);
    }
  }
  
  // create a new Highcharts chart object with all relevant options
  // options found here: http://api.highcharts.com/highcharts
  // The chart is drawn automatically
  // The data series is calculated and set via the GenerateData function
  var chart = new Highcharts.Chart({
    
    chart: {
      renderTo: 'container',
      type: 'column'
    },
    xAxis: {
      categories: cat
    },
    
    plotOptions: {
      column: {
        groupPadding: 0,
        pointPadding: 0,
        borderWidth: 0,
        pointWidth: null,
        colorByPoint: true
      }
    },
    
    series: [{
      data: GenerateData(min,max,bin,index,myData)
    }]
    
  });
}

//===============================================================
// function GenerateData
//===============================================================
function GenerateData(min, max, bin, index, baselineData) {
  var i;
  var freq;
  
  // create empty array for holding the freq  
  for (i = min, freq = []; i < max; i++) { 
    freq.push(0);
  }
  
  // for each row of data, get the value of the currently selected dimension
  // offset by the minimum value in the dataset
  for (i in baselineData.rows) {
    // if there is already a freq for a value then just increment the count
    // otherwise set its count to 1
    if (freq[baselineData.rows[i][index]-min]) {
      freq[baselineData.rows[i][index]-min]++;
    }
    else {
      freq[baselineData.rows[i][index]-min] = 1;
    }
  }
  
  // if bins are specified then add up the relevant frequencies for each bin
  // otherwise just return the frequencies
  if (bin > 1) {
    var new_freq = [];
    var counter = 0;
    for (i=1; i<=freq.length; i++) {
      if (new_freq[counter]) {
        new_freq[counter]+=freq[i-1];
      }
      else {
        new_freq[counter]=freq[i-1];
      }
      if (i>0 && i%bin===0) {
        counter++;
      }
    }
    console.log(new_freq);
    return new_freq;
  }
  else {
    return freq;
  }
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TechsavyAuthor Commented:
Hi Tagit...

I will go through and If I have any questions I will open another question just so you get more points...

Thanks so much for your help!
0
TechsavyAuthor Commented:
Hi Tagit ..

I wanted to post another question but it is kind of continuation of what we are doing here.. If you like to identify the new question..that is fine i will post another question.

Essentially I tried to tailor the above code to use JQwidgets ui as the UI and some built in methods for saving the cookie stuff appealed me.

the only thing that is not fitting correctly is our Source data. to Use JQ widgets i need to have data in the format of a object array as shown below.

SampleData  = [{Range:1-10, Frequency: 5}, {Range:11-10, Frequency: 2}, etc......]


the JQwidget chart API can be checked out here:


http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm?(arctic)#demos/jqxchart/javascript_chart_column_series.htm

i will keep playing with this framework and use most of your logic..but if you have any quick thoughts please share...

Again thank you so much for your help...
0
RobOwner (Aidellio)Commented:
I understand where you're coming from but it may be a mistake to change the ui now based on looks. I had a look at that link and highcharts can be made to look'm nicer http://www.highcharts.com/stock/demo/
Cookies can be implemented separately to the charting framework. I would probably do it that way. There is also the browser cache so it would be good to know why you want to use cookies
really the question was about highcharts and the demo data you've displayed. changing both is moving the goalposts a bit too far :-) I think we can make this work with what we've done so far
0
TechsavyAuthor Commented:
Hi Tagit...

Thank you ..for your help..you are the best!! no doubt...

I think i can take it from here!!! :)
0
RobOwner (Aidellio)Commented:
Good to hear! Good luck with the project
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.