Smoothie Line Chart Example

Smoothie Line Chart Example

Using the HTML widget it is simple to integrate 3rd party components such as charts and graphics into your MobiOne application. In this example I will share how to add a Smoothie line chart to a MobiOne Screen. If you want to jump straight the finished solution see the download at the end of this article. Here is a quick peek at the UI running in the MobiOne 2.5 Simulator. See attachment image2.png

Note: This example does not run properly in the Test Center. Please use the new Mobile Simulator that is included in MobiOne 2.5 milestone-1 and higher versions.

Step-1: Download smoothie.js
Familiarize yourself with smoothie charts javascript library and download it from smoothiecharts.org. See attachment smoothie website.png

Step-2: Configure project to use smoothie.js
From the MobiOne Design Center create a new design and add the smoothie.js file as an Additional JavaScript Library See attachment smoothie.js-lib-property.png

Step-3: Layout the UI; include an HTML widget
In this example the HTML widget Id=htmlChartContainer and its Style=Transparent. See attachment htmlwidget.png

Step-4: Customize the HTML widget, add a <canvas> for the line chart
We add a simple canvas on the html widget’s container. Smoothie will render the line graph on to this canvas. See attachment canvas.png

Step-5: Generate HTML & Configure the Chart in javascript
Next I save the my file as chart.mobi. Then generated the HTML using the Project>Generate Application Files. Open the chart_custom.js file in your favorite JavaScript editor. I’m using the MobiOne 2.5 milestone-1 editor in this example.
The startChart() function is called by documentReady() when the app content is loaded. This function creates a chart and timeseries. It concludes by starting a random data generator to create time series data that will be graphed.

/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {
  startChart();
}

//----------------------------------------------
var green = 'rgb(6, 227, 7)';
var smoothie;
var lineData;

function startChart() {
  
  //create chart and bind it to use the custom HTML widget's canvas 
  smoothie = new SmoothieChart( );
  smoothie.streamTo(document.getElementById("xhtml-canvas"), 500);  

  //create timeseries and bind it to the chart
  lineData = new TimeSeries();
  smoothie.addTimeSeries(lineData,{lineWidth: 2, strokeStyle: green});
  
  //start generating random timeseries data
  genTestData();
}
  
function genTestData() {
  var fn = function() {
    var tm = new Date().getTime();
    var y = Math.random() * 10000;
    lineData.append(tm,y);
  };

  testGenInterval = setInterval(fn,500);
}

Step-6: Run and Test
From the chart design file in the Design Center click the Run in Simulator button. To launch the app in the Simulator and test it.

Downloads
See attachment mobione-smoothie-chart-example.zip