Jump to content
JChartFX Community
  • 0

Chart Stacked multi-series


fabyo
 Share

Question

3 answers to this question

Recommended Posts

  • 0

Following is a sample code to resemble your chart using JChartFX:

 <!DOCTYPE html>
<html>
<head>
    <title>Multi-Stacked Series</title>

    <script type="text/javascript" src="Scripts/jchartfx.system.js"></script>

    <script type="text/javascript" src="Scripts/jchartfx.coreVector.js"></script>

    <script type="text/javascript" src="Scripts/jchartfx.advanced.js"></script>

    <script type="text/javascript" src="Scripts/jchartfx.vectorTemplates.js"></script>

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

    <script type="text/javascript">
        window.onload = function () {
            onLoadDoc();
        };

        var chart1;

        function onLoadDoc() {

            chart1 = new cfx.Chart();

            var items = [
            { "Product A": 110, "Product B": 80, "Service A": 100, "Service B": 50, "Service C": 45, "Date": "2001-01-01T24:00:00.000Z" },
            { "Product A": 100, "Product B": 100, "Service A": 95, "Service B": 40, "Service C": 50, "Date": "2002-01-01T24:00:00.000Z" },
            { "Product A": 105, "Product B": 130, "Service A": 100, "Service B": 50, "Service C": 50, "Date": "2003-01-01T24:00:00.000Z" },
            { "Product A": 115, "Product B": 150, "Service A": 95, "Service B": 50, "Service C": 50, "Date": "2004-01-01T24:00:00.000Z" },
            { "Product A": 120, "Product B": 100, "Service A": 45, "Service B": 35, "Service C": 45, "Date": "2005-01-01T24:00:00.000Z" }
            ];

            chart1.setDataSource(items);

            chart1.setGallery(cfx.Gallery.Bar);

            var bar = chart1.getGalleryAttributes();
            bar.setTemplate("BarSpotlight");
                            
            var title = new cfx.TitleDockable();
            title.setText("Year");
               
            var axisX = chart1.getAxisX();
            axisX.setTitle(title);

            chart1.getSeries().getItem(0).setStacked(true);
            chart1.getSeries().getItem(1).setStacked(true);
            chart1.getSeries().getItem(3).setStacked(true);
            chart1.getSeries().getItem(4).setStacked(true);
               
            chart1.getLegendBox().setDock(cfx.DockArea.Bottom);

            var chartDiv = document.getElementById('ChartDiv1');
            chart1.create(chartDiv);

            };

    </script>

</body>
</html>

 MultiStacked Series

 

 

 

Link to comment
Share on other sites

  • 0

Hi,

 I would like to know how to set unit symble like % or $ or GB or Kb in jChartFX.  Ex: in Y axis lets have 10 GB, 50 GB, 100 GB, 200 GB ...etc

 I am about it use it for disk space notification, so i need to use GB format. 

 I have searched JchartFx documentaiton and got to know that the following kindda could be used,

 chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); 

 but where can i find the all available label formats?   like  cfx.AxisFormat.Currency, cfx.AxisFormat.Storage, cfx.AxisFormat.X, cfx.AxisFormat.Y, cfx.AxisFormat.Z

 Does the documentation has what is X,Y or Z that could replace Currency??? 

Link to comment
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...
 Share

×
×
  • Create New...