You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 26-03-2013 18:17:23

erikj09
Contributors
Registered: 22-03-2013
Posts: 1

Adding JChartFX as a Plugin

Hello,

I have version 4 of Metro UI and I wanted to add JChartFX as a plugin to use throughout the site. However, I am having trouble getting it to work properly. You can find JChartFX here:

http://jchartfx.com/
http://jchartfx.com/pg/ (documentation page)

I created a folder under "plugins" called "jchartfx".

I downloaded all the JChartFX files and added them to the "jchartfx" plugin directory I created.

I then created three files:

plugin.js
plugin.php
plugin.css

As per the JChartFX documentation for JQuery usage, they required the lines of code below to be added to the <head> of the page. So I added it to the plugin.php file as so:

$plHeader .= '<script type="text/javascript" src="plugins/jchartfx/js/jchartfx.system.js"></script><script type="text/javascript" src="plugins/jchartfx/js/jchartfx.coreVector.js"></scrip>';

Next, the documentation asks to add this line of code into the body of the page, which I did on the Typography page for test purposes. (http://www.consultparagon.com/app/#!/typography)

<div id="ChartDiv" style="width:600px;height:400px;display:inline-block"></div>

The third step is to set up the javascript event to call the charts on page load, which I added to the plugin.js file as so:

$.plugin($siteLoad ,{
    jchartFX:function(){
        var chart1;

    function loadChart()
      {       
           chart1 = new cfx.Chart();
            chart1.getData().setSeries(2);
            chart1.getAxisY().setMin(500);
            chart1.getAxisY().setMax(2000);
            var series1 = chart1.getSeries().getItem(0);
            var series2 = chart1.getSeries().getItem(1);
            series1.setGallery(cfx.Gallery.Lines);
            series2.setGallery(cfx.Gallery.Bar);
            var data = [
            { "Month": "Jan", "Bikes": 1800, "Parts": 1300 },
            { "Month": "Feb", "Bikes": 1760, "Parts": 900 },
            { "Month": "Mar", "Bikes": 1740, "Parts": 970 },
            { "Month": "Apr", "Bikes": 1750, "Parts": 1010},
            { "Month": "May", "Bikes": 1810, "Parts": 1070 },
            { "Month": "Jun", "Bikes": 1920, "Parts": 1180 }
            ];
            chart1.setDataSource(data);
            var divHolder = document.getElementById('ChartDiv');
        chart1.create(divHolder);           
      }
      
      
    }
});

However, when the page loads I receive this error using Google Chromes Javascript Console and it breaks the page:

"Viewport target-densitydpi is not supported".

You can see a working test page that I set up on my server outside of the framework here:

http://www.consultparagon.com/test/

I am pretty certain I have not set up the plugin properly or maybe my directory references are not correct? Can you please help me set up this plugin to work within the framework? What are the correct steps and set up processes that I should follow?

Thanks,

Erik

Offline

#2 26-03-2013 22:51:57

Emil
Moderator
From: in a shipyard
Registered: 15-03-2013
Posts: 106

Re: Adding JChartFX as a Plugin

Very good description of your problem wink
The error you receive is not related to your problem (it is something related to mobile version support still in development).

I'd try something like http://jsfiddle.net/rkSfB/:

<?php
<?php
$jsFiles[]=	"http://www.jchartfx.com/jChartFX/7.0.4728.16930/jchartfx.full.js";
$jsFiles[]=	"http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js";
?>

for plugin.php

For plugin.css

.jchartfx {
    font-family: Arial;
    font-size: 8pt;
}
.jchartfxToolTip {
    background-color: #282828;
    color: #F0F0F0;
    padding: 3px;
    font-size: 9pt;
    font-family: Arial;
    font-weight: bold;
    -moz-border-radius: 3px;
    border-radius: 3px;
    pointer-events: none;
    border-style: solid;
    border-width: 1px;
    border-color: #999999;
    -webkit-font-smoothing: antialiased;
}
.jchartfxToolTipVisible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
.jchartfxToolTipHidden {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#targetchart { width: 608px; height: 408px; padding: 4px; border: 1px solid #dddddd; background: #eeeeee }
        #targetchart h3 { text-align: center; margin: 0; }

Plugin.js

 
$.plugin($afterSubPageShow,{ 

jchartFX:function(){
 	 var chart1; 
var items = [
            { "Open": 24.2, "Date": "2003-03-01T23:45:10.280Z" },
            { "Open": 21.3, "Date": "2003-03-02T23:45:10.280Z" },
            { "Open": 22.4, "Date": "2003-03-03T23:45:10.280Z" },
            { "Open": 24.3, "Date": "2003-03-04T23:45:10.280Z" },
            { "Open": 22.6, "Date": "2003-03-05T23:45:10.280Z" }
        ];
             $(".ChartDiv1").chart({
                 gallery: cfx.Gallery.Bar,
                 dataValues: items,
                 dataSourceSettings: {
                     fields: [{ name: "Open", usage: cfx.FieldUsage.Value }, 
			      { name: "Date", usage: cfx.FieldUsage.XValue}]
                 },
                 titles: [{ text: "Mapping Fields to chart elements"}],
                 axisY:{
                    min:0,
                    max:30
                }
             });
}
});

I have not tested the above, expect it not to work.


Good advice is often confusing, but example is always clear.

Offline

Board footer

Powered by FluxBB