Chart Stacked multi-series

fabyo · July 5, 2013

Hello

I am not able to make a graph like this:

angelr · July 5, 2013

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

fabyo · July 5, 2013

thanks

Not 100% work:

thank you for your help

Gra

I need to make a graph like this:

PRK · August 8, 2013

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???

Sign In

Chart Stacked multi-series

Question

fabyo

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

angelr

Link to comment

Share on other sites

fabyo

Link to comment

Share on other sites

PRK

Link to comment

Share on other sites

Join the conversation

Browse

Activity