Jump to content
JChartFX Community
  • 0

jChartfx responsive


Question

I have a chart using jChartfx that is rendered on a widget. This widget is resizeable. 

How do I resize the jchartfx chart as the widget is being resized?

 

Code:

@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;

@{
    var x = Model.GetWidgetUser();
}

<li data-row="@x.data_row" data-col="@x.data_col" data-sizex="@x.data_sizex" data-sizey="@x.data_sizey" id="@x.WidgetId" style="border: solid">
    @*<div data-role="navbar" class="widget-head" id="navcontainer">
            @Html.DisplayFor(model => model, "WidgetHeader");
        </div>*@
    <div id="btn" style="overflow: no-content;width:100%;">
        <div id="idRefresh" style="position: absolute; right:0px; top: 0px; display:inline;background:url(../../Content/images/refresh.gif) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"> </div>
        <div id="idResize" style="position: absolute; right:20px; top: 0px; display:inline;background:url(../../Content/images/resize.png) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"></div>
        <div id="idPin" style="position: absolute; right:40px; top: 0px; display:inline;background:url(../../Content/images/pin.png) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"> </div>
        <div id="idText" style="position: absolute; right:50%; top: 20px; display:inline; height: 20px; "><h5>@Model.Widget.Title</h5></div>
    </div>

    <br /><br /><br />
    <div style="overflow: auto;height:93%;">

        <div id="ChartDiv" style="overflow: auto;height:288px;"></div>

    </div>
</li>

<script type="text/javascript" language="javascript">
    var chart1;

    function LoadPieChart() {

        chart1 = new cfx.Chart();
        chart1.setGallery(cfx.Gallery.Pie);
        chart1.getAllSeries().getPointLabels().setVisible(true);
        var pieAttr = chart1.getAllSeries().getGalleryAttributes();

        pieAttr.setLabelsInside(false);
        chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
        chart1.getLegendBox().setVisible(false);

        var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

        chart1.getAxisY().getDataFormat().setDecimals(2);
        chart1.getView3D().setEnabled(true);
        chart1.getAllSeries().getPointLabels().setVisible(true);

        //console.log("1: "+str)
        chart1.setDataSource(str);

        var data = chart1.getData();
        data.setSeries(1);
        data.setPoints(10);

        chart1.getAllSeries().getPointLabels().setVisible(true);
        chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

        chart1.getLegendBox().setVisible(false);
        //chart1.getLegendBox().setWidth(50);
        //chart1.getLegendBox().setDock(cfx.DockArea.Right);
        //chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

        chart1.getPlotAreaMargin().setTop(0);
        chart1.getPlotAreaMargin().setBottom(0);
        chart1.getPlotAreaMargin().setRight(0);
        chart1.getPlotAreaMargin().setLeft(0);

        var divHolder = document.getElementById('ChartDiv');
        chart1.create(divHolder);
    }

    $(function() {
        LoadPieChart();
    });

    $(window).resize(function() {
        if (chart1 != null)
            chart1.doUpdate(true);
    });
</script>
 

  • Like 1
Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

This is the simplest HTML page (no server side needed) to test the jChartFX doUpdate functionality, the only external requirement is jQuery, note that there are 2 links, you should first click Resize Div and later click Resize Chart

 

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="Include/jquery.js">
    </script>
    <script type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
</head>
<body>
 
<div id="myDiv" style="width:400px;height:300px;display:inline-block"></div>
 
<script language="javascript">
    var chart1;
    
    $(document).ready(function($) {
        chart1 = new cfx.Chart();
        chart1.create("myDiv");
    });
 
    function resizeDiv()
    {
    var divElem = document.getElementById("myDiv");
    divElem.style.width = "600px";
    divElem.style.height = "400px";
    }
 
    function resizeChart()
    {
    chart1.doUpdate(true);
    }
</script>
 
<br/>
 
<a href="javascript:resizeDiv()">Resize Div</a> <a href="javascript:resizeChart()">Resize Chart</a>
 
</body>
</html>
 

If this works in your system it means doUpdate is working as expected, if it doesn't it might be that you are using a very old version of jChartFX that obfuscates the name of doUpdate.

 

After this test, you will then need to if the resize function is in fact being called and also if the div that holds the chart has the size you expect.

 

Regards,

 

JuanC

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...