Welcome Guest Search | Active Topics |

Customization question
Options
Previous Topic Next Topic
crizov
#1 Posted : Monday, July 7, 2014 5:43:09 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2014(UTC)
Posts: 5

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Wanted result

Hello guys, I want to use the jquery version of 100% stacked chart and I am wondering if I can achieve results similar to those in the picture (Wanted result link)
Back to top
crizov
#2 Posted : Tuesday, July 8, 2014 2:29:02 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2014(UTC)
Posts: 5

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Sorry to bother you guys, but I would be really grateful if you answer my question. I have been reading the documentation and there are a lot of customization options there, but I really need to know if I can achieve the mentioned results. Here is a link to the image of the result I am trying to get.

https://www.dropbox.com/s/0hanbbejfwvkzc4/Untitled.png
Back to top
 |  Edit by user
Dragan
#3 Posted : Tuesday, July 8, 2014 2:49:51 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
As I can see, you need to create a separate chart for each sell. Here is an example how to customize the chart:

Code:
<script lang="javascript" type="text/javascript">

        $(document).ready(function () {
            $('#jqChart').jqChart({
                legend: { visible: false },
                border: { visible: false },
                axes: [
                    {
                        location: 'left',
                        lineWidth: 0,
                        majorTickMarks: { visible: false },
                        majorGridLines: { visible: false },
                        labels: { visible: false },
                        margin: 0
                    },
                    {
                        location: 'bottom',
                        lineWidth: 0,
                        majorTickMarks: { visible: false },
                        majorGridLines: { visible: false },
                        labels: { visible: false },
                        margin : 0
                    }
                ],
                series: [
                    {
                        type: 'stacked100Bar',
                        title: 'Stacked 1',
                        data: [62],
                        pointWidth : 1,
                        labels: {}
                    },
                    {
                        type: 'stacked100Bar',
                        title: 'Stacked 2',
                        data: [56],
                        pointWidth: 1,
                        labels: {}
                    },
                    {
                        type: 'stacked100Bar',
                        title: 'Stacked 3',
                        data: [33],
                        pointWidth: 1,
                        labels: {}
                    }
                ]
            });
        });

    </script>

</head>
<body>
    <div>
        <div id="jqChart" style="width: 500px; height: 100px;"></div>
    </div>
</body>
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
crizov on 7/8/2014(UTC)
crizov
#4 Posted : Tuesday, July 8, 2014 6:35:01 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2014(UTC)
Posts: 5

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Thank you very much. I really appreciate the help.
Back to top
Users browsing this topic
Guest (2)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.074 seconds.