Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
joelajean
Posts: 127
Registered: ‎01-25-2010
My Device: Z10, Dev Alpha B & Bold 9900
My Carrier: Bell
Accepted Solution

jqPlot Charting - WebView.evaluateJavaScript()

I've been playing arround with jqPlot (http://www.jqplot.com) to enable charting capabilities within my BB 10 app. So far, I've been able to generate most of the required chart to the exception of charts containing date/time data array types. When I load the timeChart.html from file, as per found in the chart.zip attachment, the chart will generate without any hiccups.


The failing point is when I try to load the chart.html and generate the required javascript via C++, I then pass it over to the WebView and run the evaluateJavaScript() the chart does not generate, I only get an empty chart...

See below some code snippet to explain the backend processing that occurs...

Page 
{   
    // Property
    property int recordId

    Container 
    {
        WebView 
        {
            id: webViewChart
            objectName: "webViewChart"
            url: "local:///assets/htmlChart/charts/chart.html"
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            settings.viewport: {"width" : "device-width", "initial-scale" : 1.0  }
         
            onLoadingChanged: 
            {
                if (loadRequest.status == WebLoadStatus.Started) 
                {
                    console.debug("Load started.")
                }
                else if (loadRequest.status == WebLoadStatus.Succeeded) 
                {
                    // Page has successfully been loaded, now we can draw the chart.
                    console.debug("Load finished.");
                    myDataModel.generateChart(recordId);
                }
                else if (loadRequest.status == WebLoadStatus.Failed) 
                {
                    console.debug("Load failed.");
                }
            }
        }
    }

attachedObjects: [
  MyDataModel
  {
    id: myDataModel
    onChartLoaded:
    {   
       console.debug("onChartLoaded()");
       var result = webViewChart.evaluateJavaScript(chartScript, JavaScriptWorld.Normal);
       console.debug("result: " + result);
    }
  }
]


 

void MyDataModel::generateChart(const int& recordId))
{
...

// Generate the chart javacript
  QString chartScript = generateChartByType(recordId, chartTitle);
  qDebug() << "chartScript: " << chartScript;
  emit chartLoaded(chartScript);
}

 

QString MyDataModel::generateChartByTime(const int& recordId, const QString& chartTitle)
{
   qDebug() << "generateChartByTime()";

   // Initialization
   QString chartScript;

   // Build the javascript
   chartScript = "(function()"
           "{"
           "  var line1=[['2008-05-30','1950-01-01 00:10:12'], ['2009-06-30','1950-01-01 00:09:45'], ['2012-07-30','1950-01-01 00:09:12'], ['2014-08-30','1950-01-01 00:09:00'], ['2008-09-30','1950-01-01 00:10:23']];"
           "  var plot1 = $.jqplot('chart1', [line1],"
           "  {"
           "    title: 'Time Chart',"
           "    pointLabels:{ show:true },"
           "    rendererOptions:{ smooth: true },"
           "    seriesDefaults:"
           "    {"
           "      showMarker:true,"
           "      pointLabels:{ show:true },"
           "      markerRenderer: $.jqplot.MarkerRenderer,"
           "      axes:"
           "      {"
           "        xaxis:"
           "        {"
           "          label:'Date',"
           "          renderer:$.jqplot.DateAxisRenderer,"
           "          tickOptions:{formatString:'%b %#d, %y'},"
           "          min:'January 30, 2008'"
           "        },"
           "        yaxis:"
           "        {"
           "          label:'Time',"
           "          renderer:$.jqplot.DateAxisRenderer,"
           "          tickOptions:{formatString:'%M:%S'},"
           "          min: '1950-01-01 00:05:00',"
           "          max: '1950-01-01 00:15:00',"
           "          tickInterval: '5 minute',"
           "          autoscale: false"
           "        }"
           "      }"
           "    }"
           "  });"
           "})();";

   return chartScript;
}

 

 If I substitute the line1 array with integer value, as per below, the chart will generate... but for this chart I need date time values :smileyhappy: Are there some un documented constraint regarding the evaluateJavaScript() function ???

var line1 = [14, 32, 41, 44, 40, 47, 53, 67, 87];

 

 

 

 

 

 

Please use plain text.
Developer
joelajean
Posts: 127
Registered: ‎01-25-2010
My Device: Z10, Dev Alpha B & Bold 9900
My Carrier: Bell

Re: jqPlot Charting - WebView.evaluateJavaScript()

Found this issue... javascript was malformed !

Please use plain text.